Placing forms on your website

This manual we walk through the configuration options for forms on your website. This manual focusses on configuration, styling a form can done through the online css option.

To start configuring your form, select the form in your website and open the properties tab.

Texts relevant to the form

The first two properties that you can adjust are textual. For example, at "Text after submission" you can enter the text to be displayed after the form has been sent. In this text you can inform the visitor about what will be done with the data now that you received it.

The text that you can set at "Text send button" is shown in the send button at the bottom of the form.

Adjust layout

There are 3 options with which you can adjust the layout of your form:

Show labels:

With the "Show labels" option you can indicate whether and where the labels of the form should be displayed. The labels are the texts that appear before or above the fields and indicate what needs to be filled in. There are 3 options for the placement of the labels:

  • before the fields: shows the labels to the left and the fields to the right of them.
  • in the fields: shows the label in the field. the label will then only be visible if the field is empty. As soon as the visitor starts typing, the label disappears
  • bo labels: shows no labels

NOTE: depending on the style, the labels when selecting "before the fields" can also be shown above the fields. This is often the case on mobile.

Number of columns:

The number of columns should be used in combination with the "Show labels" field. If the labels for the fields are shown, 2 columns are needed: 1 for the labels and 1 for the fields. If the labels are not shown or in the fields, only one column is needed.

However, the number of columns can also be used to make completely different layouts. If you give as many columns as there are fields and place the labels in the fields, the form will be shown as 1 line.

Error display:

With the error display you can indicate where the errors should be shown. Unless specific style is applied, it is recommended to choose from one of the following two options:

Above the fields: show an error message above the field if the field is not filled in correctly.
Below the fields: show an error message below the field if the field is not filled in correctly.

Sections

In the field sections you can indicate which sections can be shown. To do this, the sections must first be filled in with the form fields:

Manual on working with sections in the forms module

To show only the fields from a section, enter the section here and save the adjustments. Then refresh the page to see the new form. Note that fields without a section are no longer shown.

If you want to display fields from more than one section, you can specify the sections by separating them with a comma. For example: "both, nonprofit".

Redirect to another page

It is possible to refer the visitor to a new page after filling in. For example, to show a detailed explanation of what happens to the data or to point the visitor to a follow-up action.

Because there is some time between processing the form and loading the new page, it is best to add a short statement in the text after saving (see explanation above). You could place a text like "your data is being processed" or "your is now being taken to the page ...".