Form Settings are in the Design tab of the Forms composer to further customize your Form. With Form Settings, you can do any of the following:

Adjust font and color settings for your input fields
Map your Form fields to columns in your Form submissions list
Add Form conditions
Upload custom CSS stylesheets

Getting Started

Before you configure your Form's settings, make sure to complete these steps first:

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 take 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

Set up the fundamental building blocks for your Act-On Form. Add a Title, select a Form Submissions List, and set up a Response Page in the Properties tab of the Forms Composer. See our Form Properties Guide to learn more.

Design Your Form

Go to the Design tab in the Forms Composer to begin designing the content of your Form. Here, you'll add Sections to structure your Form and Blocks for various types of content, including input fields, images, and submit buttons. Visit the Form Design Guide for additional information.

Instructions

With Form Settings, you can apply input field layout and style properties, field mapping, Form conditions, and custom CSS for your Act-On Forms. You'll find these options in the right-hand Settings panel of the Forms Composer's Design tab. Learn more about each setting below.

Screen_Shot_2022-05-23_at_1.25.33_PM.png

Properties

Form Properties allow you to control the overall look and feel of your Form. You can choose to customize a variety of properties for Layout, Styling, and Validation.

Property	Description	Elements
Layout	Adjust the dimensions and responsivity of your Form.	Dimensions – Set your Form's max width Spacing – Set your Form's margins and padding Background – Set the color and opacity of your Form's background or apply a background image Advanced – Toggle the Responsive switch to make your Form's design responsive across devices
Styling	Customize the styling for your Form input fields and text, including background color, text color, and font.	Font – Select a font family and font size for your rich text, input text, and placeholder text Text Color – Select colors for rich text, link text, input text, and placeholder text Input Background – Select a background color for your input fields Input Border – Select the color and weight of your input field borders
Validation	Customize the font and color of your Form's validation text. You can also select when your Form will validate users' responses.	Styling – Select a color and font size for your validation text Settings – Decide whether your Form will validate users' responses on blur (when a user moves to another field) or on submit (when a user clicks the submit button)

Looking for the Forms Composer Properties tab? See our Form Properties Guide instead.

Field Mappings

Use Field Mappings to tell Act-On which input fields on your Form belong to which columns on your Form submissions list. Map your field and column names to System Usage to keep Form data consistent with the rest of your marketing activities across Act-On. Your column names may differ depending on whether you are creating a new list or working with an existing list.

Form Conditions

Use Form Conditions to create Form fields that dynamically show or hide based on users' Form responses. For example, if a user picks "United States" from a Country dropdown field, you can create a Form condition to show them a State dropdown field. Learn more about creating dynamic Form conditions here.

Screen_Shot_2022-05-23_at_1.24.09_PM.png

CSS

Upload a stylesheet or paste custom CSS into the provided editor to customize your Form's appearance using CSS or JavaScript.

Upload a CSS file

Under Files, click the plus sign to upload your stylesheet from your computer or to insert a stylesheet that is already loaded in your Act-On Media Library. Click OK to save your changes.

Manually Edit CSS

You can also manually paste and modify the code as needed under Edit CSS. If you want to clear the current CSS to load a new stylesheet, click Clear at the top left of the CSS panel. Click OK to save your changes.

Screen_Shot_2022-05-24_at_4.12.24_PM.png

Form Block Class Names

These are the class names for Form blocks to use in CSS & HTML:

.ao-richtext-block
.ao-submit-block
.ao-combo-block
.ao-image-block
.ao-hidden-block
.ao-textarea-block (paragraph block)
.ao-captcha-block
.ao-date-block

Examples

CSS

Sets the color of text & the block background color in rich-text blocks:

.ao-richtext-block {color: #333; background-color: #ffffff;}

Inline HTML

Sets the background color for rich-text blocks:

<div class="ao-richtext-block" style="background-color: #f9f9f9;">

Next Steps

Now that you've designed your Form and configured the above settings, be sure to:

Review your Form in the Review tab to test your Form's design and settings
Visit the Embed tab to embed your Form in an Act-On Landing Page or external web page

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

Form Settings Guide