Using forms can be a great way to capture information for new leads and many other aspects of your business. Understanding how to use the form builder is critical to best using the system and customizing it for your business needs. You can add elements to capture the information you need from your leads. All style, design, and option tools are conveniently located on the right. Tailor your forms precisely, customizing layouts, colors, and other stylistic elements.
Overview of the Forms Feature
Navigate to Forms. You’ll see 3 tabs: Builder, Analyze, and Submissions
“Builder” features a list of all your existing forms. You can also create a new form from this page.
“Analyze” gives you an overview of the number of submissions, as well as a graph. You can sort by form, choose a specific period, and more.
“Submissions” allows you to sort through the submissions for all forms or select a specific form. You can also search for a specific submission by name, email, phone number, or contact ID.
Step 1: Creating a Form
Navigate to the Builder and click on Builder, then New Form, and then Start from Scratch.
Note: You can also click on edit on an already existing form to edit more, or select a template, by clicking on New Form - Choose from Template.
Step 2: Edit your Form by Adding Elements
You can edit the name of the form by clicking on the pencil to edit
Click on the + sign on the left to see all the elements available.
Once you see the one you need, click on it, drag it, and drop it into the position where you want it to be.
Note: You can also add a short label to each element you add. This allows you to assign a brief and focused title or heading to each element in your form. It serves as a quick overview of the content or input expected from respondents.
If you don’t need this element anymore, click on the element, and on the X to delete it.
You also have the option to add your custom fields. Next to the Elements (Quick Add tab), you will see the Custom Fields.
This is the list of elements you can add from the Quick Add section:
Full Name
First Name
Last Name
Date of Birth
Phone
Email
Button
Address
City
State
Country
Postal Code
Website
Organization
Text
HTML
Image
Note: The Image element now can resize the image in the builder itself. You can also align the image, and add text to images for SEO purposes.
Captcha
Source
Terms & Conditions
Payments Element and Order Confirmation
1: Add the Payments Element to Your Form
Navigate to the form builder and click the “+” sign to see all available elements.
Locate the Payments element, click on it, and drag it into the desired position on your form.
2: Configure the Payment Settings
After adding the Payments element, click on it to access its settings.
Configure the product options, prices, and any other relevant payment details required for the form. This setup allows your form to take payments directly when submitted.
3: Set Up the Order Confirmation
Navigate to the form settings by clicking on ‘Options’ on the right side of the form builder.
Under the submission actions, select "Show Order Confirmation" to enable an automatic order confirmation page upon successful form submission and payment.
4: Customize Order Confirmation Page
The order confirmation page will automatically match the form's theme, providing a seamless user experience.
Further customization options for the order confirmation page will be available in future updates, allowing for adjustments to layout and content.
The order confirmation page provides a concise and clear message, matching the form's theme for a seamless user experience. For example
Currently, customization options for the order confirmation page are limited, but additional customization features are planned for future updates.
Step 3: Add Conditional Logic (Optional)
On the left side, you will see the logic icon, next to the “+” to add elements
Click on it to start the conditional logic
Redirect to URL:
If a specific input is entered into a field or a particular option is selected, users are redirected to a designated URL.
Display Custom Message:
Conditional messages are displayed based on user input or selected options. This feature allows tailored communication with users based on their actions within the form.
Disqualify Lead:
Leads can be disqualified if certain conditions are met, such as entering specific information. After disqualification, users can be presented with a custom message or redirected to a specified URL.
Note: Disqualified leads are not counted as submissions.
Show/Hide Fields:
Fields can be dynamically shown or hidden based on user input or selected options. This feature enables a more streamlined and personalized form experience for users.
Step 4: Edit your Form by Styling it
Go to the right side and click on ‘Styles & Options.’
Under styles, you can edit:
The layout
The form style (background, padding, borders, shadow, etc)
The custom field style
The label
Placeholder
Add Custom CSS
The background image, intended to cover the entire page, provides a visually appealing backdrop for the form.
The header image, is designed to cover the entire width of the form and remains positioned at the top of the form. This allows you to display captivating images at the top of the form, creating an impactful and visually engaging experience.
Toggle the agency branding
Under “Themes” you will be able to choose from a wide array of professionally crafted themes that suit various styles and purposes.
Note: All the themes come already with a background, field style, font, size, button design, etc. Below is an example of what the Casual theme looks like.
Under “Options” you can choose the form name, determine what happens upon submission (redirect to specific URL, show a thank you message or show an order confirmation if a product was sold via this form), add a Facebook Pixel ID, and enable timezone. You can also toggle on or off the Sticky Contact feature. For more information on selling products via forms, please refer to our Adding and Using Products in Forms article.
Note: Activating the timezone option will capture the time zone information of the individual submitting the form
Step 5: Version History
In the version history, you can access previous versions of a form. For instance, if you've made changes and saved them, but now want to retrieve an earlier version, you can do so from the version history. This feature displays the date and time of each iteration, allowing you to track and restore earlier versions as needed.
Step 6: Integrate the Form
Generate links and embed codes. Connect forms to calendars and integrate them into your funnels and websites. Leads and contacts can fill out forms with ease, while you manage submissions in the system.
Once you create a form and save any changes, you can click “Integrate Form” to access a link or embed code.
We have multiple options of integration.
Forms can also be connected to a calendar (check out Calendar Settings to learn more about this.)
Forms can also be used in Funnels or Websites using the Form Element
Once a form is integrated into the system in one of these ways, leads/contacts will be able to fill it out accordingly, and you can view the submissions in your system.
Step 6: Save your Form
Although we recommend that you save your form from time to time while you are editing, don’t forget to save it one last time when all the edits are done.
FAQs
How do I add a Payments element to my form?
To add a Payments element to your form, navigate to the form builder, click on the “+” sign to see all available elements, and locate the Payments element. Click on it, drag it, and drop it into the desired position on your form. This allows you to set up payments directly through the form.
What happens when a payment is made through the form?
When a payment is made through the form using the Payments element, an order confirmation page will automatically appear upon successful submission. This page provides a clear and concise confirmation message to the user, matching the theme of the form for a seamless experience.
Can I customize the order confirmation page after a payment?
Currently, the customization options for the order confirmation page are limited. The page will automatically match the form's theme, but more customization options, such as layout and content adjustments, are planned for future updates.
What actions can I set for form submission besides order confirmation?
In the form settings under “Options,” you can choose what happens after a form is submitted. Options include redirecting to a specific URL, displaying a custom thank you message or showing an order confirmation if a product was sold via the form. You can also add a Facebook Pixel ID and enable timezone tracking.
How can I use conditional logic in my forms?
To use conditional logic, click on the logic icon located next to the “+” sign in the form builder. You can set up actions such as redirecting users to a specific URL, displaying custom messages based on user input, disqualifying leads based on certain criteria, or dynamically showing and hiding fields to create a more personalized form experience.