How to Add a Video Before Your Form

Would you like to add 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.

create your form and add your fields

Adding the video before your form

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

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 ) {
    // Add the link of your video here within this iframe code
    _e( '<p><iframe src="" 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 );

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.

Reference Action