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.
Subscribe to:
Post Comments (Atom)
Shame that "background" can't be modified, though.
ReplyDeleteEli, you can do background-color:red; or black or whatever, #000000 doesn't work.. why?
ReplyDeleteModifying 'background' works for me with !important:
ReplyDeletehttps://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.
ReplyDelete@Angelo:
ReplyDeleteUse 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:
ReplyDeletehttps://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:
ReplyDelete;}.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...
ReplyDeleteWhen 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,
ReplyDeleteAt 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
ReplyDeleteuse "\" 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,
ReplyDeleteYour 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. :-(
ReplyDeleteHopefully they'll do more then just patching the forms, by adding those needed styling and redirection options that we all crave.
--
Fsteff