Create forms in composer

You can design forms with our drag-and-drop editor and connect it to any database.

Create a form

In the Campaign menu, go to Forms.
Click Create form.
In the pop-up window, complete the following:
1. Give your form a unique name.
2. Choose the form type: Standard or Opt-out from the dropdown menu.
3. Enter tags if applicable by typing them in the text field and clicking Add.
Click Create.

Meet the drag-and-drop editor

The drag-and-drop editor contains two tabs: Details and Design.

Any form you create begins with defining a layout. Click to select a layout or drag an element from the Design tab over the layout you want to use. You can add up to 50 sections.

Add form details

Before publishing, make sure you complete the form details:

Contact source: add a database you'd like contacts to be added to or updated.
Contact matching: toggle if you want to automatically reconcile duplicates with existing contact records.
Settings: enter a description, add tags, lead source, and lead source term. You'll find more information about lead sources in this article: Track lead sources.
Pages: the confirmation page displays after a user submits the form and is switched on by default. Otherwise, you will need to assign a destination link to the submit button.
JavaScript: toggle if you want to include custom JavaScript code in your form and paste the code in the text field.
Show field indicators: toggle if you want to mark required fields and differentiate them from optional ones. Then, select an indicator from the dropdown menu: asterisk (*), text, or text on optional fields.

Design your form

The Design tab holds multiple customization options that help you adjust the form to your organization's visual guidelines and the look of the rest of your page. The design features are grouped into categories to help you create pixel-perfect forms.

Global styles

Global styles are universal design settings that will apply to every form you create and change across all forms if you change them. They are grouped in three categories:

Body and content refers to color, width and padding of the form.
Text styles includes text formatting options for headings, body text, links, and helper texts. You can choose different fonts, colors, and styles for each.
Form fields settings include formatting options for text, sizing, background, and borders.

Form blocks and content blocks

You'll find two types of blocks in the composer: form blocks and content blocks. Form blocks are the ones you connect to the database fields and collect data with while content blocks are the ones that help you organize the form's visuals and other text.

Add and connect form blocks

Each field can be required or optional. Add the field label, placeholder text, tooltip, or validation. You can assign a default value or use the value from the database for all blocks except the email block. Design the block width, background (color or image), spacing, and borders.

Note: Every required field in a database must be connected to a corresponding form block.

Email

Forms composer email block

The email block is an obligatory element for most standard forms and always for an opt-out form. To publish a form, you must connect it to an email database field.

Checkbox

Checkbox is a form block used for multiple choice questions. Connect the block to a database field and edit the field values without the need to access the database directly. Add a Select all option and divide the fields into up to three columns.

Date

The date form block offers three date formats and a default value option.

Radio button

Radio button is a form block used for singular choice questions. Connect the block to a database field and edit the field values without the need to access the database directly. Add a Select all option and divide the fields into up to three columns.

Dropdown

You will use the dropdown block for single choice questions in your form. Just like with the checkbox block, you connect the block to a database field with listed values, but you can also edit the values without direct access to the database. Add a placeholder value and default value or use the one from the database.

Number

Use the number block to enable the user to add a number manually or using the up and down arrows by the number field. Add a placeholder value and default value or use the one from the database. Add a field validation: minimum number, maximum number, number range, or regular expression (regex).

Text area

The text area block provides space for a longer piece of text, e.g. a message in a customer support form. Add a placeholder text and default value or use the default value from the database. This form block doesn't provide validation.

Text input

The text input block is perfect for short text answers in your form. Add a placeholder text and default value or use the default value from the database. Add a field validation: alphabetical characters only, numbers only, URL format, ZIP code (in 12345 or 12345-6789), minimum number of characters, maximum number of characters.

Toggle

Use the toggle block to upgrade the regular "this or that" type of question. You can set the toggle to be switched on or off by default.

reCAPTCHA

The reCAPTCHA block adds the most popular authentication tool to your form. To display reCAPTCHA on a published form, go to your Google reCAPTCHA admin console and choose the domain used for the form. Select the display mode (light or dark), size (normal or compact), and add an optional tooltip.

Snooze

The Snooze block gives the customer a choice to pause receiving your emails without unsubscribing completely. This block works both for active and snoozed customers, who can reactivate their subscription after a snooze period. Go with default snooze labels or enter your own, select the snooze period for each option, keep the block visible or hidden.

SMS

Add an SMS block to your form so that users can opt in directly to your various SMS campaigns both single- and double opt-in. The SMS block simplifies the opt-in process: selecting a country code and collecting consent with a checkbox and compliance disclaimer.

Subscription group

If you offer a number of different contact lists your customers can sign up for, a subscription group block will help them choose all the lists they're interested in, without a hassle. The groups will display in a list with checkboxes for an easy opt-in process.

Design with content blocks

Text block

A text block is a text element, best used for text that is a heading, paragraph, or link. Set the spacing between lines of text. Use the inline text editor to format your text. Set the font family, font size, font color, highlighting, bold, italics, underlined, strikethrough, superscript, subscript, alignment, lists, indention, links, or formatting removal.

Image block

Imageblock"

The image block is for adding images to your form. Drop or browse images assets, enter alt text, link information, spacing, and background. Image blocks display images with optional captions below or overlaying the image. Enter the alternative text for this image, the link name, link type, URL, and target.

Spacer block

A spacer content block gives a buffer between other content blocks. Set the height and the background fill type and background color.

Divider block

This is a way to break up different sections of your form and emphasize transitions between content in your form. Set the line height, weight, color, and opacity, determine the spacing, padding, horizontal alignment. Set the background fill type and background color.

HTML block

If you've added an HTML block to a form, make sure your HTML and styles are scoped to target only the elements in the HTML block. Similarly, if you're building your entire form with the HTML editor, make sure your code is targeting only the elements within your form. Determine the settings and the style.

Blocks visibility

In case you want to add a block that shouldn't be visible to the site visitors right away, you can hide it using visibility settings in the Details tab. You can make each block visible or hidden anytime you wish.

Note: An email block has to be visible at all times and hiding is not available.

Preview form

Click the Preview icon to see your form as it will appear in the smartphone, tablet, or desktop screens.

Screenshot_2022-07-19_at_17.07.38.png

Click the smartphone, tablet, and desktop screen icon to switch between the preview modes.

Review and publish

When you're done designing your form and the preview looks as you desire, click the Preview and publish button. Whenever your form needs edits to be published, a list of to-dos will appear to help you correct all errors quickly. After the form is published, a URL address will appear in the forms list view.

Embed a published form

There are two ways you can embed a published form on a website:

Inline frame <iframe> code element in HTML to embed a form on a page you host. Even though the form is hosted on your site, forms are attached to your Campaign database.
External form source code. Develop a form in Campaign and then insert the form into an external page. Campaign generates the external form source code after you publish your form.

In the Campaign menu, go to the Forms listing page.
Click the three dots next to the form you want to embed.
Click View code. You'll see three types of code:
- URL - Use this address to access the form on the web.
- iframe code: Copy the HTML code and paste it into the source code on the web page you would like it embedded.
- External form source code: Copy the code and paste it into the external web page (where you want the form) between the <body> tags.

Create a form

Meet the drag-and-drop editor

Add form details