Once you have created your new widget in the Widget Studio, it is time to add elements to it to build your form.
Form elements available
Click on the left menu to add an element.
Scroll down to find the Form section. Several types of elements are available. You can mix and match to create personalized and interactive forms.
- Button
A button whose characteristics you can edit: text, size, color, border…
- Input
A fully customizable text input, to collect any kind of string data from your visitors: email, name, URL…
- Date
A field to request a date from your visitor. On click, it will open a date picker panel.
- Time
A field to indicate a time from your visitor. On click, it will open a time picker panel.
- Toggle
A toggle to which you can add a legend, i.e. a text indicating the two possible states of the toggle (for example YES and NO).
- Checkbox
A checkbox to which you can add a Text element.
- RadioButton
A radio button to which you can add a Text element.
- Select
A fully customizable dropdown where you have to fill in the different selectable options.
- Textarea
A fully customizable text box containing a placeholder.
- Range input
A fully editable slider control allowing visitors to select a value within a specific range.
- Hidden input
An invisible form field used to store meta data submitted with the form, but not displayed to the user.
- FormErrorMessage
A text field allowing you to display a specific message in case of error on the form (error in one of the filled fields or error when sending the form). We will see in another article {link} how to use this field.
Note: Start by adding all the elements on the Desktop view which is the default configuration. Then you can adapt your design to another device if needed (mobile/tablet). Changes made to another device remain specific to that device and will not impact the others.
Design your form
When one of the elements that make up your widget is selected, two tabs appear at the top of the editing menu: General and States.
General tab
Select this tab to edit the properties of your element. Here you will find all the core properties of your element (i.e. that are not specific to a particular state, such as hover) that apply to this element.
Depending on the type of element, different characteristics can be modified: position, settings specific to the element, padding, animation…
Use case
To continue with the example of the newsletter registration form, we can start from one of the Newsletter templates available in the Widget Studio. We will personalize this base by adding two interdependent dropdowns and a toggle.
We click on the Add an element menu and choose the Select type in the section dedicated to forms.
You can choose its initial state, i.e. the state in which the element will first be displayed (Enabled/Disabled).
You can also edit the placeholder to tell your visitors what we expect from them.
Click on Add option to add an option in the list. In this case, we indicate in the first dropdown : Latest products / Blog updates.
When the Latest products option has been selected by the visitor, we want to show a second dropdown under the first one, again offering several options. Our objective is to send a relevant newsletter suited to the interests of each user.
To do this, we add a new Select element and edit it according to our preferences.
In the left menu, we hide this second dropdown by default. We will then have to configure an event to make it appear.
Then we want to add a toggle to ask each visitor to accept the Terms & conditions before sending the form. We add a Toggle element, which will also be fully customizable.
Finally, we add an element of type Button, whose text we modify.
By default, the button already has a different design on mouse over.
It will then be necessary to configure the verification of the information and the sending of the data.
Note: You can also set rules for an element: is this a mandatory field? should we check the content of the field before validating it?
States tab
Select this tab to find additional properties that allow you to fully edit the style of each state of this element (Hover, Active, Disabled…).
For example, you can personalize the hover appearance of an element, or the color of a toggle depending on its state.
For each state of your element, default design settings are already applied, but you can fully edit them.
For example, the Select element can get 4 different states (default / hover / disabled / invalid) and a predefined design is already set for each of them. In the same way, the design of toggle element is already preset to become green when it switches to the ON state.
All these parameters are editable to allow you to create widgets that perfectly match your graphic charter and specific needs. The states available for edition depend on the selected element, and the editable properties for each state are specific to each element.
When the States tab is selected, if you click on the General tab, the preview of your widget will automatically switch to its default state. Depending on the form element you are editing, you can choose the default state of the element on the General tab. Example: for a toggle, you can set the default display to either ON or OFF.
