Display Success Message After Form Submission in WordPress

How to show success message after form submission in wordpressWordpress display success message after form submitShow success message on wordpress form submissionWordpress form submission success message displayDisplay custom success message in wordpress formsHow to add success message after form submit in wordpressWordpress form success message not showingSuccess message after form submission wordpress pluginWordpress show confirmation message after form submitHow to display success message on wordpress form

Explanation

Here's a simple way to show a success message after someone submits a form on your WordPress site.

How It Works:

When someone submits the form, the code checks if the form was actually submitted by looking for a specific button click.
It uses a nonce (a security token) to make sure the submission is secure and genuine.
Once the form is processed, a transient (a temporary message) is set to indicate success.
The page then redirects to prevent the form from being submitted again if the user refreshes the page.

Displaying the Message:

In the footer of your site, the code checks if the success message is set.
If it is, a thank you message is displayed to the user.
After showing the message, it deletes the transient so it doesn't show again unnecessarily.

Using the Form:

The form includes a nonce field for security and a simple text input for the user's name.
There's a shortcode you can use to place this form anywhere on your site: [wp_dudecom_form].

This setup ensures that users see a confirmation message after submitting the form, enhancing their experience on your site.

Code
<?php
// Hook into the form submission process
add_action('init', 'wp_dudecom_handle_form_submission');

function wp_dudecom_handle_form_submission() {
    // Check if the form is submitted
    if (isset($_POST['wp_dudecom_form_submit'])) {
        
        // Verify the nonce for security
        if (!isset($_POST['wp_dudecom_form_nonce']) || !wp_verify_nonce($_POST['wp_dudecom_form_nonce'], 'wp_dudecom_form_action')) {
            return;
        }

        // Process form data here
        // Example: $name = sanitize_text_field($_POST['name']);

        // Set a transient to display the success message
        set_transient('wp_dudecom_form_success', true, 30);
        
        // Redirect to avoid resubmission
        wp_redirect(add_query_arg('form_submitted', 'true', wp_get_referer()));
        exit;
    }
}

// Display the success message
add_action('wp_footer', 'wp_dudecom_display_success_message');

function wp_dudecom_display_success_message() {
    if (get_transient('wp_dudecom_form_success')) {
        echo '<div class="wp-dudecom-success-message">Thank you! Your form has been successfully submitted.</div>';
        
        // Delete the transient after displaying the message
        delete_transient('wp_dudecom_form_success');
    }
}

// Example form with nonce field
function wp_dudecom_example_form() {
    ?>
    <form method="post" action="">
        <?php wp_nonce_field('wp_dudecom_form_action', 'wp_dudecom_form_nonce'); ?>
        <input type="text" name="name" required>
        <input type="submit" name="wp_dudecom_form_submit" value="Submit">
    </form>
    <?php
}

// Shortcode to display the form
add_shortcode('wp_dudecom_form', 'wp_dudecom_example_form');
?>

Instructions

File Location: Add the following code to your theme's functions.php file or a custom plugin file.

Prerequisites:

Ensure you have access to edit your WordPress theme files or create a custom plugin.
Basic understanding of WordPress shortcodes and how to use them.

Implementation Steps:

Open your WordPress admin panel and navigate to Appearance > Theme Editor or use an FTP client to access your theme files.
Locate and open the functions.php file of your active theme.
Copy and paste the provided code into the functions.php file. Ensure you paste it at the end of the file but before the closing PHP tag if it exists.
Save the changes to the functions.php file.
To display the form on a page or post, use the shortcode [wp_dudecom_form] in the WordPress editor where you want the form to appear.
Test the form submission by filling it out and submitting it. You should see a success message displayed after submission.

If you encounter any issues or need further assistance with this implementation or more advanced functionality, consider reaching out to wp-dude.com for expert help.