All Collections
Forms
How do I create a form and use it in a scenario?
How do I create a form and use it in a scenario?

Create a form and use it in a scenario thanks to the "Form" widget

Alexandre Santini avatar
Written by Alexandre Santini
Updated over a week ago

There are two steps to use a form in a scenario:

  1. Create a form

  2. Set up a "Form" widget in a scenario

With the release of our new Dashboard, the way to create a form has changed! Indeed, you will now build your forms with components, like Lego bricks.

Before starting, we suggest you read the articles What's up with the new design editor? and What are the components of the new design editor? in order to become familiar with the concept of " building with blocks" and the components available. Indeed, even if the "Advanced Appearance" functionality is only accessible in the Enterprise plan, the form creation is based on the same principles.

Create a form

Go to the "Forms" section in the Dashboard menu.

Click on the [Create a form] button on the right.

This will take you to the form builder page.

Name your form

Enter the name of your form in the field at the top.

This is the name you will find in the list of forms to be added to your scenario.

Starting from a template

We provide you with a form template, available by clicking on [Use a template].

It is a classic account creation form.

In the preview on the right, you can select an appearance.

To use the template, click on [Apply]

🚨 If you had previously started a form in the builder space, this action will overwrite all elements.

This will return you to the builder space where you can fully customize this template by adding, modifying or deleting any component/field.

Start from 0

If the template provided does not suit you or if you feel creative, you can start from 0 by clicking on the ⨁ button in the builder space.

The components and fields panel will allow you to add the elements of your choice.

All components and fields come with settings that allow you to customize them.

To access the component or field settings, click on [✏️].

Basic components

We provide you with 6 basic components:

  • Row

  • Title

  • Text

  • Image

  • Button

Find all the information about basic components and their options in our article 👉 What are the components of the new design editor?

Form fields

We provide you with 9 types of fields:

  • Text field

  • Multi-line text field

  • Password field

  • Email field

  • Drop down list

  • Date field

  • Radio buttons

  • Check box

  • Credit card field

Find all the information about form fields and their settings in our article 👉 What form fields are available?

In the "Settings" tab of each field, you can set the label, placeholder and variable name.

🚨 A variable name is automatically created for each field, you can change it in the "Settings" tab.

Use the preview

To see what your form will look like when displayed to your readers, click on [Preview].

You can adapt the preview to computer [💻] or phone [📱] format by clicking on the corresponding icons.

You can also change the appearance used by clicking on the drop-down list at the top right.

Form Settings.

In a second step, you can choose some options for your form.

Opt-in display

Allows you to select whether or not to display the opt-in in your form.

Dashboard setup:

Reader view "Explicitly ask for user consent":

Reader view "Do not ask for user consent":

🚨 Depending on the data you are collecting and the purpose, the opt-in may be implicit as the action of submitting the form may be considered as consent to collect data.

Date format

Allows you to set the date format.


For example, if you use a "Date" type field, this will be the expected format to validate what will be filled in by the reader.

By default, the format is dd/mm/yyyy.

Once your form is finished, click on the [Create] button.

Example

We have created a form with 1 row, divided into 2 columns. Inside, we used 4 fields. We then used a basic appearance.

Dashboard view

Reader view

About the data entry

The email and date fields are checked before sending the form. For the others, everything is provided so you can set up your own controls.

🚨 For obvious security reasons, the data collected in the forms is not saved but sent in a Javascript event. To retrieve the data from each form, it is necessary to implement the collection technically. They are not stored in the Dashboard and they will be lost if they have not been retrieved by your technical team. But good news, retrieving it is very easy!

Add the form to a scenario

Go to the "Scenarios" section and access the scenario where you want to integrate the form.

If you haven't already, add a block with a Form widget.

Click [⠇] on the Form widget to access the edit screen.

As with any action, you can fill in the widget's name, its alternative and configure its settings: login button or no, group toggle, texts...

Choose in the list the form you want to display. Here, "Account creation".

Click [Continue] to keep these changes and return to the scenario.

Don't forget to save your scenario changes by clicking [Create] or [Update] at the bottom of the page.

Your Form widget is now created and inserted in your scenario.

Your readers will be able to see it, fill it in and thanks to this action, unlock the article they are on. To retrieve the data, you need to perform some technical implementations explained in this article!

About data collection

🚨 Don't forget to fill in your "RGPD" texts for the Form widget. To do this, you can go to the "Messages" section of your Dashboard to set the default texts for this widget (they will be applied to all Form widgets).

But you can also configure specific texts for each Form widget, according to the uses of the collected data, in the advanced text settings.

Check out our video tutorial:

If you have any questions, don't hesitate to contact us via the Intercom chat!

Did this answer your question?