This article will walk you through adding a form to your ad unit. The Forms Component can be added to any type of Format.
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 to select. By default, your form will have 3 fields – Name, Email and Message as well as a Submit button.
To build, style and configure your form, click to select. The Form Builder properties will display in the Properties panel to the right.
Build
Build refers to the fields in the form. You can add fields, radio buttons, check boxes, rearrange the order, and delete.
Add Field dropdown menu – make a selection to add a field, then click “Add”:
- Email: Adds an email field to the form
- Phone: Adds a phone field to the form
- Text Box: Adds a text box field to the form
- Textarea: Adds a text area field to the form
- Radio Button: Adds a RadioButton to the form
- Check Box: Adds a checkbox to the form
Example of Radio button/Check box upon preview if viewer selects or checks:
- Submit Button: Adds a submit button to the form
Example with added Fields/Radio button and Checkbox:
How to rearrange the order of fields:
In this example, we added two additional fields - phone and text box - which will show in the form (at the bottom):
Click in 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.
How to resize fields:
Select the field in the form and resize by dragging.
Example of added fields, rearrangement and resizing:
All fields you’ve added will show in the form properties to the right:
How to edit Label naming conventions:
Click into the Label field to edit the name of your label. Example, click into the “Name” field:
Rename it “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:
Setting a field as “required”:
Next to each label in the form builder is a star icon. Click on the star icon next to the label. The star will change to blue indicating that field is required with an asterisk placed. Example below has star selected for name and email fields:
This is how it will appear in the Form:
To delete a field, click the X next to the field in the form builder:
Style
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.
Font
- Style: The style of your labels - Bold, Italics, Underline
- Font: The font selection for labels
- Font Size: Font size of labels
- Color: Click to open the color picker and select a color for labels
Input Box
- Radius: The radius of input boxes. The higher the radius the more rounded the box corners are. 0 radius = square corners
Example with radius of 0px:
Example with radius of 40 px:
- Border: border size of input boxes in pixels
- Label Placement: where labels will be positioned - Left, Top, or Inside Prompt
- Left: if selected, will put the label name to the left with the input box to the right of the name:
- Top:
- 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
- Radius: The radius of the submit button. The higher the radius the more rounded the button corners are. 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 button text
Example:
Configure
Click the Configure tab to select options for form submissions and data collection.
Select the method for data collection from the Type dropdown - Email, Post HTTP, Get HTTP or Hosted.
Email: Receive form submission data by email as they are submitted – one email per submission.
- Email: enter the email address where form submissions will be sent
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: 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.
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:
If the server accepting the form submission is expecting all of the data to be passed as parameters in the URL, the 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, 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 or campaign name.
For example, if you wanted to add the name of the campaign the ad with the form was from you’d click [Add Field] to add a hidden field and enter the campaign name (Spring Launch).
- Hidden Fields [Add Field]: Adds a new hidden field
- Name/Value: Name is the label, value is the text identifier. So for the campaign name example, you’d enter Campaign as the label and Spring Launch as the value.
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] to quickly add another.
Save the ad.
Go to the Preview icon 
to view the ad.