Update: Google has added the tools to customize a form with logos, colours, fonts, and backgrounds. Use this guide if you want even more custom styles, or if you want to embed the form within another page.
I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something. After a bit of research I have found a way to create custom forms rather easily.
How to create a custom form
This is just the normal way to make a new google form. If you have made one before then just skip this.
- Create a form as normal
- Click the view live form
- Copy everything inside the form tag including the form tag itself
- Create a new blank HTML file
- Create an empty div with a container class
- Paste all the form markup inside there
- Link the style.css stylsheet
- Test the form and check the response in Google drive
Hosting the form
Edit: This feature is no longer avaliable to the new google drive.
Something relatively new to Google drive is the ability to host static HTML pages.
- Create a public shared folder
- Upload all your static html files
- Open the index.html file in drive and click the preview button
- Copy the link to the page it sends you too
- Share that link with whoever because you are done!
- This is how the demo form is hosted.
As a starting point I basically just copied the stylesheet from the default Google form page. Then I took all the colors and placed them into variables. The stylesheet needs to be stripped of things not necessary.
I do not want to add any extra markup to the pages. The idea hear is to just copy the form mark that Google gives you and then just add a stylesheet that will make it themed.
Think themes for bootstrap. Markup stays, stylesheets change.
But right now I am just going to try and normalize the current stylsheet into something as default as possible so that I can then create a my-theme-name.css file that contains all the variables to do the styling. I am currently only using the variables in LESS but eventually I will use more of the feaures to get everything nice and themeable.