The form widget enables you to add a form overlay to your video. Through this you can collect your audience’s name, phone number and email address. This form can be completely customized for its appearance and the information captured can be easily downloaded!
In this article we will take you through how you can add and customize forms within your videos
Adding a form overlay to your video
1. Start by creating a new video, or cloning or editing an existing video.
2. Within your video, navigate to the time frame where you’d like to add your form
3. From the right hand side panel, click on Advanced components and then click on the form widget to add it to your canvas.
4. A form overlay will appear on your video. You can drag the component to reposition it on the canvas and use the edges to resize the form.
5. From the components manager, below the canvas, adjust the start and end time frame for which you want the form to appear within the video.
Let’s take a look at how you can configure the properties and appearance of this form.
Form Properties
Once you add a form to a video, its corresponding properties will open to the right of the canvas. You can expand each property header to configure related settings. Let’s take a look at each of them:
You can adjust the width and height of the form from here, by logging their corresponding values. You can also directly drag the corners of the form, within the canvas, to resize it.
You can adjust the position of the form, by entering the respective left and top (x and y) coordinates under the position tab. You can also adjust the position by dragging the form to the desired spot on the canvas.
Under form heading, you can customize the title text of the form.
To personalize the title, you can click on Select variable from list and copy the variable you would like to use. Then simply paste the variable in your desired position within the title.
Additionally, you can also configure the font settings such as style, size, color, spacing and alignment
Under form fields, you can configure the fields to be displayed in the form. The email ID field is required and cannot be removed. However, you can switch the name and phone number fields to show or hide as per your preference.
Additionally, you can also configure the font settings for the field including style, size and alignment
Under button, you can set your desired button label as well as configure its font style, size, color and alignment
You can also adjust the button background color, by clicking the background color block and selecting the color of your choice.
Under form card, you can set the background color and opacity for the form. Simply click on the color block to select your desired color, you can drag the transparency slider to adjust the opacity.
Under the Interaction tool, you can see 2 available options - Pause and Checkpoint. Pause and checkpoint settings for an interaction determine the video behaviour before the interaction is executed.
Let’s take a closer look at each of these:
1. Pause: If you check the pause option, you will also be prompted to enter a duration for which the video should pause at the end of the component’s time frame in the video
In the case of a form widget, the pause setting will pause the video for the stipulated duration. In this duration, the viewer can complete the form and submit the response.
However, after the pause time has elapsed, the video will continue to play regardless of whether the viewer has interacted with the form.
In our demonstration below, we have set the duration to 5 seconds. Hence the video will pause for 5 seconds at the end of the timeframe of the form widget, while it waits for an action to be performed. At the end of 5 seconds, the video will resume and continue to play.
As you can see, with a short pause time, it could be difficult for a viewer to complete the form before the video continues. Hence, please keep that in mind while setting the pause duration.
2. Checkpoint: For a form added to a video, the checkpoint setting will halt the video at the end of the timeframe for the form. The video will not move forward until the form is completed and the viewer clicks on submit.
Please note: this is the default interaction option setting for a form widget
In our demonstration below, we have set the interaction to checkpoint . As you can see, the video stops at the end time of the form and the video does not continue to play until the viewer completes the form.
3. Pause with duration 0 seconds: A final scenario can be where you set the Interaction tool to pause but set the duration to 0.
In this case, the video will not pause at the end of the form’s timeframe and will continue to play regardless of the viewer’s actions.
However this kind of setting is not recommended for form widgets as it is important to allow the viewer sufficient time to complete the form.
Your form widget is ready! Ensure you click on Save Template to confirm any changes.
To learn how you can extract the information collected from the form, please have a look at the linked article. Experiment and create amazing videos for your audience!