Working with the Form Designer

The Form Designer allows you to easily add or edit the layout and items of your subscription forms. The designer consists of four main sections: the top menu, the left pane, the editing area, and the right pane.NavigateSF7.pngClick here to view the image in full size

1. Top menu

When building your subscription forms, you can switch between the different modes in the top menu and use the available options. The top menu is always visible whichever mode you are in.

The following table lists the modes and other available buttons in the top menu:

Name  Description
Edit Default mode when you open the designer. This mode allows you to edit and customize the layout and items on your subscription form.
Comments Comments mode allows you to add comments to a subscription form design and collaborate with team members.
Preview Preview mode enables you to see what your subscription form looks like on mobile devices, tablets, or desktops.
Code Code mode gives a read-only view of the HTML code of your subscription form. You can also copy the HTML code or download and upload JSON files.
History History mode opens a pane with a list of saved drafts of your subscription forms. You can select a draft and load it to revert your subscription form to that version.
close_editor.png Autosaves the current subscription form design and exits the designer.
Template Library Opens the subscription form Template Library from the designer.
Proceed to Next Step Allows you to save the design and continue with the subscription form creation process. You can also save a subscription form as a template or save a subscription form as a draft.
Help_icon.png Allows you to get help and access related Moosend articles from the knowledge base.
Draft save status Indicates when your design was last saved either automatically or manually. The designer autosaves drafts every 30 seconds.
hide_left_pane.png Hides or unhides the left pane at any time. Useful when you need to increase your workspace to edit your subscription form.
Undo_icon.png Allows you to undo changes you've made to your subscription form design.
Redo_icon.png Allows you to redo undone changes to your subscription form design.
Clear design Clears the design of your subscription form and reverts to an empty template so you can start from scratch.
Desktop_icon.png Desktop form view. This default view of the designer allows you to edit the desktop version of your subscription form.
Mobile_icon.png Mobile form view. Allows you to edit the mobile version of your subscription form, without affecting the desktop version.


2. Left pane

By default, the left pane is displayed in the Form Designer. It consists of two separate tabs for Items and Settings. You can use the left pane to edit the layout, add or remove itemsor customize the general settings of your subscription forms.

3. Editing area

The editing area is the main workspace in the Form Designer where you can edit and customize the layouts and items on your subscription forms and preview your subscription forms on different devices. You can click Zoom_out_icon.pngor Zoom_in_icon.png to zoom in or out and control how you see your design.

When you hover your mouse over an item or a layout in the editing area, a horizontal or a vertical Actions menu appears for additional options.

4. Right pane

The right pane is displayed in the Form Designer when you click an item or a layout in the editing area. This pane contains the settings you can use to customize an item or a layout.

You can close the right pane at any time by clicking close_right_pane_icon.png. You can also hover your mouse to the left edge of the pane and set the desired width by clicking and dragging the double arrow. These can be useful when you need to increase your workspace to edit your subscription form.