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.

12 comments:

  1. Shame that "background" can't be modified, though.

    ReplyDelete
  2. Eli, you can do background-color:red; or black or whatever, #000000 doesn't work.. why?

    ReplyDelete
  3. Modifying 'background' works for me with !important:

    https://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

    ReplyDelete
  4. It will a be a great idea to implement such options in a web browser, like Firefox.

    ReplyDelete
  5. @Angelo:

    Use rgb(red, green, blue) instead. For example:

    https://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE&f=;}body{background:rgb(200,150,100)%20!important;}

    ReplyDelete
  6. The background colour can be modified through the bc URL parameter, like this:

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

    ReplyDelete
  7. 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:

    ;}.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;

    ReplyDelete
  8. It looks great but...

    When the submit button is pressed, all formatting is gone.

    Is it possible to change the view of the confirmation https://spreadsheets.google.com/formResponse?

    ReplyDelete
  9. Jan,

    At 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.

    ReplyDelete
  10. To use your own CSS file, for example: http://yourdomain.com/example.css

    use "\" 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\;{

    ReplyDelete
  11. Nicodicoco,

    Your 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

    ReplyDelete
  12. Sorry to inform you all, but it seems Google patched the &f parameter, rendering this hack utterly useless. :-(

    Hopefully they'll do more then just patching the forms, by adding those needed styling and redirection options that we all crave.

    --
    Fsteff

    ReplyDelete