Your audience can provide a lot of valuable information. Think about personal details such as email addresses, which you can use for your marketing campaign. This article shows you how to use the form element to gain these insights.
💡 Do you want to gate your Foleon Doc for lead generation? Check out our article Gating your Foleon Docs for lead generation.
In this article
What is a form?
The forms element is used to collect personal information from your audience, create subscribe forms or gain insights. When a visitor fills in a form, the information can be sent directly to the email address of your choice.
How to add a form
Go to the elements tab and drag and drop a form onto your page.
💡When you're working with the Content Builder, it's not possible to add a form element to your page. Instead, add a form block template to your page and build your form that way.
After you have added a form element, a pop-up window will appear with the form builder. The form will be empty by default, so you have to fill it with the fields that are relevant to your goal.
How to add fields
Once you have added a form to a column, the add fields pop-up will appear in the form builder. Here you can choose the fields you'd like to add to the form. You can add a field by clicking on the different field options.
As you can see in the example above, there are 3 different sections in the Add fields pop-up:
-
Add field presets
-
First name - This lets your visitor share their first name.
-
Last name - This lets your visitor share their last name.
-
Email - This lets your visitor share their email address.
-
Phone number - This lets your visitor share their phone number.
-
Comment - This lets your visitor leave a comment in a larger text area.
-
Gender - This lets your visitor share their gender.
-
Opt-in - This lets your visitor opt-in with a checkbox.
-
-
Add custom fields
-
Text - This lets your visitor fill in custom information.
-
Textarea - This lets your visitor fill in the information in a larger text field.
-
Radio - This lets your visitor choose only one option in a multiple-choice list.
-
Checkbox - This lets your visitor tick a small box in a form — for example, to register opt-ins (e.g., subscribing to emails). You can set it up to be checked or unchecked by default to comply with data privacy regulations.
-
Dropdown - This lets your visitor choose between various options.
-
-
Add elements
-
Title - Add a title to your form.
-
Paragraph - Add paragraph text to your form.
-
Divider - Add a divider to make the form look more organized.
-
If you've finished adding your fields, click on Done in the top-right corner of your screen. This will close the form builder and makes you return to the normal page view.
💡At the moment, we don't support a reCAPTCHA field to prevent spam form submissions.
You have now added your fields, but you want to edit them to make them yours. When you hover over the form, a blue overlay appears with an "Edit form" label. Click on it to reopen the form builder.
How to edit your fields
Each field has its own settings. Hover over the field and click on settings in the black bar. Here you can name and label the field inside the form and style it to your liking. We go over each of these settings below.
⚠️ Make sure to always check the general settings for each field.
-
General settings
The general settings are the most important to get right. Below the example, we will go over each of these settings and how you can make the most of them.
-
Label - this is the title that you give your field. In the example above, this would be "First name".
-
Label color - You can choose the color of the label. If you want to emphasize a specific field, you can think about giving it a different color.
-
Placeholder text - When the reader doesn't fill in something in the field, the placeholder text will show. In the example above, this is "example@yourdomain.com" for the Email address field.
-
Placeholder text color - You can choose the color of the placeholder text.
-
Value text color - This lets you determine the color of the information that your visitor fills in.
-
Required - Is it required for the visitor to fill in this field for a successful submission? If yes, the visitor can’t submit the form without filling in the field.
-
Field name - You can name the field to have a clear overview of the fields in the outcome of the data.
💡 Make sure to give your fields names that are recognizable. This will help you process the data better when you've downloaded your form submissions.
-
-
Background
Here you can set the background color of the field.
-
Border
The border option allows you to create a full border or a border on specific sides of the field. All sides at once is selected by default, which means that when you increase the border thickness, the same amount of border will appear on all sides at the same time.
When all sides at once is deselected, the option to increase the amount of the border for each side will appear. It is also possible to add more than one border. Every border will have the same color that is selected at the border color picker.
-
Shadow
You can add a shadow to your field. Choose the shadow color with the color picker. After selecting the color, you can choose the horizontal position and vertical position. The blur radius can be used to make the shadow less harsh and a bit more faded.
-
Spacing
Spacing can be increased to create more space between the border of the element and the content within the element.
Form settings
Each form has its own settings. Here you can change the form name, set the email address for submissions, create a success message, and style the form.
Hover over the element and click on settings in the blue bar.
This will open up the element settings of your form. The general settings are the most important to get right. Below the example, we will go over each of these settings and how you can make the most of them.
In general settings you'll be able to set the following:
-
Form name - Make sure to always set a form name, which will display in the dashboard when you want to download your submissions. Adding a recognizable form name can help you distinguish multiple forms when you collect the data.
-
Send submissions to - The form submissions of your audience will be sent to the email address you set here. If you want to send the submissions to multiple email addresses, you can separate them with commas.
-
Success message - When you fill in a form and hit send, you want to let your visitor know the form was successfully submitted. Set a success message to inform your audience.
💡 The success message inherits the font style that is set up as a paragraph in Theme. If you want to customize the font of your success message, you can do so by adjusting the paragraph font.
Next to this, you will be able to control the styling of the form with the following settings:
-
Background
-
Border
-
Shadow
-
Spacing
-
Animation
To learn more about what each of these settings do, we recommend reading our article All element settings explained.
How to download form submissions
Forms that have been filled in by your visitors will be sent to the email address that you've set in the General settings of the form. Next to that, you can download all form submissions collectively in the dashboard.
In the dashboard, go to the Foleon Doc you want to download the form submissions for. Click the quick actions menu of your Foleon Doc and select get form results.
When you've clicked on get form results, a pop-up will appear with the names of the forms in that Doc. Click on the relevant form, and your download will start directly.
You'll download a .csv file, which you can open with software such as Microsoft Excel and Google Spreadsheets.
💡 This .csv file contains all submissions of a form with a date stamp for each submission. This allows you to filter submissions of a specific time period.
We add a hidden field to every form to capture the UTM and send that data along with the form submission. For that reason, when you get a form submission email or open the .csv file, you'll see that there's a hidden-referral field.
💡 At the moment, it's not possible to add a hidden field for each UTM parameter separately. Instead, there's one field that contains the complete string e.g., utm_source=facebook&utm_campaign=social.
Connecting your forms to Zapier
In a nutshell, Zapier lets you push data from one app to another. In our particular case, it allows you to send information that you’ve acquired through Foleon forms to any of the 1,000+ other apps connected to Zapier.
By using our Zapier integration, you’ll no longer have to manually export Foleon form submissions and import them somewhere else. This whole process will be automated, leaving you more time to focus on creating content.
💡 Learn all about it in our article Connecting Foleon to Zapier. Are you curious about which integrations you can start using Zapier with? Read our article Integrate Foleon with your tech stack using Zapier.
Tips for designing forms
When you make your forms more appealing, it's more likely that your audience will fill them in. We have listed a few tips on designing forms below.
-
Group your labels with their text fields. To make it clear to readers what label belongs to what input field. You can do this by using margins between fields.
-
Reduce the use of capitalized letters in your form. Lowercase letters are easier to read and scan.
-
Only use the drop-down option when there are more than 6 options to choose from. A drop-down requires two clicks and hides the options. We recommend showing all of the options by using a Radio or Checkbox field.
-
Don’t set labels as placeholder text to reduce space. The placeholder text will disappear when the reader starts typing, which may challenge the short-term memory of your visitor. Also, a reader can’t check if the form was filled in correctly afterward.
-
Make a Call To Action button descriptive. The button should describe the action the reader is about to take. In the example below, "Sign up" is clearer than "Submit".
-
Place related fields in groups. Longer forms can feel overwhelming. Grouping the fields gives the reader a quick overview, which makes the form more likely to be filled in. You can use the divider element to help with this.
Related articles