Creating a form is now based around the use of basic components and form fields.

To learn more about basic components, see this article πŸ‘‰ What are the components of the new design editor?

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 fields

Field settings

Style settings

Responsiveness settings (or screen size compatibility)


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

Did this answer your question?