How to Create a New Form

A step-by-step guide on how to create a form within Force24.

Here we will show you how to create a new form that you can use on your website or on our Force24 landing pages. If you have already created your form, you can follow the steps here on how to insert these into your microsite:

How to insert a form into a landing page

How to link an external form to your website

To create a new form, firstly you need to click on 'Forms' under the Design tab on the left-hand side:

At the top of the page, click on the 'New form' 

Here you can search in your library for an existing form 'Pick a template' , or create a new one by clicking 'Blank canvas':

Your form will then open up like the below:

Components and Form settings below 

If we click on the form settings, here you can adjust the default settings of the form such as font, border and background colours.

The Settings tab relates to the form as a whole. You can access the form's settings by viewing the column on the right hand side of the Form Builder page:

Form Appearance

This contains the name of the background colour of the Form. By default it's set to #000000, but you can change this as you wish:

Form Border

This is where you can set the border you would like your form to have, as well as the colour, style, radius and width.

Form Spacing & Size

Max Width: You can specify a maximum width in px. The absolute maximum for a Landing page is 1200px.

Padding (px): You can specify the padding of your form in px.

Form Height (px): You can specify a maximum form height in px.

Field Settings

Font, Size, Border and Background follow the same definitions as above, they just apply to the selected fields rather than the form as a whole when you've clicked the Field to edit.

But the Basic section of the settings looks slightly different when you are editing a field:

To start building out your form, you can do this by dragging and dropping the components in from the left hand side. It is important to ensure that for the field you include match the data types you will be mapping these to for the form to be valid. 

Note: When inserting an Email or Phone field, you'll need to select these specific components from the left-hand menu. If you add a text input field for email, this will show as invalid and not allow you to map this.  

Once you have dragged your component across, the example below is the 'Headline Text' component, the edit field opens up for you to add your text, change font, size and add background colours here.

A glossary of these editing terms can be found here (link to glossary article)

If you need to delete a field or duplicate, you can do this by clicking on the bin icon in the top right hand-side of the edit field.

You can add a placeholder text and an input value in the fields below, you can also choose whether the fields are required, if you need to ensure you collect specific information from the recipients completing this. 

You can add check boxes for single selection queries, multiple selection or have the option to add a drop down menu;

Single

Multiple

Drop down

You can also add free text to the form. To do this, drag and drop the 'text input' field from the left-hand side:

To amend the form as a whole, if you click on 'style', this is where you can amend the background colours, font and borders.

Once you have built the structure of the form, and made the necessary edits using the Glossary, you then need to decide where you'd like the form fields to 'map' to, in the Force24 platform. This article will explain How to do field submission mapping

If you have any questions, feel free to reach out to us through the live chat function available at the bottom right, in your Force24 Platform. Our team is ready to assist you and provide support whenever you need it.