How to Add a Video Before Your Form

Introduction

Would you like to add a video above your form? You can use a code snippet to easily apply a video message above the form when embedding it or even when using Conversational Form and Form Pages Addons. In this tutorial, we will walk you through the steps on how to achieve this.

Creating the form

To begin, just create your form and add your fields. If you need any help in creating your form, please review this article for more information.

Adding the snippet

Once you’ve created your form, you just need to add this code snippet to your site. If you need any help with how and where to add snippets to your site, please review this tutorial.

/**
 * Output something before your form(s).
 * 
 * @link  https://wpforms.com/developers/how-to-add-a-video-before-your-form/
 */

function wpf_dev_frontend_output_before( $form_data, $form ) {
     
    // Optional, you can limit to specific forms. Below, we restrict output to
    // form #999.
    if ( absint( $form_data[ 'id' ] ) !== 999 ) {
        return;
    } 
 
    // Add the link of your video here within this iframe code
    _e( '<iframe src="https://www.youtube.com/embed/eiQ3viAGung" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>', 'plugin-domain' );
 
}
add_action( 'wpforms_frontend_output_before', 'wpf_dev_frontend_output_before', 10, 2 );

The snippet above will only run on the form ID 999, by removing this section of the snippet, the video will display on all forms. Be sure to update this form ID number to match your own ID number. If you need help in finding your form ID, please check out this documentation.

Adding the CSS (optional)

If you’d like to ensure that your iframe is at full width of the container it’s being placed in, you’ll need to add a little custom CSS to your site.

Please follow this tutorial for further information on where to add custom CSS to your site.

iframe {
    width: 100%;
    min-height: 400px;
}

Your video now shows before your form

As well as showing the video when viewing the Form Pages link or the Conversational Form pages link.

Your video now shows before your form when using Form Pages

And that’s it! You’ve now successfully added a video to your form. Would you like to also change the browser tab title? Check out our tutorial on How to Change the Page Title on the Browser Tab.

Action Reference: wpforms_frontend_output_before