Introduction to Forms

Create beautiful, user-friendly forms in minutes. No coding skills required. You can design beautiful, complex forms like a pro. Easily create fields of 11 different types, drag-and-drop them into position, then easily add your form to any page on your website via BlockLab.

To find forms head to Content > Forms > Manage Forms:

Creating a form

To create a form, click on 'New Form' to find the Form Builder:

The first step to take is to give your form a name at the top of the 'Form Info' area:

Now the form has a name, the next step is to add the fields we want the form responder to fill in.

Form Fields 

Form fields are where you can add new fields. There are a range of different fields you can add to the form you are creating:

Text Input: For the customer to type in the section.

Multi-line Text: For the customer to type in the section with no word limit

Dropdown Menu: Allows the customer to select a number of options in a dropdown

Multiple Choice: Allows the customer to select from one of the radio button options

Checkboxes: Allows the customer to tick multiple checkboxes

Spinner: Brings the customer to a spinner loading screen before directing to the Completion page

Rich Text Content: Custom text which you can add and the customer cannot change.

Date Input: Allows the customer to choose a date

reCAPTCHA: Adds a Google reCAPTCHA human verification checkbox to your form to protect it from unnecessary spam and abuse

Page Identifier: If you have one form placed on multiple different pages on your site, use the Page Identifier field to track what page the responder was on when they submitted their response. This field is only visible to you.

File Upload: Allows the responder to upload a file with their form response.

Editing a field name

Select the label above the field and type in your new label name.

Editing option fields

Dropdown menu, multiple choice, and checkboxes are all fields that provide a responder multiple options to choose from. To add multiple options to one of these fields, press the green and white plus icon to add a new option, and rename it as you would with a normal form field.

Required Fields

To make a field compulsory to complete, tick the 'Required' box beside the field.

Adding a page break

If you are asking for a lot of information on a form, breaking up the form into multiple pages can make the user experience much better. Bitesize chunks of 2-3 questions per page can make an arduous looking list of required responses breeze by. To add a page break to your form, click the red Page Break button. This will appear as 'Next' and 'Previous' buttons to the customer when filling out the form.

Styling your form's buttons

You can design and customise the buttons of the form, by changing its name, colour, padding, border, and corners.

Completion page

Customise the message someone sees after submitting their form response in the Completion Page area:

The message saved here will be shown to the form responder once they have filled out and submitted the form.

Adding tracking to your form responses

If you would like to track form submissions in your analytics, use the completion page URL as the destination:

To set up the tracking goal, head to your Google Analytics account and follow these steps:

1. Log in to Google Analytics
2. Go to "Admin"
3. Under "View" click "Goals"
4. Click "New Goal"
5. In "Goal setup", select "Contact us" as your "Template" unless another option suits your form's purpose more closely, then click "Continue"
6. In "Goal description" give your goal a name such as "Sales Enquiry", then click "Continue"
7. In "Goal details" select "Equals to" from the Destination dropdown and copy and paste the Completion page URL into the input box.
8. Save your goal. Let Google Analytics update itself for a few hours before testing your form then wait further 24 hours before checking Google Analytics conversion/goal stats to ensure your form submission was tracked successfully.

Form response notifications

Receive email notifications when forms are submitted. To check if the right email address is set up to receive form responses, take the following steps:

Head to Settings, then Notifications and Emails.

Once in the notifications area, you will see all the available notification and email settings for your whole website. At the bottom of the index list of event notifications you will see events relating to form responses:

Click on the form response you wish to edit the notifications for in the list, and you will be taken to the notification edit screen. 

Here you can add in other email recipients for when a form response is submitted:

Viewing and exporting your form responses

Every submission is also logged in your admin system for safekeeping:

 Click the form name to edit an existing form, or click on the "View X responses" to see individual responses to your form. A bulk spreadsheet of responses can be downloaded to CSV at any time, by clicking Export to CSV:

Adding a form to your website design

To add your form to your website design, open the page you wish to add the form to in BlockLab, and add a Form block to your page:

When you add the form block, you will see a list of available forms to add. Select the form you wish to add:

You can also set the form display to appear Vertical, Horizontal, or as a Pop Up. Additionally you can add a Header and Footer to the form. Once you have things set as desired, press Save. Then Publish your layout to see the form on your live website.

For more information on adding your newly created form to your website's design in BlockLab, check out our BlockLab resources.