How to Add a Video Before Your Form

Overview

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. This tutorial will walk you through the steps on how to achieve this.

Setup

1) Adding the PHP

First, you’ll need to copy this code snippet to your site.

/**
 * 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;
    } 
 
    _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 );

2) Adding the CSS

Next, you can add this CSS to your site to style the iframe.

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