To start, letβs click Sites in the left menu, and then click Forms in the top menu.
Select Builder from the dropdown.
Click the Create New Form button in the upper right.
And this will open the form editor.
In the center of your screen, you have a form canvas. This is where you'll add your individual form elements.
On the right side, you can see a list of available form elements. You can drag and drop these elements onto your canvas to create a form.
Let's start with a Full Name element. Drag and drop Full Name onto your canvas.
This will insert the Full Name field at the top of your form.
You can add as many elements to a form as you like. I'm going to add Phone, Email, and Address fields now.
And you can see that they've appeared on the form.
So far, all the elements we've added have been Standard Fields. However, you can also create custom fields as needed.
Click Custom Fields under the Fields tab.
If you've previously created custom fields, they'll appear in a list here. Let's click Add Custom Field.
This opens a pop-up with the different types of custom fields you can create. For this example, we'll make a text field. Click Text now.
Once you select the field type, a new popup appears with field settings. Let's change the name of the field to βYour Interests.β
In the Placeholder area, you can add text that tells the user what type of information they should enter.
Leave the type as "contact" and click Save to create your custom field.
Now drag and drop the Your Interests element onto your canvas.
As you can see, the field has been inserted with the placeholder text.
After you've created all your fields, you'll need to add a Submit button for users to click when they're done filling out the form.
Go back to your standard fields list - click the Standard tab, and then locate the button element. Drag and drop the button element onto your canvas.
Great! Your button has been added, And your form is complete.
Now, let's look at how you can customize your form.
When you click a field name on the canvas, its properties will appear on the right of your screen. Click Full Name.
You can change a few properties here, such as the field name and the placeholder text.
In addition, if you'd like to make the field mandatory, you can check the Required box.
You can also mark a field as hidden.
If you'd like to remove a field from your canvas, just click the small x in the top right corner of the field's box.
Similarly, the button also has properties you can edit. Letβs click the button now.
At the top, you can change the button's alignment on the form.
You can also modify the text on the button. Here, I've changed the text from Button to Done.
There's also a color mixer to change the button's background color.
And one for the text color as well.
There are a few additional styling options for your button.
You can add a border, change the button's corner radius to be more rounded, add padding, and even make the button a full-width element, which I've just done. Notice how the button now spans the entire width of the form.
Next, let's look at the tab to the right of Fields. Click Styles.
In the first section, you have some layout options. The inline forms toggle will adjust the elements on your form to take up less vertical space. I'm going to enable the toggle.
As you can see, this option reduced the vertical space, making the form more compact. I'll disable Inline Forms now.
The next layout option is Show Label. I've disabled the toggle and you can see that all the labels on the canvas have disappeared. However, the placeholder text is still present.
As with the button, there are some basic styling options available for your form.
The Background option allows you to change the background color of your form, and the Font Color can be changed from here.
Border, corner radius, and form width can be adjusted with these fields.
In addition, you can also add custom CSS to style your form.
In this example, the redacted portion of the image has Agency Branding.
You can disable the Agency Branding toggle to remove any branding elements.
Now let's look at the last tab - Options.
Click options to open up a few more form settings. The form name field allows you to give your form a custom name.
The next section is On Submit. This is where we'll tell the form what to do when the Done button is clicked.
It's currently set to Open URL. This means that when a user clicks Done, the form will be submitted and they'll be sent to another page URL. That URL is entered directly below the Open URL drop-down.
Instead of Open URL, you can also choose Message.
This will load a message in the open page instead of redirecting to a new page. Type in the message you'd like your users to see.
Please note that if a form is embedded inside one of your CRM funnel steps, you can override the On Submit behavior from your funnel step settings. For example, you could set the action to be "Next Step," which would redirect the visitor to the next step in your funnel.
If you are using Facebook Pixel, you can add your Facebook Pixel ID in the next field.
And if enabled, The Sticky Contact toggle will add a browser cookie so the visitor doesn't have to fill in these fields again.
When you've finished building your form, click the Integrate Form button at the bottom right.
This will give you two options:
The first option is embed. If you choose to embed your form, simply copy the code and add it to your desired webpage.
The other option is link. This lets you send the form to users as a simple URL link.
Lastly, click Save and Exit to finalize your form.
Your newly-created form will now show up on your forms list. It can be edited or deleted using the dropdown menu.