How to Display An Image After Your Form

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.

create your form and add your fields

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.

The images directory inside your theme folder

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 );

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

FAQ

A: If you just want to display some text with a link, you can use this snippet.

in this example, we’re going to display a “Powered by Stripe” message with a link that will open in 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 );