Creating a form is based around the use of basic components and form fields.
In this article we'll introduce you to the form fields and their settings.
To add a field, simply click on the ⨁ button. You'll then be able to access the "Form Fields" tab where you'll find all available field types.
To access a field's settings, click on the [✏️] icon. You'll then be able to modify the settings in the 3 available tabs:
Settings: field specific settings
Style: modify the field design (background color, spacing etc.)
Responsiveness: manage the compatibility of a form field with screen sizes
To make your navigation in this article easier, click on the topic area that you're interested in:
Form field
There are various field types available:
Text field
Multiline text field
Password field
Email field
Select field
Date field
Radio field
Checkbox field
Credit card field
The field type corresponds to the data that is required from the user.
Text field
This field allows the user to type in a short text (maximum 255 characters, line breaks not allowed).
Multiline text field
This field allows the user to type in a long text (maximum 1000 characters, line breaks allowed).
Password field
This field allows the user to type in a password.
By default, the characters are replaced by dots, but the user can view the characters by clicking on the [👁 ] icon at the side of the field.
Email field
This field allows the user to fill in an email.
🚨 We check that the information filled in by the user matches an email format before sending the form.
Select field
This field allows the user to select an option from a drop down list.
Date field
This field allows the user to enter a date.
🚨 We check before sending that the date entered by the user matches the format chosen in the form options.
Radio field
This component allows you to add one or more radio buttons. The reader will be able to select an option.
Checkbox field
This field allows you to add a checkbox. The reader can check or uncheck it.
Credit card field
🚨 In order to use this field, you need to have a Stripe account (Stripe is an online payment solution, click here for more info), and requires a small technical integration. Find the technical documentation here.
This field allows the user to type in a credit card number.
Stripe checks that the card number is valid before sending the form.
Field settings
Label
The label is the "title" of the field that is displayed to the user. It's important that it clearly tells the reader what they need to fill in.
Placeholder
The placeholder is a generic text that is displayed in the field before any data is inputted. It can be used, for example, to guide the user to the expected data type.
Variable name
The variable name is the name given to the object that will contain all the data collected that the development team will retrieve.
It's common to see variable names in English, in one word, without spaces or special characters. For example, for a date of birth, you can enter "birthdate".
These variable names should be communicated to/by your technical team.
🚨 A variable name is created automatically for each field, you have the possibility to change it in the "Settings" tab.
Mandatory field
This setting allows you to make a field mandatory or not. I.e. mandatory fields are obligatorily and will need to be completed in order for the form to be validated.
By default, all fields are mandatory.
👉 Available values : Yes / No
Options (for "Select field" and "Radio field" only)
This parameter allows you to define possible options for a list or for radio buttons.
The label will be visible to the user.
The value will be retrieved by the development team.
You can add as many options as you want.
The data entry
The email and date fields are checked before sending the form. For other fields, everything is provided so you can set up your own controls.
🚨 For obvious security reasons, the data collected in the forms isn't saved but sent in a Javascript event. To retrieve the data from each form, it is necessary to implement the collection technically. They aren't stored in the Dashboard and they will be lost if they haven't been retrieved by your technical team. But, good news, retrieving it is very easy!
Style settings
Inside spacing
📚 Definition
Allows you to change the spaces within the component.
For example, for a Row containing a Text, this option will allow you to manage the spaces between the borders of the Row and the borders of the Text.
You can set each space individually (top, left, bottom, right).
👉 Available values
You can set the spaces with a number, in pixels, in %, in em, in vh or vw.
Outside spaces
📚 Definition
Allows you to change the spaces around the component.
You can set each space individually (top, left, bottom, right).
👉 Available values
You can set the spaces with a number, in pixels, in %, in em, in vh or vw.
Background image
📚 Definition
Allows you to add an image to the background of a component.
To select an image, click on the [+] button.
The image must be on your computer.
⚙️ Settings
Size
Allows you to select the size of the image in relation to its container (the component.)
👉 Available values:
By default: the image will keep its original size
Fill: the image is resized, keeping its proportions, to cover the entire container
Fit: the image is resized, keeping its proportions, to cover a maximum of space within the container (in height or width). Any empty areas are filled with the background color
Position
Allows you to define the position of the image in relation to the container.
👉 Available values: Centered / Top / Bottom / Right / Left / Center top / Center bottom / Center left / Top left / Bottom left / Center right / Top right / Bottom right
Repeat
In case the image doesn't cover the entire container, this option allows you to repeat the image to cover the entire space.
👉 Available values: No repeat / Repeat horizontally / Repeat vertically / Repeat horizontally & vertically
Background Color
📚 Definition
This setting sets the component's background color.
👉 Available values
You can set a color using the color picker or by providing the color's Hex code (ex: #ff0000.)
🚨 For a button, the color will be applied to the button's container (wrapper) and not the button itself.
Additional CSS class
📚 Definition
This setting allows you to add one or several CSS classes to your component. It'll appear in the HTML of your page, next to the other component classes.
This allows you to apply custom CSS rules to your component.
👉 Available value
Fill in the class name(s) (without . in front) and separated by a blank space.
Responsiveness settings (or screen size compatibility)
🚨 The responsiveness is based on the width of the iframe in which the wall is contained. The iframe size adapts to the width of the screen (computer, cell phone, etc) but doesn't necessarily equal to it, it can be smaller.
These options allow you to accurately manage the behavior of each component for each screen size.
*of the iframe
👉 Available values: Visible / Hidden