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 make your navigation in this article easier, click on the topic area that you're interested in:

Form fields

Field settings

Style settings

Responsiveness settings (or screen size compatibility)

There are various field types available:

The field type corresponds to the data that is required from the user.

This field allows the user to type in a short text (maximum 255 characters, line breaks not allowed).

This field allows the user to type in a long text (maximum 1000 characters, line breaks allowed).

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.

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.

This field allows the user to select an option from a drop down list.

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.

This component allows you to add one or more radio buttons. The reader will be able to select an option.

This field allows you to add a checkbox. The reader can check or uncheck it.

🚨 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.

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.

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.

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.

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 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!

📚 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.

📚 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.

📚 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:

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

📚 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.

📚 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.

🚨 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