### [Displaying An Image After Your Form](https://wpforms.com/developers/how-to-display-an-image-after-your-form/)

**Published:** June 11, 2020
**Author:** David Ozokoye

**Excerpt:** This tutorial will walk you through the steps on how to display an image after your form. 

**Content:**

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 a new form](https://wpforms.com/docs/creating-first-form/) or edit an existing one to access the form builder. In the form builder, go ahead and add the fields you need to the form.

![create your form and add your fields](https://wpforms.com/wp-content/uploads/2020/06/wpforms-create-form-image-after-form.jpg)## 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.](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms")

In our example, we’re limiting this snippet to only the form ID **999**. You’ll need to replace this ID with the ID of the form you wish to target. If you’re not sure what your form ID is and need some help in finding it, [please check out this tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "How to Locate Form ID and Field ID").

```

/**
 * 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 '';
  
}
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. So the image needs to be in the images folder on your server.

![The images directory inside your theme folder](https://wpforms.com/wp-content/uploads/2020/06/wpforms-adding-image.jpg)Alternatively, you can simply upload an image to your site media library and update the value after src= with the image URL. Here’s how the updated snippet will look if you use an image from the WordPress media library.

```

/**
 * 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 '';
 
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after', 10, 2 );
```

![Your image now appears after your form](https://wpforms.com/wp-content/uploads/2020/06/wpforms-image-after-form.jpg)## Frequently Asked Questions

These are answers to some of the top questions we see about adding images after the submit button in WPForms.

#### 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( ' Powered by  Stripe  | Terms and Privacy!.', 'plugin-domain' );
  
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after_display_text', 10, 2 );
```

That’s it! You’ve successfully added an image after your form.

Next, 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](https://wpforms.com/developers/how-to-change-the-pre-loader-icon-on-submit/ "How to Change the Pre-Loader Icon on Submit").

## Related

Action Reference: [wpforms\_frontend\_output\_after](https://wpforms.com/developers/wpforms_frontend_output_after/ "Using the wpforms_frontend_output_after with WPForms")

**Categories:** Tutorials

**Tags:** PHP

---