The Design tab in Act-On's Forms Composer makes it easy for you to create and style your form's content. Using our simple WYSIWYG editor, you can quickly and easily add, edit, and delete form sections and blocks to design dynamic, user-friendly forms.
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.
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.
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.
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
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.
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:
|
|
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:
|
|
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 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:
|
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.