Form: Input Field element
The Input field is a Collect element useful to collect details that needs to be written by your visitor, such as email address, name and profession.
In this Article
Input Field Element
If collecting consent for Email or SMS communications with your form, use the Input field element to collect information. But remember to also add a Terms and Condition element or a Consent element. And a submit button!
Input field Option
Input field name
The internal name that will name the Row or Column in the Structure panel to the left.
Input mode
Keep "Input" as input mode for the field (default), or switch to "Text area" to insert a larger text field, with several rows and possibility to line break.
Validation
Select the value of the Input Field Element in the Validation drop-down. Your form can verify that the visitor fills in your input field with the data of your choice, like using only numbers for a phone number field.
Mapping to Attribute
Tick the "Map to Attribute" dropdown and select where to store the information. The value that the visitor enters will be fed into their Profile as a value for the selected Attribute.
About Dates and Validation
The accepted date formats in the Input Field Element correspond with our supported data format. Regardless of the format your visitors use, we will convert it to YYYY-MM-DD. However, have in mind that the Input field element will not accept a date with a time zone.
💡 Tip! We suggest that you choose to validate Date input fields that are mapped to date-type Attributes (like Date of Birth) and give a hint to visitors as to what format they can use to enter their date.
Label
Labels in the Forms & Pages tool are text explaining what information the visitor should fill out in the field. Labels are important for accessibility reasons. For a visitor using a screen reader, the labels guide in how to fill out the form. Ensuring high accessibility in all your marketing activities is important.
Place the label on top, under, to the right or left of the input field.
Note: About Accessibility, our Forms tool can not ensure full WCAG compliance. Align with your organisation's guidelines to ensure accessibility requirements are met.
Confirm field and Required field
Toggle "Confirm field" to create an additional input field where the visitor must enter their information once again to make sure it's correct. This is especially handy for confirming email addresses, keeping high quality of your Subscriptions.
Toggle "Required field" on if this field should be mandatory. If toggled on, visitors will not be able to submit your form without filling out this field.
Style, alignment and margins
Style
Adjust border, radius and width.
Full width: matches the width of the Row or Column.
Fixed width: select measurement in pixels.
Set colour with colour picker, click "x" next to the icon to make it transparent.
Margins (padding) - max 100 pixels.
Alignment - align the element to the left, center or right.
Clone - to copy Element, select Element in the Canvas and click Clone.
💡 Tip! The design options work interactively. To change style and margin measurements, hold on to the icon and drag left and right to increase and decrease number of pixels. The sizes will change accordingly in the Canvas!
Results: Populated Profile
Let's have a look at the result.
This is how the responses are stored in Audience when mapped as Attribute versus as Form response only.
Stored as an Attribute
Here, the Text Input element is mapped to a First Name Attribute.
Stored as Form response only
If the Text Input element instead is mapped to Form response only, the value is saved as Event data. This data is found in Profile view under Form & Page Interactions. Click the Submit activity in the timeline.
Next Step