Saturday, September 17, 2011

Embed Image in Google Form

In this post I'll present an easy way how to style a Google Form and embed images.

If you need to conduct an online survey, Google Forms is a great and free alternative to commercial products like surveymonkey. However, the possibilities to style your Google Form are quite limited. In particular, it's not possible to add images.

There are other ways around these limitations using some JavaScript magic as suggested on other blogs. But these tend to break or get rather complicated when form validation is involved or your survey has multiple pages.

This solution uses a simple PHP script, which should run pretty much everywhere. It proxies the requests to Google and makes any changes to the form you'd like to have. Instead of calling the Google Form directly, your visitors have to call the PHP script. As demonstrated here.

To configure the script you only have to add the replacements you like to make in this array.

$replacements = array(
 "<link href='/static/spreadsheets" => "<link href='https://spreadsheets.google.com
 /static/spreadsheets",
 "IMG001" => "<img src='http://google.com/images/logos/ps_logo2.png'/>"
);

In this case, we'll replace the token IMG001 with an image. Done! This also works when form validation is involved or your survey has multiple pages.

The PHP script survey.php (updated version 1.1).