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
  • 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('');

* {
--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;
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.