This guide explains how to set the width that a field will occupy within the form, allowing you to optimize the layout for different screens (Desktop, Tablet, and Mobile).
A field with a width of 100% will take up the entire row, while a field at 50% will allow two fields to be placed side by side on the same row.
Procedure for Defining Field Width
1. Access the Field Settings:
Within the Fields section of your form, open the settings of the field you want to modify.
2. Locate the Field Width:
Scroll through the field settings until you find the option labeled:
- Larghezza campo
3. Select the Responsive Size:
Click on the dropdown menu Larghezza campo. This menu is divided into groups by device type: Desktop, Tablet, and Mobile.
4. Set the Width per Device:
For each device group, select the desired width percentage. You can choose a different width for each screen type:
| Device | Option | Description |
|---|---|---|
| Desktop | 100% | The field occupies the entire row (1/1). |
| Desktop | 50% | The field occupies half of the row (1/2). |
| Desktop | 33% | The field occupies one third of the row (1/3). |
| Desktop | 66% | The field occupies two thirds of the row (2/3). |
| Desktop | 25% | The field occupies one quarter of the row (1/4). |
| Tablet | same options | Width applied on medium-sized screens. |
| Mobile | same options | Width applied on small screens (smartphones). |
Note: If you do not specify a width for a device, the default width will be applied (usually 100%).
5. Save Changes:
After setting the desired widths for all devices, make sure to save changes to both the field and the entire form.
Setting Width for the Submit Button
It is also possible to define the width for the submit button (Submit):
1. Access General Section:
In the Form editing module, go to step Generali and scroll down to the section Pulsante di invio.
2. Find the Setting:
Locate the option labeled:
- Larghezza campo
3. Select Size:
Use the dropdown menu to select button width for Desktop, Tablet, and Mobile (for example, 1/1 for 100%, 1/2 for 50%, etc.).
4. Save Form:
Save the entire form to apply the new width to the button.
