How to show a message after submitting a form (form made using plugin)

Using the function wp_redirect() may fail due to the timing of its usage and the already sent headers on your form page.

I recommend using jQuery and AJAX for handling form submissions.

This first approach allows the response to be displayed on the same page as the form, avoiding conflicts with the original page headers. Here’s a step-by-step guide on how to do it:

Insert this into your form’s template page:

<div id="form-container">
    <div id="message"></div>

    <form id="myForm" action="<?php echo admin_url( 'admin-ajax.php' ); ?>" method="post">
        <input type="hidden" name="action" value="my_form_submission">
        <input type="text" name="name" value="John">
        <?php wp_nonce_field('my_form_submission_nonce', 'my_form_submission_nonce_field'); ?>
        <input type="submit" value="Submit">
    </form>
</div>


<script>
    (function($) {
        $(document).ready(function() {
            $("#myForm").submit(function(e) {
                e.preventDefault();
                // Check the nonce for security
                var formData = $(this).serialize();
                formData += "&my_form_submission_nonce=" + $("#my_form_submission_nonce_field").val();

                // Send the AJAX request
                $.ajax({
                    type: "post",
                    url: $(this).attr("action"),
                    data: formData,
                    success: function(response) {
                        console.log(response);
                        $("#message").text(response);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $("#message").text("Error occurred: " + textStatus);
                    }
                });
            });
        });
    })(jQuery);
</script>

Then add this to your child theme’s functions.php:

function my_form_submission_callback() {
    // Verify the nonce
    check_ajax_referer('my_form_submission_nonce', 'my_form_submission_nonce_field');

    // Process the form data here
    if ( ! empty($_POST['name'] ) ) {
        $name = sanitize_text_field($_POST['name']);
        echo $name . ", thank you for submitting the form!";
    } else {
        echo "Please input a name!";
    }

    wp_die();
}

add_action('wp_ajax_my_form_submission', 'my_form_submission_callback');
add_action('wp_ajax_nopriv_my_form_submission', 'my_form_submission_callback');

And for the approach of redirecting form submitters to an another page after a successful form submission, just add this inside the success callback function window.location.href="https://myawesomewebsite/thank-you-page";

<script>
    (function($) {
        $(document).ready(function() {
            $("#myForm").submit(function(e) {
                e.preventDefault();
                // Check the nonce for security
                var formData = $(this).serialize();
                formData += "&my_form_submission_nonce=" + $("#my_form_submission_nonce_field").val();

                // Send the AJAX request
                $.ajax({
                    type: "post",
                    url: $(this).attr("action"),
                    data: formData,
                    success: function(response) {
                        console.log(response);
                        $("#message").text(response);
                        window.location.href="https://myawesomewebsite/thank-you-page";
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $("#message").text("Error occurred: " + textStatus);
                    }
                });
            });
        });
    })(jQuery);
</script>