Design & Customise the Appearance of a Form

Details

It's easy to customise the appearance of a form - everything from re-ordering the fields to changing the font, colour scheme and adding extra text or images to your form.

Looking to do more with your webforms - such as use multiple pages, conditional fields, data submission to multiple lists at the same time, custom styling and so on? If your site runs WordPress, why not use our integration with Gravity Forms - where you can achieve all of the above & more!

How-to Guide

This article contains a number of guides for various related topics. Click below to jump ahead to a particular guide.

• Edit Form Colours, Fonts, Padding, etc
• Show or Hide Form Fields
• Add Text & Images to a Form
• Reorder Form Fields
• Import the Design From Another Form
• Add a New Field to a Form or List, or Edit a Field (this goes to a separate article)

Edit Form Colours, Fonts, Padding, etc

1. Select Lists and Forms from the sidebar.
2. Double-click on the list that you'd like to see the forms for. All of the forms associated with your chosen list will now appear as different tabs near the top of the screen.
3. Select the tab that corresponds to the form you'd like to edit.
4. In the Design panel to the right, set your desired form background, page background, border and font options. You can also set the form width. Additionally, we have a number of pre-made colour schemes you can choose from. Within the same Design panel, you can also click Advanced Settings to reveal additional customisation options such as margin, padding, corner rounding and so on.
   
5. Finally, clicking on any of the fields within your form will also reveal field-specific options on the right hand side in the Design panel - such as whether the field should be mandatory, padding & colour options, etc. Adjust these as required on each of your fields.
   
6. Once done, click Save.

Show or Hide Form Fields

1. Select Lists and Forms from the sidebar.
2. Double-click on the list that you'd like to see the forms for. All of the forms associated with your chosen list will now appear as different tabs near the top of the screen.
3. Select the tab that corresponds to the form you'd like to edit.
4. In the Fields panel to the right, click the 👁️ icon (as shown) against a field to hide / show it. Click it again to do the opposite.
   
5. Once done, click Save.

Add Text & Images to a Form

1. Select Lists and Forms from the sidebar.
2. Double-click on the list that you'd like to see the forms for. All of the forms associated with your chosen list will now appear as different tabs near the top of the screen.
3. Select the tab that corresponds to the form you'd like to edit.
4. In the Components panel to the right, click Add next to the component you wish to add.
   You can add images into a Paragraph component.
5. Once you've added the desired component(s) onto the form, you can click into them to start adding text and/or images as desired. In the example below, you can see we have added some text and an image (logo) into a Paragraph component - the insert image option on the toolbar is highlighted for your reference.
   
6. Once done, click Save.

Reorder Form Fields

1. Select Lists and Forms from the sidebar.
2. Double-click on the list that you'd like to see the forms for. All of the forms associated with your chosen list will now appear as different tabs near the top of the screen.
3. Select the tab that corresponds to the form you'd like to edit.
4. Selecting the field on the form you wish to move and drag it around above / below other fields, to the desired location.
   
5. When done, click Save.

If you wish to change the order of the field headings / columns in your database, this can be done in the Contacts section: Reorder Fields in the Contact View, Spreadsheet View or in a Contact Download.

Import the Design From Another Form

1. Select Lists & Forms from the sidebar.
2. Double-click on the list in question, to navigate to the forms for that list. The various forms attached to your selected list will now appear as tabs.
3. Click on the form tab that corresponds to the form you wish to edit.
4. Open the Advanced Settings panel to the right.
5. Click Import Design from another form. You will then be able to select (and preview) the form that you would like to import the design from.
   

This will only import the design from another form in your account. You will still need to customise the fields.