Forms

In this chapter, we get to the core of how Freeform works. Here we describe how to create a new form or modify existing forms using the Form Builder.

# Overviewpage forms

Overview.

# New form

(image block 1)

With the button New Form at the top right of the page you can start the process of creating a form. Go to the section Form Builder for more information about this topic.

In most cases, some forms have already been created by your website developer.

# Existing forms

(image block 2)

In this block you can see an overview of all created forms. After each formname you can find the handle, description, number of entries and the number of messages blocked because of SPAM.

Behind each row, you have the option to copy or delete the form.

Copy and delete.

The blue namelink of the form will take you to the Form Builder with its specific fields. Go to the section Form Builder for more information about this topic.

The handle, usually a derivative of the title, is a type of tag that acts as a handle that can be referred to. This means that you can use this handle to display the form on a specific page.

Deleting a form cannot be undone.

# Form Builder

With the button New Form at the top right of the page you can start the process of creating a form.

button new form.

A screen with a few basic settings appears.

New form.

# Name

Name the form. For example, 'contact form’.

# Handle

While entering the name, the handle will be filled out automatically. You can change it afterwards, this won’t affect the name.

# Formatting Template

You can choose how the system handles field labels in the actual form.

If you choose Bootstrap the name of the field will be displayed above the entry field.

bootstrap.

When you choose Bootstrap 4 floating label the field label will be displayed inside the entry field. As soon as something is entered, the field label automatically moves to the top.

Unfilled.

Filled.

# Default Status

Select the status a submission should get after the form has been used. For example, choose open if an action is required later on.

The list of available status options is usually set up by the developer. Go to the chapter Settigns for more information about this topic.

# Enable Ajax

Turn off when the full page should refresh after the form is submitted.

# Store Submitted Data

Turn off when the submitted data does not need to be saved in Craft. For example, when the completed form is emailed to you and nothing needs to be done with it later on.

# Success Behavior

Choose what the system should do when a form has been submitted successfully.

Setting Function
Reload Form with Success Message Current page shows success message.
Load Success Template After success, a predefined page is displayed.
Use Return URL After success you go to a pre-selected URL outside your website.

Additional options may appear when choosing a specific setting.

url.

Template.

Later on you still will have the opportunity to make changes to these settings in the Form Builder.

When ready choose Continue, you’ll be taken to the detailpage of the Form Builder.

# Form Builder detailpage

In this section of the tutorial, we explain the basics of the Form Builder and how to use blocks to build a form.

Form builder.

# Save

(image block 1)

save.

The red Quick save button allows you to save changes while staying on the page and continuing editing. Click the arrow next to it for more options regarding saving.

# Fields

(image block 2)

In this column you can find all available blocks. A cube represents an input field that you can use to build the actual form with.

One by one, drag all the required blocks to the large white canvas.

Drag.

You can also place blocks side by side by dragging them on top of each other.

Side by side.

Each block can only be used once.

New fields can be added with the Add New Field button. For more information on this topic, go to the chapter Fields.

Add new field.

# Canvas

(image block 3)

When creating a new form, you’ll start with an empty canvas. Together with all the blocks dragged onto it, it forms the layout of your actiual form.

A form can also contain multiple pages. With the plus button you create a new page. They can be deleted with the cross behind the title.

Tabs.

Click on the titletab to change it.

# Properties

(image block 4)

In this section, specific properties can be set. Like for example how the title of a submission should be constructed and displayed in Craft, or the content of the message when a submission succeeds or fails. Some settings we have seen earlier such as the handle, status etc.

More information can be found at Solspace (opens new window).

Basically it is not necessary to make adjustments to these properties for the form to work, these are specific settings. This is why we will not discuss them in detail in this tutorial.

This user guide is brought to you by WHITE Digital Agency. Visit white.nl to see more of our work.