Your audience can provide a lot of valuable information. Think about 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.
What is a form?
The forms element can be used to collect personal information from your audience, create subscription forms, or gain insights. When a visitor fills in a form, the data 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 Done in the top-right corner of your screen. This will close the form builder and return you to the normal page view.
💡At the moment, we don't support a reCAPTCHA field to prevent spam form submissions.
⚠️ The maximum character limit for the Text Area, Comment, and Text fields in Foleon forms is 2,500 characters.
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. We will review 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 is "Full name".
-
Label color - You can choose the color of the label. If you want to emphasize a specific field, you can give it a different color.
-
Placeholder text - When the visitor hasn't completed a field yet, the placeholder text will show.
-
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 recognizable names. This will help you process the data better when you download 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 Brand. 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
Form submissions are automatically sent to the email address you’ve set in the form’s General settings. You can also download all submissions directly from the dashboard at any time.
In the dashboard, go to the Foleon Doc for which you want to download the form submissions. Click the quick actions menu of your Foleon Doc, click Download, and select Download form results.
A pop-up will appear asking you to confirm that you would like to receive all form submissions and information acquired through Social Logins. Click Confirm.
You will receive an email with a download link to your file. Click the link to download the file to your computer.
💡 It may take up to 30 minutes to generate the file.
⚠️ If there are no form submissions, no email will be sent.
The download will be a .csv file, which you can open in Microsoft Excel, Google Sheets, or a similar spreadsheet tool.
💡 This .csv file contains all submissions of a form with a date and time 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. Therefore, when you get a form submission email or open the .csv file, you'll see 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
Zapier lets you push data from one app to another. In our case, it allows you to send information that you’ve acquired through a Foleon form to any of the 1,000+ other apps connected to Zapier.
By using our Zapier integration, you’ll no longer have to export Foleon form submissions and import them somewhere else manually. 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 with Zapier? Read our article Integrate Foleon with your tech stack using Zapier.
Tips for designing forms
When you make your forms more appealing, your audience is more likely to fill them in. Below are a few tips on designing forms.
-
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