Testing an input form

How do we do this?

I suggest you “View source” and download the HTML.... I have appended a few notes at the bottom.

The key points

Most of the information in this section is courtesy of ahab.

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. In IE6 it apparently shows a horizontal scrollbar though I don’t know why.

I cannot find a way to change the following:

the colour of the box around the “Is this box helpful?” radio buttons.
font size
line spacing
size or colour of the word “Required * ”
the font used in the text boxes
the appearance of the confirmation box, or that of the form returned to the user if a required field is not filled in
the appearance of the form if someone clicks the “Go back to the form” button on the confirmation box

Footnotes

¹ Note the embeddedform kind of URL uses the same key as the spreadsheet the submits go to! This is unlike the default viewform type of URL which does not allow any modifications to the format. Also note the embeddedform type of URL automatically creates a Go back to the form link in the confirmation (Thank you!) page.

² e.g.
Red: FF0000
Green: 00FF00
Blue: 0000FF
Cyan: FF00FF
Yellow: FFFF00
Magenta: 00FFFF
Black: 000000
White: FFFFFF

³ Language codes (again thanks to ahab):
"ar" >العربية (not available)
"bg" >Български
"id" >Bahasa Indonesia
"bn" >Bengali
"ca" >Català
"cs" >Česky
"sr" >Српски
"da" >Dansk
"de" >Deutsch
"en" >English (US)
"en_UK" - ["en-uk"] >English (GB)
"es" >Español (España)
"fil" >Filipino
"fr" >Français
"gu" >Gujarati
"it" >Italiano
"kn" >Kannada
"lv" >Latviešu
"lt" >Lietuvių
"mr" >Marathi
"ml" >Malayalam
"hu" >Magyar
"nl" >Nederlands
"no" >Norsk
"or" >Oriya
"pl" >Polski
"pt_PT" - ["pt"] >Português (Portugal)
"pt_BR" - ["br"] >Português (Brasil)
"ro" >Română
"sk" >Slovenský
"sl" >Slovenščina
"fi" >Suomi
"sv" >Svenska
"ru" >Русский
"th" >ภาษาไทย
"ta" >Tamil
"te" >Telugu
"tr" >Türkçe
"uk" >Українська
"el" >Ελληνικά
"iw" >עברית (not available)
"hi" >हिन्दी
"vi" >Tiếng Việt
"zh_CN" - ["cn"] >中文（简体）
"zh_TW" - ["b5"] >中文（繁體 )
"ja" - ["jp"] >日本語
"ko" >한국어