This Is How To Show a Success Message After Form Submission in WordPress
Have you ever built a WordPress website with a contact form or some other type of form, and wanted to display a success message to the user after they submit the form? Maybe you're using a plugin like Contact Form 7 or Gravity Forms, or maybe you've built a custom form with PHP. Either way, showing a success message is a common requirement, and there's a simple way to do it.
The Problem: Displaying a Success Message After Form Submission
When a user submits a form on your WordPress site, you usually want to provide some kind of feedback to let them know that their submission was successful. This helps create a better user experience and gives the user confidence that their form was received.
However, displaying this success message can be tricky, especially if you're not using a pre-built form plugin. You need to find a way to detect when the form has been submitted, and then display the success message on the same page without reloading the entire page.
The Solution: Use the $_POST Superglobal
The solution is actually pretty straightforward. You can use the $_POST
superglobal in PHP to detect when the form has been submitted, and then display a success message on the same page.
Here's a basic example:
<form action="<?php echo admin_url('admin-post.php') ?>" method="post">
<input type="hidden" name="action" value="my_form_action">
<input type="hidden" name="message" value="Success! Your form was submitted.">
<!-- form fields here -->
<input type="submit" value="Submit">
</form>
<?php
if ( isset( $_POST['message'] ) ) {
echo '<div class="success-message">' . $_POST['message'] . '</div>';
}
?>
In this example, we have a simple form with a couple of hidden fields. The action
field is set to my_form_action
, which is the name of the WordPress action that will handle the form submission.
The message
field is where we store the success message that we want to display after the form is submitted.
After the form is submitted, we check the $_POST
superglobal to see if the message
field is set. If it is, we echo out the message inside a div
with a class of success-message
.
This approach has a few advantages:
- No page reload: The success message is displayed on the same page, so the user doesn't have to wait for the page to reload.
- Flexible messaging: You can customize the success message by simply changing the value of the
message
field in the form.
- Easy to implement: The code is straightforward and easy to understand, so it's easy to implement on your own WordPress site.
Handling the Form Submission with WordPress Actions
In the example above, we used the admin_url('admin-post.php')
function to set the form's action URL. This is a common way to handle form submissions in WordPress, as it allows you to use a WordPress action to process the form data.
Here's an example of how you might handle the form submission using the my_form_action
action:
add_action( 'admin_post_my_form_action', 'my_form_action_callback' );
add_action( 'admin_post_nopriv_my_form_action', 'my_form_action_callback' );
function my_form_action_callback() {
// Process the form data here
$name = sanitize_text_field( $_POST['name'] );
$email = sanitize_email( $_POST['email'] );
// Do something with the form data, like save it to the database
// Redirect the user back to the form page with a success message
$redirect_url = add_query_arg( 'message', urlencode( $_POST['message'] ), $_POST['_wp_http_referer'] );
wp_safe_redirect( $redirect_url );
exit;
}
In this example, we're using two WordPress actions: admin_post_my_form_action
and admin_post_nopriv_my_form_action
. The admin_post_
prefix is a convention used in WordPress to handle form submissions, and the nopriv_
part means that the action can be executed by non-logged-in users as well.
Inside the my_form_action_callback
function, we're processing the form data (sanitizing the input values), doing something with the data (like saving it to the database), and then redirecting the user back to the form page with the success message as a query string parameter.
When the user is redirected back to the form page, the $_POST['message']
value will be available, and we can display the success message as we did in the previous example.
Displaying the Success Message with CSS
Now that we have the success message being displayed on the form page, we can style it using CSS to make it look more visually appealing. Here's an example:
.success-message {
background-color: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
padding: 10px 20px;
margin-bottom: 20px;
border-radius: 4px;
}
This CSS will give the success message a green-ish background color, a subtle border, and some padding to make it stand out from the rest of the form. You can customize the styles to match the branding and design of your WordPress site.
Conclusion
Displaying a success message after form submission is a common requirement for WordPress websites, and it's actually quite easy to implement. By using the $_POST
superglobal and WordPress actions, you can detect when the form has been submitted and display a custom success message on the same page without reloading the entire page.
This approach is flexible, easy to implement, and can be styled to match the design of your WordPress site. Give it a try on your next project, and let me know if you have any questions!
Flowpoint.ai can help you identify all the technical errors that are impacting conversion rates on your website and directly generate recommendations to fix them.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.