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.
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.
Subscribe to:
Post Comments (Atom)
12 comments:
Shame that "background" can't be modified, though.
Reply DeleteEli, you can do background-color:red; or black or whatever, #000000 doesn't work.. why?
Reply DeleteModifying 'background' works for me with !important:
Reply Deletehttps://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE&f=%20;}body{background:yellow%20!important}
I think the reason # isn't working is because # is a special character in HTTP URLs which is used by the browser to jump to an anchor on the linked page. For instance: http://en.wikipedia.org/wiki/Rock_band#Rock_and_pop_bands
It will a be a great idea to implement such options in a web browser, like Firefox.
Reply Delete@Angelo:
Reply DeleteUse rgb(red, green, blue) instead. For example:
https://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE&f=;}body{background:rgb(200,150,100)%20!important;}
The background colour can be modified through the bc URL parameter, like this:
Reply Deletehttps://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE&bc=ffff00
You can change the background provided the color is specified in R, G and B values and not with a hex value starting with a # (which is filtered by the browser), such as this:
Reply Delete;}.ss-form-container{background:rgb(156,165,120) !important
Additionally you can add an image this way:
;}.ss-form-container{background:rgb(156,165,120)%20url('http://tigerlilly.dk/fsteff/images/Fsteff-party.jpg')%20top%20no-repeat%20!important;
It looks great but...
Reply DeleteWhen the submit button is pressed, all formatting is gone.
Is it possible to change the view of the confirmation https://spreadsheets.google.com/formResponse?
Jan,
Reply DeleteAt this moment I don't see any way it's possible to change the formResponce, nor restore the formatting when returning to the page (As allready mentioned on the trick test site). The trick with injecting css only allows to change the representation, not the actual contents.
In order to preserve the formatting it will be nessary to find a way to inject javascript... Or some other secret parameter build into the embedform by the good Google folks.
To use your own CSS file, for example: http://yourdomain.com/example.css
Reply Deleteuse "\" for special characters
Insert this at the end of the url:
&f=;}\%3C\/style\%3E\%3Cstyle%20type\=\%22text\/css\%22\%3E\@import%20url\%28http\:\/\/yourdomain\.com\/example\.css\%29\;{
Nicodicoco,
Reply DeleteYour comment made me realize how to also inject javascript.
Check the details here:
http://tigerlilly.dk/fsteff/2009/11/google-forms-revealed.html?showComment=1258722699621_AIe9_BFE-q8qNrNT3jkSq-wqi_DKHEQAHDWhSbHTPbXbUjwBVLf6LDhd4Q0ub4dn1cUQPXYUbQXUEaS3mULw2YpZxO-dNdQi0hgicb5vGLIeoKr3Cupl-i_5mwXglWkCYHHtzRNR6pJCuVDHcCW13-Tfsfd_Tb2jm_l5-SPcoTLW0NOX9dE-YVa_uy7pC3vea_07jT-8DtOF0LcW3O_TpA3x31hQpuVSWn0Cgz_LhblCi4fK-d3lsH0#c6350673246170381103
Sorry to inform you all, but it seems Google patched the &f parameter, rendering this hack utterly useless. :-(
Reply DeleteHopefully they'll do more then just patching the forms, by adding those needed styling and redirection options that we all crave.
--
Fsteff
Note: Only a member of this blog may post a comment.
[フレーム]