Work with form layouts
When you are designing a form in the editor, you usually start by designing an overall structure, which might consist of multiple layouts. You do this by dragging and dropping different layouts into the editing area and dividing the blank workspace into different rows. Each row can have different slots where you can add items to build your design.
Add a layout
You can add multiple predefined layouts to your design, depending on the type of form you want to create. You can add different layouts on each page.
To add a layout:
-
In the left pane of the editor, click the Layouts tab.
-
Drag a layout into the editing area. You can select and combine these types of layouts:
-
Full Width Layout - a vertical slot that extends to the complete width of your design.
-
Half Width Layout - a row divided into two equally sized vertical slots.
-
1/3 - 2/3 Layout - a row divided into two vertical slots, with the first having half the width of the second.
-
2/3 - 1/3 Layout - a row divided into two vertical slots, with the first having twice the width of the second.
-
3 X 1/3 Layout - a row divided into three equally sized vertical slots.
-
4 X 1/4 Layout - a row divided into four equally sized vertical slots.
Repeat the process to add more layouts.
-
Move, duplicate, or remove a layout
You can move your layout to rearrange the sequence of rows in your design.
To save time designing, you can duplicate a layout. The duplicated layout is inserted as a new row below the original.
You can also save a custom layout for reuse. After you have named and saved it, you can access this layout on the Layouts tab.
To move, duplicate, or remove a layout, or to save a custom layout:
-
In the editing area, hover your mouse over a layout to display the Actions menu:
-
In the Actions menu:
-
To move the layout to a different row in the editing area, click Move
and drag the layout to another row. -
To create a copy of the layout including its items and settings, click Duplicate
. -
To delete the layout from your design, click Remove
. -
To save a layout design for future use, click Save custom layout
.
-
Edit the settings of a layout
To edit the layout settings:
-
In the editing area, hover your mouse over a layout to display the Actions menu and click Settings
. -
In the Layout settings pane on the right, you can set the following:
-
Padding - click
to display the padding options and enter a padding from 0 to 2000. -
Layout Color - select the layout's color. The default color is transparent.
-
Border Width - enter a number (or click
) to edit the layout border's width. -
Border Radius - enter a number (or click
) to edit the border's radius from 0 (rectangle) to 2000 (circle). -
Layout Border Color - select the layout's border color.
-
Add Content Background Image - click to open the image picker and select and upload a content background image. The selected image is applied within your layout's width.
-
Change Background Image - click to select a new background image and replace the current one.
-
Remove Background Image - click to delete the current background image.
-
To change the settings of the layout slots, click the Slot drop-down menu. You can set the background color, vertical alignment, and border radius.
-