Adjusting the layout and button of your form

You have built a good-looking form, but the sign-up button is too small, the fields could do with being a bit larger, or there is unexpected white space in it. Do not worry: everything about the layout of your form can be adjusted, without you having to write any code. In this article we walk through the options step by step.

1. Adjusting the sign-up button (text, size, colour) #

The sign-up button has its own settings panel in the form editor:

1. Go to Forms → Forms and click Edit next to your form.
2. Move your mouse over the sign-up button at the bottom of the form. A pencil icon appears next to the button.
3. Click the pencil icon. The Customise input panel now opens on the right with all the button settings.
4. Adjust whatever you want:
   • Button text: the text on the button (or choose an image as the button).
   • Button size: choose Small, Medium or Large. This is the quickest way to make the button bigger.
   • Button style: background colour, text colour, border colour and border radius (rounded corners). You can set this separately for the normal state and for the moment a visitor moves the mouse over it (hover).
   • Min. width: if you want a wide button, enter 100% here, or a fixed number of pixels.
   • Content alignment: button on the left, in the middle or on the right.
5. Click Save Form at the top right to save.

2. Adjusting fields (labels and layout) #

Every field has its own settings in the same way:

1. Move your mouse over the field and click the pencil icon.
2. In the Customise input panel you set, among other things:
   • the label and the placeholder text of the field;
   • Label placement: label above, to the left, to the right or below the field, or hide the label entirely;
   • under Advanced options, extra settings such as field width and CSS classes.

3. Styling the whole form in one go: Preview & design #

Do you want to make the fields bigger, adjust colours or give the complete form a different look? Then use the built-in styler:

1. Open the form through Forms → Forms → Edit.
2. Click Preview & design at the top right. You now see a live preview of your form with the design settings on the right.
3. At Form style template you can choose a ready-made template as a starting point.
4. Tick Customise selected preset. Sections now appear that let you style each part separately:
   • Input & Text Area: this is where you make the input fields bigger. Adjust the padding, text size, colours and borders of all fields in one go.
   • Style of the Submit button: the same button settings as in step 1, but with a live preview next to them.
   • Label styles and Placeholder: colour and typography of the field labels and of the grey example text in the fields.
5. Click Save at the top right: the styling applies immediately everywhere the form appears.

Related articles #

• Introduction to forms
• The duplicate function for forms