How to Display An Image After Your Form

Overview

Would you like to display an image after your form? With a small PHP snippet, you can easily add your image to your form. This tutorial will walk you through the code needed to achieve this!

Setup

This code snippet can be used to add anything below your form. You can add an image, a video or just text. To accomplish this, copy and paste this code snippet to your site.

In our example, we’re targetting this snippet to only the form ID 999.

/**
 * 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 called images inside your theme folder.

The images directory inside your theme folder

Your image now appears after your form

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.

Action Reference: wpforms_frontend_output_after