An unofficial blog that watches Google's attempts to move your operating system online since 2005. Not affiliated with Google.

Send your tips to gostips@gmail.com .

November 11, 2009

CSS Injection in Google Docs Forms

Flemming Steffensen found an undocumented trick that lets you customize a Google Docs form by injecting CSS.

Let's assume that the URL of your form is:

https://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE

You can add some new CSS rules as a value of the f parameter:

https://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE&f=;}body{font-size:14pt!important}.ss-q-title{color:green}

Here's the result.

The most important things to remember:

1. the value has to start with ;}
2. you need to use !important for some of the rules to override existing values
3. check the source code of the form to find the classes used by Google
4. this a trick that may no longer work in the future.

For more parameters that let you customize Google Docs forms, check this test page.

This blog is not affiliated with Google.