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

19 comments:

Steeve said...

Many f*** thanks for this script!! I've been looking for an alternative to have multiple pages and our designed skin for our form. All done thanks to you!

Thanks again, cheers.
Steeve

Steeve said...

Hello Markus,

There seem to be a bug with the script if there are checkboxes (multiple choices). If you want I can provide you a fix for your script. You'll do whatever you want with it :).
Cheers,
Steeve
scayla at kapit dot fr

Markus Kramer said...

Hi Steeve,
yes, please post your fix here if you have one. It seems multiple values won't be stored, right?

Markus Kramer said...

I've fixed this bug. The updated version is 1.1.

Steeve said...

Yep the bug was with multiple results. Sorry, didn't receive any email notifications. Great if you managed to fix it :)

Steinar said...

Thank you for this brilliantly simple solution. I've spent a full evening messing with dirty java. This gave me a better solution than I was hoping for and took 5 minutes.

Thanks again

Jacob Felson said...

I've tried for 3-4 hours to get this to work on 000webhost.com, with no luck. Giving up and trying something else.

Markus Kramer said...

@Jacob: sorry to hear that. maybe it would be a better approach to let us know what the problem was ;)

Yeso.Akshith said...

can you please explain it elaborating

Anonymous said...

Great idea!!! Your script just saved me tons of time... thank you so much!

Maciek said...

Hi!
Like someone from erlier post i have problem with your script. I fill it with link to my survey and link to image and all i get is "Moved Permanently
The document has moved here."
Can you help me? my mail is sciemniony147@gmail.com
link to my not working survey is: http://ankietabakalie.net78.net/survey.php

Markus Kramer said...

@Maciek: Hi, I checked the link you posted and the URL doesn't seem to be correct. Make sure you know how to deploy a simple PHP script first please. There are many good tutorials for a hello world PHP script on the web.

Karbonara said...

Hi Markus

I have high hopes for this fix, since I really need images in the survey.
However, testing it out now, I realize you override google's thank you page, and it seems like my form data isn't stored properly.

I end up with 0 responses when I want to check statistics.

My form exists here: http://www.antroia.com/mind/KarmaSpirits_survey.php

Karbonara said...

So basically, how do I change the php-script to use googles own thanks you page and data gathering?

Karbonara said...

I'm PHP Illiterate!

Found the problem. Had to swap "survey.php" to the actual name of my survey PHP file.

Works like a charm now. (Thanks)

Jorge K. Barrera-Ballesteros said...

Hi Markus, I am trying to put your php file on a google site html box, but it doesnt work. Any ideas?

I have pretty mucho no clue about php, so please help!!!

Cheers

Jorge

Markus Kramer said...

Hi Jorge, google site doesn't seem to support PHP. There are many other free web space offerings that support PHP though.

Jeff said...

Big thanks for this script! Saved me alot of time and trouble.
I did have to add a isset($_REQUEST["proxiedUrl"]) to get it to work on the webserver i had access to tho. I assume this is is because they have stricter rules.

Darin Fong said...

You should update the script to include the actual survey PHP file name so that people don't have to leave the PHP file named "survey.php". Obviously they could change it in the coed, like I did, but it would be easier to include it as a variable in the top of the script so it's more obvious.

Thanks though for the great solution!