Form Building: The Customisation

How do you build your own form from the ground up? We're going to show you today, how to use each of the design options, so you can create your own form to the highest standard.

Once you are in the form builder; by clicking on the heading "Forms", and clicking on "create new form", you will be greeted by three options: landing (for creating a full page); embedded (for creating a section within a page), and pop up, for creating a splash image that appears on your page. I would recommend embed, in most instances, because it is the most flexible with website clients, because it is just a case of copying some code over.

Here's how to get started customising, once you are in:

This is what will greet you if you head into embedded content. 

Step 1: 

First things first >>

give it a title >>

select language >>

choose a background colour/image (optional) >>

play around with a font that you like (keep it clear and simple, Arial, Times New Roman and Helvetica work great) >>

Change the heading, and give some details in the subheading so people know what they are filling in information for!

Step 2: 

If the form looks good to you as it is, you can just go ahead and save changes and keep it as it is (skip to step 6). But if you are looking to get creative with forms, you can hover over any text box you don't want >>

press the bin icon >>

this will delete the content box and all information in it >>

this means you can refine your form to make it so that you only include relevant information.

Step 3:

This is where we'll show you how to add content to the form.

For example, if you want someone to give their title (Mr, Mrs, Ms, etc) you can set up a drop down box or a checkbox. 

Head over to fields >>

choose either dropdown or checkbox >>

drag and drop where you want it >>

click to edit >>

give it a description, or press hide field description >>

change the column layout to how you want; and choose whether or not it is an optional field, by toggling the "required" slider yes/no. >>

Next you want to choose the target field (which is what the options will be). Set it to "custom field 'x'  >> then press "add/remove options", which will look like this:

You will be greeted with a few options; click on each of the boxes, and change the text to whatever you want it to be  (in this case I have set up for a Title checkbox) >>

the description should be what you want the user to see and the key is just an abbreviated way of describing it (for example when you book a flight you'll see Manchester, MAN, for the key). >>

Press save once you have finished updating the information, and this new text will appear in your checkbox/dropdown box.

Note: If you want to make it so that users can select multiple boxes; or select all in the box-check format, change the slider that says bulk action controls from NO to YES.

Step 4: 

Creating an address group is a really easy way of adding all the boxes required for users to input their address.

Simply go to the "fields" heading >>

Address Group>>

drag and drop onto your form on the right >>

this will add everything from address lines, postcode, and country.

Step 5:

Nice easy one. To add dividers in your page just drag and drop the option "field spacer" for a blank gap. Or, alternatively, "field divider" to add a line, so you have clear, defined sections.

Step 6:

At the top of the fields bar, you will be able to see there are two sections, you will be automatically placed in "data capture"; but, if you want to move over to consent, you will see "marketing", and "data processing".

Drag and drop the marketing box into your form if you want people to be able to sign up for a mail list by ticking a box. Once you have it in your form,

click to edit >>

choose the target list drop down on the left >> select which mail list you would like this to give them access to.

For Data processing do exactly the same as above except you might want to change the error message so that if they fail to tick the box they cannot proceed with the form submission.

Step 7:

Add images if you like >>

click on images >>

drag and drop the image file into the box, and it will add it to the form.

Step 8: 

Change your success page. So once someone has completed your form and hit submit you want them to be able to be redirected to somewhere that says "thank you your form has been submitted" so they know that they can defer from the site now that it is complete.

To do this, simply hit the button at the top of your browser that says "success content">> you'll be greeted with this:

Keep it simple, change the heading, and subheading to text relevant to your form.

Step 10: 

Head down to submit heading >>

save data only (unless you have a workflow set up) >>

After "submit display success page" >> change the text style and button style to your choice.

We have run over a few points quite quickly as there are some very advanced features within the software, but, this will cover setting up a form so that you can have it up and running as quickly as possible.