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:
- Give your form a unique name.
- Choose the form type: Standard or Opt-out from the dropdown menu.
- 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 of up to four sections. Click to select a layout or drag an element from the Design tab over the layout you want to use.
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.
- 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 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.
Design with content blocks
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.
Click the Preview icon to see your form as it will appear in the smartphone, tablet, or desktop screens.
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.