Collect information from your readers by adding a form as an element to the publication. The form can have multiple fields like “name” and “address” but also a dropdown or options field. The information given by the reader will be sent to the email address you set in the editor.
In this article
- Creating forms
- Adding fields (presets and custom)
- Form settings
- Field settings
- Submit settings
- Receiving form submit a notification
- Download form submissions
- Connecting your forms to Zapier
- Tips for designing forms
The Forms element is used to collect personal information of readers, create subscribe forms or gain insights. “Filled in” forms can be sent directly to your email address (via General Settings), and you can download them directly from the dashboard in the editor. For this last option, you can click the More button (with the 3 dots) and click on Get Form Results.
To create a form drag the form element into the page. Once the element is dropped, the form options will open. Here you can choose the fields you like to add to the form. You can always go back to this to add more fields. If you need to come back to this menu, click inside the form and click on the + symbol at the bottom. This will open the menu.
The users’ input to your form, once your publication is live, will be sent to an email address of your choice. You can adjust this in the general settings of the form. You are also able to export the results to Excel. To do this, go into the Dashboard of your account, look up for the publication, and click on the button with the 3 dots and click “Get form results”.
Adding fields (presets and custom)
After you have added a form element, a pop-up window will appear with several options for your form.
In this window, you can select several options for your readers to fill out. You can choose the preset fields like First name, Email, Gender, and Opt-in. There are also several ‘custom fields’ you can choose. A custom text field will allow the reader to fill in a text, use a text area field when you expect readers to add more text. A radio field will give the reader a multiple-choice option where they can only choose one of the options, where the checkbox will allow the reader to choose multiple options. A dropdown field is another way to make a reader choose between various options.
You can add a field by clicking on the different field options. They will automatically be added when you click on them.
The form settings are reachable when hovering over the element. Here you can change the form name, set the email address for submissions, create a success message and style the form using the different settings.
In General Settings you can set the form name, determine where the submissions will be sent to and create a success message that readers will see once they have submitted the form. Set a success message to let the customer know they have successfully filled in the form. Make sure you always set a form name so you can distinguish the forms when you collect the data. The submissions will be sent to the email address you set here. If you have more email addresses, separate them with commas.
In ‘Background’ the color of the background can be set. This is transparent by default, but it can have any color or transparency you want.
In ‘Border’ you can set the border inside the form element one side at a time or all sides at once. All sides at once is selected by default, this 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 so as to increase the amount of the border per 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.
In ‘Spacing’ you can add spacing at the bottom of your form. This will determine the space between the form and the element below.
Make the form ‘float’ by setting a shadow behind the form in the Shadow’ settings. 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 little more faded.
Make the form element fade in, zoom in fly in or blur in with the ‘Animation’ settings. The Entrance animation of the element can be selected in the drop-down menu. This animation will be shown one time when the page is opened. In the block settings you can make all the elements in the block only once or make them animate every time it appears on the screen.
Next to the form settings, each field has its own settings. Hover over the field to access the field settings. Here you can customize and name the field inside the form. Make sure you also change the field name in the general settings so you can distinguish the fields in the outcome.
The label in ‘General settings’ will give a title to the field and this will show in the form. You can also choose the color of the label. When the reader doesn't fill in something in the field, the placeholder text will show. Here you can let the reader know what they can fill in this field. You can choose a color for the placeholder text and the value text separately.
Is the field required? If yes, the reader can’t submit the form without the field filled.
Name the field to have a clear overview of the fields in the outcome of the data.
Set the ‘Background’ color of the field here.
Style the ‘Border’ of the field here.
Set the ‘Spacing’ between the fields here.
Make the field ‘float’ by adding a ‘Shadow’.
When you fill in a form and hit send, you want to have a success message. That way you know your form was successfully submitted. This success message is set in the submit settings. Also the email address where the submissions will be sent to, can be set here.
Tip: The success message is taking the font style that is setup as Paragraph in Theme. If you want to customise your success messages’ font, you can do that by adjusting the Paragraph font in Theme.
Receiving form submit notifications
Every form submission will be sent to the email address you have set in the general settings of the form. This is a notification a submission has been submitted. Next to these notifications, you can get a file with all the data together via the dashboard.
Downloading form submissions
Downloading the form submissions is possible in the dashboard. When you click on the three dots of the publication that contains the form, you’ll see the option ‘get form results’. When you click on that option, a pop up will appear with the name of the forms in that publication. Click on the form requested and the results will be downloaded. The file is an .csv file. You can open this file in Excel.
Connecting your forms to Zapier
To directly get your results to the platform you want, you can use Zapier. Zapier connects Foleon with the other platform ensuring that you don’t have to transfer the data manually. Read this blogpost for more information.
Tips for designing forms
Make forms more appealing to your readers so they are more likely to be filled 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 all Caps in your form. Lowercase letters are easier to read and scan.
3. 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. Rather show all the options and use a ratio or checkbox.
4. Don’t set labels as placeholder text to reduce space. The placeholder text will disappear when the reader starts typing. This may challenge the readers’ short-term memory. Also, a reader can’t check the form whether filled in correctly afterwards.
5. Make a Call To Action button descriptive. The button should describe the action the reader is about to take.
6. Place related fields in groups. Longer forms can feel overwhelming. Grouping the fields gives the reader a quick overview and are more likely to be filled in.