The Form element in Studio enables you to add the lead generation form in the creative. The element is designed to work best on Banner, Expandable, Interstitial, and ScrollX creative formats.

To access the form element

Note: The prebuilt form comes with the most important fields and has inbuilt data validation rules to check the correctness of the form data. You can easily set up your lead generation form with the minimum of effort.

The default form contains input box, checkbox, and a button. You can additionally add drop-down and checkbox fields as well.

The submit button always resides at the bottom of the form. Using the button’s background properties, you can customize the look and feel of the button.

The default form contains the most popular form fields to save you from building the form from scratch. If you want to customize the form, you can look into the Form Style, Fields, and Outcome panels.

Form element with form properties

In case you require additional fields, you can add additional input types and dropdown to the form.

To add additional field to the form

Additional fields — Form Element

3. You can select from fields with validations such as Country, Gender, etc or add fields such as dropdown and add your own validation rules.

Note: When you add a field on top of the default form, the green selection highlight displays the form with the default form dimensions. The creative displays the form as per the dimensions on the canvas. So, you need to manually drag the selection to the bottom to make the additional fields and the submit button visible.

In the form element, based on the type of field chosen, you can modify the field properties such as the label, placeholder, validation rules, keep a checkbox selected, add hyperlink to labels, and option labels. You also get the option to set a field as mandatory.

To customize the field properties

Note: The field properties for the custom fields such as an input box, dropdown, and checkbox field are different.

Field properties of Input Box, CheckBox, and DropDown

4. On the field properties view, for the input box, perform the following actions:

3. Click Back to set up the other fields in the form.

One of the top features of the form is the ability to validate any user data. There are two types of validation which you can use on the form’s fields:

Validate against built-in constraints on input elements

The form comes with regular constraints to validate the input in the form. You can easily validate whether the input contains an email address, number, URL, or something else.

Validation constraints to validate fields

If the entered data follows or matches the required constraint for a field, it is considered valid. Otherwise, it is considered invalid.

Validate against RegEx

A regular expression (or, RegEx) is a template used to match combinations of character used in text.

Let’s try to understand RegEx with an example. Using the template, we’ll try to find a specific pattern within the text.

Suppose, you need to validate the Street Address of the user. For custom field validation, you need to provide a pattern.

The following pattern enables you to check for valid Australian phone numbers.

RegEx pattern to validate Australian phone number

Similarly, if we wish to determine a valid phone number from New Zealand, then we can use the following pattern:

RegEx pattern to validate phone number from New Zealand

To rearrange the placement of the field in the form

Note: The placement of the Submit button is fixed at the bottom of the form. You cannot reposition the Submit button.

Note: To revert the changes, you need to use the following keyboard shortcut to undo the changes:

In the form element’s form style panel you get to choose the field style, typography of the form, label and user input.

To modify the font in the form

Note: In case the selected font failed to load on the users browser, the fallback font ensures that all the required labels are displayed properly.

To add a custom font in the form

Note: The standard fonts that are supported are TrueType(.ttf), OpenType (.otf), Web Open Font Format (.woff), and Embedded OpenType (.eto).

4. Click Add.

Note: Select the fallback font to enable the creative to use an alternate font in case the selected font does not render.

Note: Field width sets the width of all four sides of the field.

To make the field edges rounded style

The radius value applies to all of the fields in the form element.

To modify the field label style

To modify the input text style

To add a title to the form

3. On the form title properties view, perform the following actions:

Customizable form submission confirmation message enables you to write understandable messages and share with your users. When the user submits the form they can get an instant feedback message on the form submission status.

Note: The form submission confirmation message appears when a user submits the filled form in the creative.

You can associate events on the form. You can respond to successful and unsuccessful form submission.

To add events on the form

4. The outcome and Action list box appears.

Note: While working with events for specific outcome, you can add separate actions for successful and unsuccessful form submissions.

Here we are adding an action for successful form submission.

5. In the Action list, click Go to Page option. The Page list appears.

Go to Page — Action list option

Note: While working with click through options, you can do the following:

6. Click Add

Access the data in form

Data provided into the form element of a live and published creative appears on the Analytics section of your dashboard.

To make your creative go live, follow the below process.

Publish the creative -> Create a placement -> Generate tag by assigning the creative to the placement

To view data in the dashboard

Note: The form inside the creative can capture user data only from live campaigns.

3. Under the Leads sub-section, the leadCount details appears.

Leads sub-section on the Analytics view

Note: To expand the Leads sub-section view, click Expand Table. The leadCount metric indicates the number of times the form was used by users.

4. Click on the form name to view the form data.

Form name as used in the creative

5. The form details appear with the date of submission appears in reverse chronological order.

We’ll set up a scenario where we use a form to generate leads from the creative.

Awareness campaign

The sample campaign utilizes the video to create curiosity.

The form is adjusted by width to fit within the creative and the Keep initial state as hidden checkbox is enabled initially.

To make the form float above the initial view, we are creating a new timeline. The new timeline helps to bring the form on the creative once the video ends.

Live Preview Link

On creative preview, after the video, tap to fill in the form details and submit the completed form to book a test drive.

Font restriction

Browser/OS limitation