How to style your forms
You can style all your forms completely to your needs, for example to meet your company's brand. You can start simple with just one base color, or modify each element's appearance in your form.
Before we start styling
Let's start with a few things that could be handy while styling your forms.
Use live preview
The live preview in the form builder is your biggest friend while styling. It will always update what you're doing, so everything you do to style your forms, will immediately be visible in the live preview.
For all color fields you can style, there are a few ways to enter your colors:
- Color name - This is the easiest way to add some color. Just type the name of one of the 140 predefined colors that work in all modern browsers. For the full list, have a look at this page;
- HEX color code - Need a custom color that's not on the color names list? Just enter any HEX color code, prefixed with a
#. Have a look over here to select the right color from a color picker or get some inspiration from a color chart;
- RGB color code - Rather use the RGB notation instead of HEX? No problem, just enter your RGB color in the right format
About color contrast
Always make sure your form stays well readable while applying colors to it. The form will automatically try to keep the right amount of contrast, but you can always overrule that with your own color settings.
Let's start styling 👨🎨👩🎨
At the top menu bar of the form builder click
You can start off with selecting just one simple base color. That color already will have a major effect on the styling of your form, as you can see in the live preview.
It depends on the selected form face what the effect of this base color is.
Next step that has a major impact on your styling is the font style selection. To enable font styling, activate the
Font option in the Styling pane.
You can simply select one of the predefined fonts that work in all browsers, but if you really want to show off you also can use a Google Font or your own font.
All Google Fonts are directly available to use in your form. In the font selection, choose
Google Fonts or URL.
Now open Google Fonts and search for a font that you'd like to use in your form. Then switch back to the form builder and enter the name of the Google Font of your choosing. Keep in mind Google Fonts are case sensitive.
Custom font from URL
Want to use your own custom font? In the font selection, choose
Google Fonts or URL and enter the URL to your font file.
After you selected the right font, you can set the font size. The font size will also have its effect on other form elements, like the size of input fieds, buttons and icons.
To style the background with a color and/or a background image, activate the
Background option in the Styling pane.
You can now supply a background color as a color name, HEX code or RGB code.
You can also add an image as the background of your form. You can enter the URL to an image and then determine how the image must be positioned over the screen size.
Input fields of course are an important part of your conversational forms. To enable input styling, activate the
Inputs option in the Styling pane.
Input fields are common form elements, like text fields, checkboxes and radio buttons. Those are all stylable by multiple colors, border size and roundness. Just play with them and see the result in the live preview.
Some question types, like Multiple choice, Rating and yes-no are presented with input buttons. You can style the following states of those buttons:
- Selection color - The color of buttons used in Multiple choice and Rating blocks;
- Agree color - The color of
Yesbuttons used in yes-no blocks;
- Decline color - The color of
Nobuttons used in yes-no blocks;
Buttons are used in several places, like start buttons, navigation buttons and complete buttons. To enable button styling, activate the
Buttons option in the Styling pane.
Buttons are stylable by color and style. With the button style you can determine if the buttons should be filled with the desired color, or shown as a button with only border coloring. The roundness sets the border radius of your buttons.
Complete button of course is an important one, so you can set a custom color for that button.
Example: Whatsapp styling
To show you how powerful styling is we made a demo on replicating the Whatsapp styling in our chat form face with only a few styling options 🤯
Custom styling per form face
This is how you can style your forms, but each form face also has its own additional settings and styling options to improve the finishing touch. Click the help articles below to see these options for each form face.