How to Add a Video Before Your Form

Introduction

Interested in incorporating a video above your form? You can seamlessly implement a video message using a code snippet, whether you’re embedding the form or utilizing the Conversational Form and Form Pages addons. This tutorial will guide you through the process.

Creating the form

Let’s get started by creating your form and adding the necessary fields. If you’re unsure about the form creation process, check out this article for detailed guidance.

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( '<p><iframe src="https://www.youtube.com/embed/eiQ3viAGung" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>', 'plugin-domain' );
 
}
add_action( 'wpforms_frontend_output_before', 'wpf_dev_frontend_output_before', 10, 2 );

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

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

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.

Related

Action Reference: wpforms_frontend_output_before