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.

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.

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"

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

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.

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.

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

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.

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

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.

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"

Formfacade

Formesign

Neartail

Promptrepo

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.