How to modify styles using css in a Google Form

Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.

The need:

In the time of COVID-19 crisis, Centre of Small & Medium Enterprises are hosting regular training programs online to make SMEs prepare themselves and their employees for the safety measures when they reopen businesses. The center, envisioned to create neat and simple training registration form like this.

Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.

The challenge:

Google Forms, by default, did not offer them to change the theme and font color beyond some extent. The standard UI and the layout could not be altered much to match the style they wanted.

Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.

The solution:

Formfacade add-on helps them to design this above Google Form look like what they envisioned.

I will walk you through the transformation of the form - with a detailed step-by-step guide. Here is the template of the form I used here.
https://docs.google.com/forms/d/1G5xiZseqDCTodj2g7R4cG9qRFvODWRbt8KSCDM_Pbzo/copy

Make a copy & join me below in customizing and adding CSS to the form elements to match the style.

Step 1: Preparing Google Form for customization

1. Install Formfacade add-on. Please refer to this article here: https://formfacade.com/website/install-formfacade-on-individual-account.html
2. Open your Google Form. Here is the template of the form I used for this tutorial
https://docs.google.com/forms/d/1G5xiZseqDCTodj2g7R4cG9qRFvODWRbt8KSCDM_Pbzo/copy
3. Click on the add-on icon and select "Formfacade"

Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.

4. Select "Customize this form" from the popup menu.

Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.

5. This selection will take you to Formfacade’s customization interface. Here, your Google Form is displayed as a neat HTML form. Clicking on the gear icon next to the Form title and the form fields will show you more options to customize.

Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.

6. Click the gear icon next to the form title, "Training Registration" to open up the side bar that has customization options for the form. Click on the "Layout" tab to change the layout to 2-column.

Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.

6. On the same side bar, click on the "Colors" tab to change the colors for the form.

Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.

6. Look at the side-by-side comparison of both the forms - The sample form and your Google Form getting a make-over with Formfacade.
Almost there, right? But wait!
There are some more little things to be adjusted to the title
- Title has to be in Crimson red - Hex code #DC143C or rgb(220,20,60)
- Title needs to have a white bar background and extended from end to end.
- The description has to stay in black. And to be centered.
- Padding needs to be adjusted all over.

Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.

7. Let's do "Inspect element" and see what CSS will fit.

Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.

8. I made these adjustments in "Inspect element" and arrived at this CSS code below.

.ff-title {
color:#DC143C !important;
padding: 20px !important;
background-color: white;
position: relative;
transform: translateX(-4%);
width: 109%;
}

.ff-description {
padding-top: 20px !important;
align: center !important;
}

.ff-form {
padding: 0px 30px !important;
}

.ff-compose {
padding: 0px !important;
background: none !important
}

.ff-section {
padding-top: 0px !important;
}

8. Now let me add the code to my form. I go back to Formfacade's admin interface and click on "Advanced" tab.
9. Watch the video below to see how the form is transformed when I add the code one by one.

And, here is the final form. Looks awesome! Isn't it?
How do you like such customization. Show us your designs and write to us at support@formfacade.com.

Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.

Bonus!

Here is a table of comparison between what customization are possible with Google Forms and Formfacade.
1. Identify the desired customization that you want for your form/field from this table.
2. Click on the linked article for a detailed step-by-step tutorial to achieve the design you want.

Make your Google Form look great on your website. Happy designing!

Form Google Forms Formfacade
Layout Standard one column Multi-column
Background/Theme color Yes Yes
Button color No Yes
Form fields No Yes
Change Font settings
Font color ? No
Font style ? Yes
Advanced CSS styles No Yes
Fields
Change Placeholder Text No Yes
Appearance (Hidden/Read-only) No Yes
Change the question name? No Yes
Pre-fill Yes Yes
Calculated Fields No Yes
"Advanced customization (formatting text - bold italics)" No
Conversion Tracking No Yes
Hotjar integration No Yes
File upload "Drive requires sign-in"
Find out how to change colors, fonts, alignment of Google Form questions to match your website theme. You can also change the layout of your form to two-column or even four-column.
Made with formfacade