Introduction
Would you like to display an image after your form? With a small PHP snippet, you can easily add your image, a video, or a message just under the Submit button. In this tutorial, we’re going to walk you through the steps on how to achieve this.
Creating the form
First, you’ll need to create your form and add your fields. If you need any help in creating your form, please see this documentation.
Adding the snippet
This code snippet can be used to add anything below your form. You can add an image, a video, or just text. In order to add our image after the Submit button, you’ll need to copy and paste this snippet to your site.
If you need help in adding snippets to your site, please review this tutorial.
In our example, we’re targetting this snippet to only the form ID 999. If you’re not sure what your form ID is and need some help in finding it, please check out this tutorial.
/**
* Output something after your form(s).
*
* @link https://wpforms.com/developers/how-to-display-an-image-after-your-form/
*/
function wpf_dev_frontend_output_after( $form_data, $form ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Run code or see example echo statement below.
echo '<img src="'.get_template_directory_uri().'/images/secured-site.jpg" alt="Verified by Visa" width="80" height="80">';
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after', 10, 2 );
The code above src="'.get_template_directory_uri().'/images/ looks for a directory (a folder) on your server called images inside your theme directory.
Alternatively, you could just add your image to the form by calling up any image URL. Your snippet would then look something like this.
/**
* Output something after your form(s).
*
* @link https://wpforms.com/developers/how-to-display-an-image-after-your-form/
*/
function wpf_dev_frontend_output_after( $form_data, $form ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Run code or see example echo statement below.
echo '<img src="http://myexamplesite.com/wp-content/uploads/2021/01/image-name.jpg " alt="Verified by Visa" width="80" height="80">';
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after', 10, 2 );
And that’s it! You’ve successfully added an image after your form. Would you like to change the pre-loading image that shows when you click submit? Take a look at our article on How to Change the Pre-Loader Icon on Submit.
Related
Action Reference: wpforms_frontend_output_after
FAQ
Q: How can I display text with a link after the form?
A: If you just want to display some text with a link, you can use this snippet.
In this example, we will display a “Powered by Stripe” message with a link that will open a new window to Stripe.
/**
* Output Text after your form(s).
*
* @link https://wpforms.com/developers/wpforms_frontend_output_after/
*/
function wpf_dev_frontend_output_after_display_text( $form_data, $form ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Run code or see example echo statement below.
echo _e( '<p> Powered by <strong> <a href="https://stripe.com/" target="_blank">Stripe</a> </strong> | <a href="link-to-terms" target="_blank">Terms and Privacy!</a>.', 'plugin-domain' );
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after_display_text', 10, 2 );