Gather data from prospective customers by adding the forms component to your ad unit!
Resources:
Explore our Ad Gallery for examples of this component
In this article, you will learn:
How to Add the Forms component
How to modify the Build of the Form
How to Resize and Rearrange the Order of the form fields
How to edit Label naming conventions of the Form
How to modify the Style of the Form
How to to Add the Forms component
Below you will find a step-by-step process to configure the Forms component.
- Once you’ve created your ad, select Forms from the Components dropdown menu.
- You’ll now see a form placeholder on your ad canvas. Click the form to select it. By default, your form will have 3 fields – Name, Email and Message, as well as a Submit button.
- Once your form is selected on your canvas, the Form Builder properties will display in the Properties Panel on the righthand side of the builder:
How to modify the Build of the Form
Build refers to the fields in the form. You can add fields, radio buttons, check boxes, rearrange the order, and delete fields.
* Note - By default, the form will include Name, Email, and Message fields, and a Submit button.
- To change Build settings, select the form and the form builder properties will display in the Properties panel to the right. Click on the Build tab.
The Build options are explained below:
| Add Field | Make a selection to add a field, then click “Add”. The new field will be added to the bottom of the list of fields within the Forms Properties Panel. |
| Label | The label of the field that will appear on your form. Click into the Label field to edit the name of your label. |
| Name | The name of the function of the field. Click into the Name field to edit the name of the field function. |
| ✕ | Click the ✕ next to a field to delete it. |
| ☰ |
Click and drag this icon next to any field to rearrange it within the Form Properties Panel. * Note - This will not rearrange the fields on the canvas. This will rearrange the tabbing function for all fields on live preview. See below notes for how to rearrange forms on the canvas. |
| ☆ |
Next to each label in the form builder is a star icon. If selected, the star will change to red, indicating that field is required, and will place an asterisk next to it on live preview. |
| Adds an email field to the form, in which users can input their email address. | |
| Phone | Adds a phone field to the form, in which users can input their phone number. |
|
Text Box |
Adds a custom text box field to the form, in which you can choose a custom field to input information into. |
| Textarea | Adds a "message" text area field to the form, in which users can submit a message. |
| Radio Button |
Adds a Radio Button to the form. * Note - You can add a predefined set of mutually exclusive Radio Buttons by ensuring that the "Name" field for each radio button is the same. This will allow users make a selection between a set of options, where only one of which can be selected at any time. |
| Check Box | Adds a checkbox to the form. |
| Submit Button | Adds a submit button to the form. |
- To add a new field, ensure that the form is selected on your canvas and navigate to the Form Properties Panel on the right side of the builder.
- Click on the dropdown menu underneath "Add Field", make a selection, and then click the blue “Add” button:
- Your new field will appear at the bottom of your list of fields. In the below example, we've added a "Phone" field, Radio Button, and Checkbox:
- Same example on canvas, with an added Phone field, Radio button, and Checkbox:
How to Resize and Rearrange the Order of the form fields
- To resize any field in your form, click on the form on your ad canvas and select the field you would like to resize. Resize the field by dragging the square resize handles on the left or right sides of the field. (i.e. see "Name" field example below):
- To rearrange the order of the fields within your form, click on the form on your ad canvas and select the field you would like to move. With it selected, drag it to the area for placement. All fields in the form can be selected and moved.
- In the below example, we will move the "Name" field below the "Email" field.
Before:
After:
How to edit Label naming conventions of the form
- Click into the Label field to edit the name of your label.
Example, click into the “Name” field:
Rename it to “Last, First”:
- This is how it will now appear in your Form:
- Example with Radio buttons and Checkbox naming changed by clicking into Label field and editing:
How to modify the Style of the Form
Style refers to the text font, style and size, as well as the input boxes and submit button styles. You can change the shape and color of the input boxes as well as edit their order arrangement. You can also style the submit button and border.
- To change Style settings, select the form and the form builder properties will display in the Properties panel to the right. Click on the Style tab.
The Style options are explained below:
| Font | Refers to the various style options of the font for all field labels within the forms component. |
| Style | The style of your field labels - Bold, Italics, and Underline. |
| Font | The font selection for field labels. |
| Font Size | Font size of field labels. |
| Color | Click to open the color picker and select a color for field labels. |
| Input Box | Refers to the various style options for the boxes/fields within the forms component. |
| Radius |
The radius of input boxes. The higher the radius, the more rounded the box corners are. * i.e. - 0 radius = square corners |
| Border | The border size of input boxes in pixels. |
| Label Placement | Refers to the location of the different labels for each text field within the forms component - Choose Top, Left, or Inside Prompt. |
| Fill | Click to open the color picker and select a fill color for input boxes. |
| Border Color | Click to open the color picker and select a border color for input boxes. |
| Button | Refers to the various style options for the submit button. |
| Radius |
The radius of the submit button. The higher the radius the more rounded the button corners are. * i.e. - 0 radius = square corners. |
| Border | Border size of the submit button in pixels. |
| Fill | Click to open the color picker and select a fill color for the submit button. |
| Border Color | Click to open the color picker and select a border color for the submit button. |
| Text Color | Click to open the color picker and select a color for the submit button text. |
How to Configure the Form
Within the Configure tab, you can select options for form submissions and data collection.
- To change Configure settings, select the form and the form builder properties will display in the Properties panel to the right. Click on the Configure tab.
- Select the method for data collection from the Type dropdown - Email, Post HTTP, Get HTTP or Hosted.
| Type | The method to receive form submission data. |
|
Receive form submission data by email as they are submitted – one email per submission. See example below. |
|
| Email Field | If email is selected from the "Type" dropdown, input the email address of the recipient who will be receiving the form submission data. |
| Post HTTP |
Submits for data directly to an external resource. This method allows you to integrate with third-party vendors like MailChimp or Constant Contact, or send data to an online database. * Select this if the server accepting the form submission is expecting all of the form data to be in the body of the request. See example below. |
| Request URL |
If Post HTTP is selected from the "Type" dropdown, click in the input box and type in the URL for the web server that will accept the form submissions. * i.e. - http://form.com/process/ |
| Get HTTP |
Submits for data directly to an external resource. This method allows you to integrate with third-party vendors like MailChimp or Constant Contact, or send data to an online database. * Select this if the server accepting the form submission is expecting all of the data to be passed as parameters in the URL. See example below. |
| Request URL |
If Get HTTP is selected from the "Type" dropdown, click in the input box and type in the URL for the web server that will accept the form submissions. * i.e. - http://form.com/process/ |
| Hosted |
If Hosted is selected, Adventive will collect and host form submission data if you select "Hosted" as your configuration type. See example below. |
| Hidden Fields [Add Field] | Hidden fields are similar to text fields, but are not displayed to the user. Hidden fields are used to submit information that is not entered by the visitor. A hidden field might be used to identify the form source or the ad or campaign name. |
| Name | If a Hidden Field is added, input the name of the label for the hidden field here. |
| Value | If a Hidden Field is added, input the text identifier for the hidden field here. |
| Confirmation [Add Screen] | From the dropdown, select the screen of the ad to display after the user has submitted the form. If you only have 1 screen you can click [Add Screen] here to quickly add another. The screen with then be added to the Screens & Layers panel. |
- Receive form submission data by email as they are submitted – one email per submission.
Example of form submission email received:
Post and Get HTTP
- GET and POST HTTP are two different types of HTTP requests. The servers that are accepting the form submission information are typically expecting one of these methods and all other methods will be ignored. Users should consult with their technical teams to determine which method is appropriate.
Post HTTP:
- Post HTTP submits form data directly to an external resource. This method allows you to integrate with third-party vendors like MailChimp or Constant Contact, or send data to an online database.
- If the server accepting the form submission is expecting all of the form data to be in the body of the request, then POST HTTP should be selected.
BELOW IS AN EXAMPLE (urls/fields/request will differ):
In the builder:
- Select Post HTTP
- Request URL = http://form.com/process/
- Add a form field named first_name
- Add a form field named last_name
When the form is submitted, the a POST request will be sent to:
the following data will be sent in the body of the request:
first_name=Bob&last_name=Smith
- Post URL: click in the input box and type in the url for the web server that will accept the form submissions
Get HTTP:
- Get HTTP submits form data directly to an external resource. This method allows you to integrate with third-party vendors like MailChimp or Constant Contact, or send data to an online database.
- If the server accepting the form submission is expecting all of the data to be passed as parameters in the URL, then GET HTTP should be selected.
BELOW IS AN EXAMPLE (urls/fields/request will differ):
In the builder:
- Select Get HTTP
- Request URL = http://form.com/process/
- Add a form field named first_name
- Add a form field named last_name
When the form is submitted, the a GET request will be made to:
http://form.com/process/?first_name=Bob&last_name=Smith
Hosted:
- Adventive will collect and host form submission data if you select "Hosted" as your configuration type.
- To download a CSV file containing all data captured from the form component, navigate to Analytics at the top of the dashboard, then select the campaign containing your ad with form.
- Open the Engagements report and select Data Capture from the dropdown menu - you will see a "Download Form Data" button to the far right - click on this to download (screenshot below):
Hidden Fields [Add Field]:
- Hidden fields are similar to text fields, but are not displayed to the user. Hidden fields are used to submit information that is not entered by the visitor. A hidden field might be used to identify the form source or the ad/campaign name.
- For example, if you wanted to add the name of the campaign that the ad with the form was from, you’d click [Add Field] to add a hidden field and enter the campaign name (i.e. - "Spring Launch", for example).
- Hidden Fields [Add Field]: Adds a new hidden field
- Name: The name of label for the hidden field.
- Value: The text identifier for the hidden field.
- So for the campaign name example, you’d enter "Campaign" as the Name, and "Spring Launch" as the value:
Confirmation [Add Screen]:
- From the dropdown menu, select the screen of the ad that will display after the user has submitted the form.
- If you only have 1 screen, you can click [Add Screen] to quickly add another.
- The new screen with then be added to the Screens & Layers panel:
Save the ad.
Go to the Preview icon 
to view the ad.