To find out how to create a form in Form Builder, please refer to the article here:
There are plenty of different editing options available to use in Form Builder, this article aims to help understand these definitions, and explain what all the functions are.
Settings
The Settings tab relates to the form as a whole. You can access the form's settings by clicking on the cog icon next to the name of the form in the top left of the window:
The editor will then appear on the right-hand side, with 5 tabs. The same options appear per field too, so you can switch between editing the form as a whole, or specific fields. The tabs all have the same purpose - you just need to remember whether you're in the Form Settings, or Field Settings and to flick between 'Label' and 'Input' when in Field Settings:
Basic
This contains the name of the form and allows you to establish the spacing of the general form. By default it's set to 15px, but you can increase/decrease this as you wish:
Font
This allows you to select a font you'd like to use as the default for the rest of the form, specify a size, align the text and style and choose the colour of the default text:
Size
Width:
To specify what %age of the snippet column you'd like the form's width to fill
Max Width:
If your form's width is larger than the width %age you can specify a maximum width in px. The absolute maximum for a Microsite is 1200px.
Margin (px):
You can click the '-' within the orange border to set margin spacing. This will add spacing around the Form container as seen in the screenshot below:
Padding (px):
Clicking the '-' in the green border will add spacing within the form container as seen in the screenshot below:
Border
You can add a border around your form here and increase the width, radius (rounding the corners) and select the colour of the border:
You can also select the style of border you like:
Background
This allows you to set a background for the full form, you can either input a HEX code or choose from your existing brand colours:
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.
Basic
When you're editing the components themselves, the 'Basic' tab has a slightly different interface to the above:
Name: This is the name of the actual input field used for back-end purposes, this is a system name which isn't available to edit in the front-end.
Label Text: This is where you can name the field e.g. 'Your Name' or 'First Name' - you can choose whatever name you give it here. This appears above the text box, indicating to your contact what data you require them to fill here. Or, you can click the plus icon to pre-populate the field with data in a specific data field.
Placeholder Text: If the data doesn't exist in the portal, this is where you choose what text you'd like to show instead. Or, if you're not pre-populating the field - this acts in the same way as the Label Text if you're choosing not to show the label option (please see the note below).
Input Value: This is the data field in Force24 you're pulling the pre-populated data from, this can also be used to populate an actual value for use with Hidden Fields.
Please note: You can choose whether to show/hide both the label and placeholder options, so you're not obliged to show both. You can either have a label and no placeholder, or vice versa.
Validation
This is for you to specify if you need to have a mandatory field in the form, and to apply minimum/maximum character count to the data input fields. You can also choose the validation format you'd like the field submission to be in, i.e. Number/Date/Free Text etc.
Hidden Fields
You will see this option available under the form template. This allows you to create fields that are hidden to the user, but allow you to assign fields to certain data fields in Force24 e.g. Aux Fields which will allow you to use in contact search in future so you can identify this form criteria in a single contact view.