Skip to main content
Form
Bonzai avatar
Written by Bonzai
Updated over a week ago

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

  1. Navigate to the Canvas workspace. Under the Elements menu, you can find the form element.

  2. Drag the form element on the canvas to work with the form.

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.

Configure the Form

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

Manage form fields

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

To add additional field to the form

  1. Select the form element. A green selection highlight appears on the form.

  2. Under the Fields panel, click + to select the required field.

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

  1. Select the form element. A green selection highlight appears on the form.

  2. Head over to the Fields panel under the Properties pane.

    3. Click on the required field to view and modify the field properties.

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

  • On the Input Box properties, you can add name of the field in the Label field, type of text the user needs to provide in the Placeholder field, and the validation rule in the Validate for field.

  • On the CheckBox properties, you can add name of the field in the Label field, select if the field is checked by clicking the Default Enabled option button, and add hyperlink to the label by clicking the Add hyperlink to the label option button.

  • On the DropDown properties, you can add name of the field in the Label field, type of text the user needs to provide in the Placeholder field, and add the options in the Options field.

Field properties of Input Box, CheckBox, and DropDown

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

  • Select the Set as Mandatory Field checkbox to ensure users provide the data

  • Type the label name and placeholder text, to personalize the field labels

    • Label — Identifies or determines the field

    • Placeholder — Displays text until the user types the field value

  • Select the built-in constraints or patterns to validate the data in the form field

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

Field Validation

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.

^(?:\+?(61))? ?(?:\((?=.*\)))?(0?[2-57-8])\)? ?(\d\d(?:[- ](?=\d{3})|(?!\d\d[- ]?\d[- ]))\d\d[- ]?\d[- ]?\d{3})$

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:

^\+?64\s*\d\s*\d\s*\d\s*\d\s*\d\s*\d\s*\d\s*\d\s*\d?$

RegEx pattern to validate phone number from New Zealand

To rearrange the placement of the field in the form

  1. Select the form element. A green selection highlight appears on the form.

  2. Under the Fields panel, for the required field hover over to move the required field. The mouse pointer modifies to move cursor.

    3. Now drag the field above or below the other fields.

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

To remove a field in the form

  1. Select the form element. A green selection highlight appears on the form.

  2. Under the Fields panel, for the required field, click bin. The field is removed from the form.

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

  • Press and hold the key, then press the Z key, then release. (macOS)

  • Press and hold the Ctrl key, then press the Z key, then release. (Windows)

Manage form style

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

  1. Select the form element. A green selection highlight appears on the form.

  2. Under the Form Style panel, click the Font list to select the desired font.

  3. Click the Fallback Font list to select the alternate font.

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

  1. Select the form element. A green selection highlight appears on the form.

  2. Under the Form Style panel, click the Font list and click + Add Fonts.

  3. On the Add Fonts dialog box, provide the Font Name and drop or upload the font file.

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.

To modify the field style

  1. Select the form element. A green selection highlight appears on the form.

  2. Under the Form Style panel, inside the Field Style section, select the field stroke.

  3. Click the Width box to provide the width of the field.

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

To make the field edges rounded style

  1. Select the form element. A green selection highlight appears on the form.

  2. Under the Form Style panel, inside the Field Style section, click the Radius box and add the value to set circular corners for the fields.

    Note: The value can be between 0 pixels and 16 pixels. Zero indicates that the field is not rounded.

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

To modify the field label style

  1. Select the form element. A green selection highlight appears on the form.

  2. Under the Form Style panel, in the Field Label Style section, click the Size box to select the label text size.

  3. Select the typographic emphasis for the field labels.

  4. Click the Text Fill box to select the fill color for the label and set the transparency of the text.

To modify the input text style

  1. Select the form element. A green selection highlight appears on the form.

  2. Under the Form Style panel, in the Input Text Style section, select the typographic emphasis for the field labels.

  3. Click the Text Fill box to select the fill color for input text and set the transparency of the text.

To add a title to the form

  1. Select the form element. A green selection highlight appears on the form.

  2. Under the Form Style panel, click the Add title to the form option.

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

  • Click the Form Title box to add the name of the form

  • Click the Font box to specify the typeface of the form title

  • Click the Fallback Font box to specify the alternate typeface of the form title

  • Click the Size box to select the font size of the form title.

  • Select the typographic emphasis for the form title

  • Click the Text Fill box to select the fill color for input text. You can set the transparency of the text

  • Click the form title alignment option to set the placement of the title relative to the form.

Manage form outcome

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.

To provide form submission confirmation message

  1. Select the form element. A green selection highlight appears on the form.

  2. Under the Outcome panel, type the message for successful and unsuccessful form submission.

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

  • Success Message appears on successful form submission

  • Error Message appears on unsuccessful form submission

Add events to the form

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

To add events on the form

  1. On the canvas, select the form. A green selection highlight appears on the active asset.

  2. Click . The Events pane appears.

    3. In the Event list, click Upon Submit option.

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

  1. In the Page list, select the relevant page.

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

  • To add delay to the action result, type the time (in seconds) in Delay Time box.

  • You can restrict the action result by device type. By default, all popular devices are selected.

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.

To view data in the dashboard

  1. Navigate to the Campaigns tab.

  2. For the required creative, click on

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.

See sample case

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.

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

Limitations

Design consideration

  • The space between two successive fields is preset as per our learnings on different creative formats. Manual space adjustment between the fields is not possible.

Font restriction

  • To provide the best experience for the creative, you can select the font size of the field label to be either 14px or 16px.

  • The input text style is fixed to 16px.

  • The above restriction in font size is as per our learnings

Browser/OS limitation

  • Mozilla as a browser does not scale well when the default zoom is set below 70%. So the cursor disappears from the browser when we select any field from the form. This is a rare instance.

  • On the MoPub platform for Android, when the keyboard switches off due to inactivity a visual glitch occurs.

Did this answer your question?