Create and style your Form's content using our simple WYSIWYG editor in the Design tab of the Forms composer. Add, edit, and delete Form sections and blocks to design dynamic, user-friendly Forms quickly and easily.

Getting Started

Before you begin designing your Form, make sure to complete these steps:

Create your Form

Visit our Forms Composer User Guide for instructions on creating a new Form from scratch. You can also customize existing Form templates from our Content Catalog. Creating a new Form will automatically direct you to the Forms Composer. You can also find your Form under Content > Forms, then click Edit to open it in the Forms Composer.

Set your Form's Properties

Before you can start designing your Form, you'll need to add a Title, select a Form Submissions List, and set up a Response Page in the Properties tab of the Forms Composer. Visit our Form Properties Guide to learn more.

Instructions

Once you've set Form Properties, go to the Design tab to begin designing the content of your Form. Here, you'll learn how to add Sections to structure your Form and Blocks for various types of content, including input fields, images, and submit buttons.

You can also use the Design tab to set layout and styling properties, map Form submission list columns to your input fields, set Form conditions, or apply custom CSS. These are configured in the Settings panel. To learn more about these settings, visit the Form Settings Guide.

Sections

Sections control the layout of your Form. You'll need to drag content blocks into Form sections when building your Form in the WYSIWYG editor. You can drag multiple sections into your Form to separate and categorize content or customize sections by adding columns. This is key for creating responsive Form designs.

Add a section

In the Design tab, click and drag a New Section from the left-hand Section panel into the center editor.

Screen_Shot_2022-05-23_at_12.00.10_PM.png Screen_Shot_2022-05-23_at_3.51.03_PM.png

Add a section column

Hover over your section and click Add Column in the right-hand section options. You can add up to 12 columns within one section.

Screen_Shot_2022-05-23_at_3.56.21_PM.png

Move a section

You can also move your section to a new location within your Form. To do this, click and hold Move Section, then drag it to the desired spot.

Screen_Shot_2022-05-23_at_4.00.51_PM.png

Edit or delete a section

You can edit the background color, opacity, padding, and margins of your entire section or a section column. To do this:

Hover over the section you'd like to edit
Click Column Settings at the top of the section to edit a section column
Click Section Settings at the right of the section to edit settings for the entire section

Screen_Shot_2022-05-23_at_12.51.22_PM.png Screen_Shot_2022-05-23_at_12.03.23_PM.png

An Edit Section Settings or Edit Column Settings panel will appear (depending on which of the above settings you've selected). Make any desired changes here. To delete your Form section, click Delete Row at the top right of the Edit Section Settings panel.

Screen_Shot_2022-05-23_at_4.04.32_PM.png

Blocks

The following blocks are available for you to build and customize content for your Act-On Form. Read below for more detailed information on each type of content block.

Block Type	Description
Rich Text	The Rich Text Block is the most versatile block in the Form Composer. You can input basic text, insert images, link to Act-On content, create tables, and much more in a single Rich Text Block.
Image	Add images to your Form. You can pull images from your Act-On Image Library or upload new images.
Text Box	Use the Text Box block to create basic Form input fields. Configure your text by following these steps: Enter a Label and any Placeholder text If you'd like this field to be a Password Field, toggle the switch under Settings to the right Provide a Field Name and its matching Column Name under Field Mapping Make sure the field and column names are consistent with the list schema you've set up for lists across your Act-On marketing activities Click the Validation tab to add validation rules to your input field Click the asterisk to make your field Required – this will require users to fill out this field before they can submit your Form
Hidden Field	Hidden Fields can be used to pass data behind the scenes of the Form, such as from a static Field Value or when capturing data from a UTM string. Read more about using UTM strings with Hidden Fields here.
Paragraph	Use Paragraph Text Blocks to allow Form visitors to submit responses in paragraph format. When creating and editing this field, you'll find the same Design and Validation options for labeling and mapping as the Text Box block.
Combo Box	The Combo Box allows you to create multiple-choice questions for your Form. Combo fields can be labeled and mapped in the same way as basic Text Box blocks. The difference is that you now have the option to create a list of potential responses in one input field. Choose from three variations: Drop-Down List allows a single selection from a dropdown menu of options. Radio Buttons allow a single selection from a list of options. Checkboxes allow for multiple selections from a list of options. Can be set as preselected. Enter the Labels & Values for the combo box options. Alternatively, you can upload a CSV file containing the labels & values instead of typing them individually. Click on the upload button in the top left of the sidebar:
Captcha	Use the Captcha field to help deter spam bots. Read more about preventing spam bot Form submissions here.
Date	Use the Date Block to capture date entries. A variety of date formats and layouts are available.
Submit Button	The Submit Button is required on all Forms and allows you to customize the button the user will click to submit your Form. Align the button to the left, right, or center, and move the button between content blocks to position it in the location you choose.
Saved Fragment	Drag one of your existing Content Fragments into your Form. You can save your Form's content blocks or fields as a Saved Fragment to reuse it at any time across all your Act-On Forms. To save a content block as a Saved Fragment: Click on the content block you'd like to save as a fragment In the editing panel, click Save Fragment in the top-left corner Give your content fragment a Fragment Name and select a Folder to store it Click Save

Block Type

Description

Rich Text

Screen_Shot_2022-05-23_at_12.06.07_PM.png

The Rich Text Block is the most versatile block in the Form Composer. You can input basic text, insert images, link to Act-On content, create tables, and much more in a single Rich Text Block.

Screen_Shot_2022-05-23_at_4.27.42_PM.png

Image

Screen_Shot_2022-05-23_at_12.07.07_PM.png

Add images to your Form. You can pull images from your Act-On Image Library or upload new images.

Screen_Shot_2022-05-23_at_4.29.32_PM.png

Text Box

Screen_Shot_2022-05-23_at_12.07.39_PM.png

Use the Text Box block to create basic Form input fields. Configure your text by following these steps:

Enter a Label and any Placeholder text
If you'd like this field to be a Password Field, toggle the switch under Settings to the right
Provide a Field Name and its matching Column Name under Field Mapping
- Make sure the field and column names are consistent with the list schema you've set up for lists across your Act-On marketing activities
Click the Validation tab to add validation rules to your input field
- Click the asterisk to make your field Required – this will require users to fill out this field before they can submit your Form

Screen_Shot_2022-05-23_at_4.33.35_PM.png

Hidden Field

Screen_Shot_2022-05-23_at_12.08.09_PM.png

Hidden Fields can be used to pass data behind the scenes of the Form, such as from a static Field Value or when capturing data from a UTM string. Read more about using UTM strings with Hidden Fields here.

Screen_Shot_2022-05-23_at_4.43.05_PM.png

Paragraph

Screen_Shot_2022-05-23_at_12.08.49_PM.png

Use Paragraph Text Blocks to allow Form visitors to submit responses in paragraph format. When creating and editing this field, you'll find the same Design and Validation options for labeling and mapping as the Text Box block.

Combo Box

Screen_Shot_2022-05-23_at_12.09.33_PM.png

The Combo Box allows you to create multiple-choice questions for your Form. Combo fields can be labeled and mapped in the same way as basic Text Box blocks. The difference is that you now have the option to create a list of potential responses in one input field. Choose from three variations:

Drop-Down List allows a single selection from a dropdown menu of options.
Radio Buttons allow a single selection from a list of options.
Checkboxes allow for multiple selections from a list of options. Can be set as preselected.

Enter the Labels & Values for the combo box options. Alternatively, you can upload a CSV file containing the labels & values instead of typing them individually. Click on the upload button in the top left of the sidebar:

Form Design Guide 01.png

Captcha

Screen_Shot_2022-05-23_at_12.10.08_PM.png

Use the Captcha field to help deter spam bots. Read more about preventing spam bot Form submissions here.

Screen_Shot_2022-05-23_at_4.49.33_PM.png

Screen_Shot_2022-05-23_at_4.50.26_PM.png

Date

Screen_Shot_2022-05-23_at_12.11.20_PM.png

Use the Date Block to capture date entries. A variety of date formats and layouts are available.

Screen_Shot_2022-05-23_at_1.20.43_PM.png

Submit Button

Screen_Shot_2022-05-23_at_12.11.59_PM.png

The Submit Button is required on all Forms and allows you to customize the button the user will click to submit your Form. Align the button to the left, right, or center, and move the button between content blocks to position it in the location you choose.

Saved Fragment

Screen_Shot_2022-05-23_at_12.13.42_PM.png

Drag one of your existing Content Fragments into your Form.

You can save your Form's content blocks or fields as a Saved Fragment to reuse it at any time across all your Act-On Forms. To save a content block as a Saved Fragment:

Click on the content block you'd like to save as a fragment
In the editing panel, click Save Fragment in the top-left corner
Give your content fragment a Fragment Name and select a Folder to store it
Click Save

Add content blocks

Drag any of the above blocks from the left-hand Blocks panel into your Form's sections in the WYSIWYG editor.

Edit or delete content blocks

To edit or delete Form blocks, simply click on them in the center WYSIWYG editor. This will open the Edit panel for your selected block, where you can make any desired changes or delete the block altogether.

Next Steps

Once you're finished designing and adding content to your Form, check the following:

Use the Form Settings panel in the Design tab to further customize your Form and enable some important settings. This includes:
- Form Properties – determine layout and styling specifications
- Field Mapping – map your Form fields to the columns in your Form submissions list
- Form Conditions – add conditional logic to your Form with IF and THEN statements
- CSS – upload custom CSS stylesheets
Review your Form in the Review tab to test your Form's design and settings
Use the Embed tab to embed your Form in an Act-On Landing Page or external web page

Want more help with Act-On Forms? Visit our Forms Composer User Guide for guidance.

Form Design Guide