How to Change the Colors of File Upload Forms

Published in: File Upload Forms

File Upload Forms use the Materialize CSS framework that conforms to Google’s Material Design. The color palette is based on the material design base colors. The form layout is also responsive meaning they work on both desktop and mobile devices.

If you would like to change the default color theme of your web form, you would need to update the CSS of your form. To get started, open the Google Sheet associated with your File Upload form, go to Tools > Script and switch to the css.html file.

Here, let’s look at body class which has background color set to #e0f2f1 (a shade of green). You can replace this value with any other hex color to change the background color of your web form.

The form structure has the body, the upper section (ctrlqHeaderMast), the accent line (ctrlqAccent) and the actual form box (ctrlqFormContent).  The submit button is .btn-large.

You can apply the styles to the corresponding class or HTML element to format it. Here are some CSS styles that will change the color theme to dark gray.

body { background: #455A64; } .ctrlqHeaderMast { background: #607D8B; } .ctrlqAccent { background: ##CFD8DC; } .btn, btn-large { background: #455A64; } .btn:hover, .btn-large:hover{ background: #607D8B; }

After you have updated the colors inside css.html, save the file and then go to Publish > Deploy as Web App and publish a new version of the app.

Please remember that the new colors would only be applied after you publish a new version of the web app.

See Google’s own color palette for recommended set of colors of material design.

Published in: File Upload Forms

Looking for something? Find here!

Meet the Author

Web Geek, Tech Columnist
Amit Agarwal

Amit Agarwal is a Google Developer Expert in GSuite and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. Read more on Lifehacker and YourStory

Get in touch