Forms: Settings

Preview, Validation, Hidden values

Räftegård, Elin avatar
Written by Räftegård, Elin
Updated over a week ago

Forms: Settings

When having created a Form, check the Settings in the bottom bar.


In this Article


Form

In Form Settings you can adjust the working name and the page title of your activity. Under Page title, enter a title for the page where the Form or Page is hosted. This text will be shown in the browser where visitors open your activity.


Design

Adjust your Form width. Maximum width is 1500px.

Set Body colour with hex code, RGB or colour picker.

To make the body colour transparent, click the X icon next to the colour code. The preview will be a white circle crossed with a red line.

Set background colour and upload a background image if you prefer.

When uploading an image, select from the dropdown menu how the image should be displayed and enter an Alt text.

Tile

Standard setting, works everywhere where background image is supported. The image will be repeated both in x and y direction.

Fill

Fills up background, rescales image; keeps dimensions and crops the image.

Fit

Shows the whole background image 1 time, rescales image, but will not crop it.

Stretch

Fills up the background, rescales image, stretches it out instead of cropping it.


Adjust border width and radius (roundness of corners).

Set border colour with hex code, RGB or with the colour picker.


Validation

Here you choose how the Form will look and behave if the visitor doesn't complete a field, or enters information in an incorrect format (letters in a phone number, for example).

Tick the Highlight missed field checkbox to change the colour of the input field that the visitor missed.

Adjust Highlight colour with hex code, RGB or the colour picker.

Enter a Missed field message you wish to display under the input field if the visitor doesn't fill it out before submitting your form.

Note that this error message will only come up if you set it up as required, or in the event of the confirmation field not matching the original.

Enter a Wrong format message you wish to display if the visitor enters information that doesn't match the format of your input field.

Toggle the Preview error messages to see in the Forms editor how it looks like when visitors don't fill out your form correctly.

To test messages, click on the Input Field Element and write an incorrect response directly in the editor. For example, letters in a number type.

bottomBar13.jpg

Note: Error message and styling will only come up if you set up the input field as required, or in the event of the confirmation field not matching the original.


Hidden values

Add data automatically to your Profiles with hidden values.

Hidden values allows you to populate the Profiles who fill in your Form, with Attributes, Tags, or Events. The values will be the same for each visitor that completes the Form.

This way you can enrich Profiles with certain data, depending on which Form they fill in.


Three types of hidden values

Profile Attribute

Set the value of an Attribute for all visitors who complete your form.
For example, this is useful if your campaigns are targeted in certain countries: set the Country Attribute value to Sweden for your Form for Swedish visitors. Each visitor who fills in the Form will have a Country Attribute with Sweden as a value!

Profile Tags

Use a Profile Tag to differentiate those who opt-in via your Form.

Event Property

Add a custom field in the Event data of the Form - Submit Event. Use this to further personalise the way you collect and act upon Event data.

💡Tip! You can add more details to the Event data and later target Profiles with Segmentation, without adding any unnecessary Attributes or Tags to Profiles. This might come in handy when testing which Form performs better, or during a seasonal offer.


Preview

Preview your Forms under the Preview tab. Switch between Mobile and Desktop to see how it will look in different devices.

Next step is to decide action when someone submits the Form. Shall they see a message or be directed to a Landing page?


Next Step

Did this answer your question?