Customize Google Forms

November 9, 2009

Google offers up a phenomenally easy way of creating a solid form you can integrate onto any site while integrating it into google spreadsheets on the back-end. However besides the preset themes they don’t offer up a way to customize it. ie. change the background color.

Here are some tips:

the form is embedded in an iframe, and it should use an embeddedform¹ type of URL
the iframe’s width and height as supplied by the Google form editor will probably need changing (to avoid scrollbars)
margin-width does not seem to work on the iframe, so one must use padding
the iframe has its colour and padding set as CSS styles in the <head> section of the HTML file
the padding leaves a white border around the form, so one must use the magic mantra allowtransparency="true" in the iframe tag [thanks to ahab for digging this out]
one must append parameters to the key URL (the string &pli=0&ttl=1&bc=F6D478&f=Comic+Sans+MS&tc=c00&htc=666&lc=090&hl=en-gb ):
- pli=0 – we don’t know what this does!
- ttl=1 – turns the title “Form and format tester” on (ttl=0 turns it off)
- bc=F6D478 – sets the background colour in HTML-style RGB hex format²
- f=Comic Sans MS – sets the font (I don’t think you can set the size)
- tc=c00 – sets the text colour in HTML RGB Hex format (you can use 3 or 6 figures)
- htc=666 – sets the help text colour, i.e. for info such as “Please give your name”
- c=090 – sets the link text colour at the bottom in HTML RGB Hex format (the green stuff)
- hl=en-gb – sets the language³ for the form (the Submit button and green link text)

This works more or less the same in IE7, FF3 and Chrome at least (XP and Chrome) – there are minor differences in the amount of space inside the table border, and the appearance of the border itself, but the most noticeable thing is that the [Submit] button and text boxes pick up the Comic Sans font in FF and Chrome but not IE.

You can google for some more complex ways of changing the CSS of the embedded code they offer up, but these switches were the simplest way I’ve found so far.

119 comments

{ 119 comments… read them below or add one }

kurt November 10, 2009 at 1:59 pm

cool tips! anyway i’ve some question, what Twitter widget plugin that you use in your sidebar? =D

admin November 11, 2009 at 12:57 pm: Thanks Kurt! it’s called twitter-tools, it’s fairly popular

Reply

Jerome December 14, 2009 at 8:03 am

Hi,

I created a google form with multiple pages which I later add to iWeb pages.
The problem is that when you submit the form the information in the previous pages gets lost.
Is there a way to link the pages together so that the information they contain doesn’t get lost?

Thanks for you help.

RoyDoreen18 May 18, 2010 at 10:04 pm

According to my exploration, millions of people on our planet get the home loans at well known banks. Therefore, there is good chances to get a small business loan in all countries.

Customize Google Forms

Hey There!

This site is built and SEO optimized using

Thesis Wordpress Design on Twitter

Thesis Wordpress Design around the Web