Adding custom CSS to your Form

Here is a quick overview of how to customize CSS of your form to make it look exactly how you need it. The Custom CSS option is available via Design tab > Advanced Settings.

This is helpful if you would like to change the font, color, spacing etc.

It's recommended to keep your modifications to a minimum, in the event that there are future global changes made from our end, otherwise we'll be fighting over the same style... and things might get messy!

1. Add custom fonts from Google Fonts

Go fonts.google.com
Select embed option - @import and copy the highlighted import area

Go to Custom CSS editor which is available at the bottom of Design tab > Advanced Settings
and paste this code

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

* {
--global-font: 'Roboto', sans-serif !important;
}

* {
--title-font: 'Roboto', sans-serif !important;
}

This will apply Roboto font for both titles and text blocks of your form.

Change 'Roboto' to the font name which you try to apply.

2. Reduce form's top spacing

Go to Custom CSS and paste this code

.designed-form-container {
margin-top: -30px !important;
}