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:[email protected]&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
margin-top: -30px !important;