Form Design Guide

  • Updated

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.

The Properties, Design, Review, and Embed tabs in the Forms Composer, with Design selected.

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.

The New Section toolbar options shown when dragging a Section into the Form editor.

   An empty Form section after it has been added to the layout.

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.

A Form section with the Add Column option highlighted in its right-hand controls.

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.

A Form section with the Move Section option highlighted for repositioning.

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:

  1. Hover over the section you'd like to edit
  2. Click Column Settings at the top of the section to edit a section column
  3. 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

Screenshot showing the Column Settings and Section Settings buttons that appear when hovering over a section.

     Screen_Shot_2022-05-23_at_12.03.23_PM.png

Screenshot showing the Section Settings button highlighted at the top-right of a Form section.

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.

The Edit Section Settings panel, with background color, opacity, and padding options.

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

Screen_Shot_2022-05-23_at_12.06.07_PM.png

Icon representing the Rich Text block in the Forms Composer Blocks panel.

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.

The Edit Text panel showing the Rich Text Block's formatting toolbar.

Image

Screen_Shot_2022-05-23_at_12.07.07_PM.png

Icon representing the Image block in the Forms Composer Blocks panel.

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

The Edit Image panel, with fields for the image, alt text, target URL, alignment, and corner radius.

Text Box

Screen_Shot_2022-05-23_at_12.07.39_PM.png

Icon representing the Text Box block in the Forms Composer Blocks panel.

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

  1. Select a Contact Field from the drop-down. If you are collecting data that's not on your All Contacts list, choose 'Form Data Field' and enter a field name. If you aren't using Act-On Contacts for this form, skip to step 2.

The Edit Input Field panel showing Label, Placeholder Label, Settings, Alignment, and Field Mapping options.

  1. Enter a Label and any Placeholder text.
  2. Under Settings, toggle the switch if you'd like this field to be a Password Field.
  3. Under Field Mapping, provide a Field Name and, if shown, its matching Column Name.
  4. Click the Validation tab to add validation rules to your input field.
    • Click the asterisk (at the top) to make your field Required – so users must fill out this field before they can submit your Form.

Screen_Shot_2022-05-23_at_4.33.35_PM.png  

Icon representing the Hidden Field block in the Forms Composer Blocks panel.

Hidden Field

The Edit Hidden Field panel, with options for Label, Grab URL Parameter, Static Value, and Field Mapping.

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

Icon representing the Paragraph block in the Forms Composer Blocks panel.

Paragraph

The Edit Text panel used to configure a Paragraph block's design and validation options.

 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

Icon representing the Combo Box block in the Forms Composer Blocks panel.

The Combo Box lets you 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:

The Forms Composer sidebar with the upload button highlighted in the top-left corner.

Captcha

Screen_Shot_2022-05-23_at_12.10.08_PM.png

Icon representing the Captcha block in the Forms Composer Blocks panel.

Use the Captcha field to help deter spam bots. Read more about preventing spam bot Form submissions in the "Why do I have empty or repetitive submissions to my Act-On Form?" article.

The Edit CAPTCHA Field panel, showing the alignment dropdown and reCAPTCHA checkbox.

Screen_Shot_2022-05-23_at_4.50.26_PM.png

Icon representing the Date block in the Forms Composer Blocks panel.

Date

The Edit Date Field panel, showing Date Layout and Time Layout dropdown options.

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

Icon representing the File Upload block in the Forms Composer Blocks panel.

File Upload

The informational note explaining that the File Upload block is available only for Audience Center Forms.
The File Upload block is available only for Audience Center Forms - those that submit to All Contacts. Submissions to legacy Marketing Lists are not eligible for file upload. Learn more

The File Upload block lets your submitters upload one or more files as part of their Form submission. Once you've dragged the file block, you can configure it.

  • The Label tab lets you enter a label for the block and a field name (this is required, it will be a Form-specific field, not a contact field). Here you can also configure your block's button and text.
  • The Design tab gives you more flexibility over the Form block appearance. This tab also lets you choose to allow multiple submissions.
  • The Validation tab lets you specify required file types and customize error messages.

Saved Fragment

The Edit Input Field panel showing the Save Fragment option, used to save a block as a reusable Content 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:

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

Screen_Shot_2022-05-23_at_4.56.51_PM.png

Icon representing the Submit Button block in the Forms Composer Blocks panel.

Submit Button

The Submit Button block's icon and alignment options in the Forms Composer Blocks panel.

 The Submit Button is required on all Forms and lets you 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.

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.

Was this article helpful?

Have more questions? Submit a request