Style Your Form
Make the form look like it belongs to you
The styling screen controls how your form looks: its colours, the size and shape of its inputs, its buttons, its heading sizes and one behavioural setting. A live preview sits beside the controls and updates as you change them.
Styling matters more on a form than on most pages. A form that looks like it belongs to your business gets completed more often than one that looks generic or, worse, looks like it belongs to someone else.
Steps
Open the styling screen
During a form's first build, this is the screen after the field builder.
For an existing form, go to Sales → CRM → Forms, open the row menu and choose Manage Styles.
Set your colours
There are three colour groups.
Form Colors set the overall look — background and primary colours.
Supplementary Colors cover accents and secondary elements.
Input Colors control the fields themselves: their background, border and text.
Check contrast as you go. Light grey placeholder text on a white field looks elegant and is hard to read, especially on a phone in daylight.
Choose input sizes and shapes
Input Styles has two settings.
Height runs from Small through Medium and Large to X-Large. Medium or Large suits most forms — Small is difficult to tap accurately on a phone.
Corner rounding runs from Square through Slightly Rounded, Nicely Rounded and Quite Rounded to Almost Circular and Pill Shape. Match whatever your website does.
Style the buttons
Button Styles sets the appearance of the form's buttons. Make them clearly clickable and distinct from the form's background — the submit button is the one element every visitor needs to find without thinking.
Set the submission behaviour
Behaviour has one setting: Force Continue Button.
Turn it on and the person must click a button to move forward through the form. Leave it off and the form advances on its own as questions are answered.
Automatic advance feels quick on a short form. A forced button gives people a moment to check their answer, which is worth having on anything long or detailed.
Set heading sizes
Headings sets the size of each heading level used on the form, from H1 down to H5, each from Small through to XX-Large.
Keep the steps between levels distinct. Headings that are nearly the same size stop working as structure.
Check the preview and save
The preview beside the controls shows your live form. Resize your browser window narrow to check the form at phone width before you save.
Saving a Draft form's styles takes you on to Form Actions. Saving a published form's styles returns you to My Forms.
Tip: Body text on a form should never be smaller than 14px, and 15 to 16px is better for anything someone has to read carefully. Small text is for timestamps, not for questions.
Result
Your form matches your brand and reads well on any screen. If this was the first build, you are now on the Form Actions screen — and saving that screen is what publishes the form.
