Friday, December 7, 2012

Google Forms with Images

Update:

Because Google now allows hosted files with a directory structure from Google Drive, I have updated this script to utilize Google Drive. You no longer need Dropbox or any other hosting solution.  Also, you no longer need to name your images with numbers. The script will find any image file with any name. You just need to make sure you type the name correctly, enclose it in double square brackets and include the extension.

The setup is minimal.

1. At the top level or root of your 'My Drive' (by top level I mean not inside any other folder) create a folder called 'GFWI'. (Don't type the quotes!)

2. You need to make this folder public. 



3. Inside of GFWI, create a folder called 'img'. (No period or quotes!) This is the folder where you will upload all of your images. An added benefit of this new system is that you can use the same images for multiple forms.

4. Open up the view only copy of this spreadsheet. (goo.gl/F5gL4)

5. Click "Yes, make a copy".

6. On your own copy click Form -> Edit form.  

7. Create a form as you usually would. Where you want an image to appear, just type the image name enclosed in double straight brackets. For example [[myimage.jpg]]. You should be able to include images anywhere in the form. 

8. After saving and closing the form editing window, go back to the spreadsheet and click 'GFWI', then select 'Create Form with Images'. You will have to authorize the script the first time you run it from a spreadsheet.

9. That's it! A link to your form should pop up.

Here is a video that Brian Weinert created demonstrating the process. Thanks Brian!






If you have any troubles, please let me know here or on Google+.

58 comments:

  1. Is there any trick to the appearance of the GFWI tab in the spreadsheet section of the copy?? This is a great process and I am following all of the instructions but the GFWI tab doesn't appear. Any ideas??

    ReplyDelete
    Replies
    1. Kim,

      I don't know why it wouldn't appear. When you say tab, you mean the menu item at the top that says GFWI, right? And you are clicking the above link and creating a copy, right? That menu item will only appear if you make a copy.

      Please let me know and I will investigate further and help get this working for you!

      James

      Delete
    2. Not sure what I was doing but it seems to be all happening for me now. Thank you very much for sharing this.

      Delete
  2. Hi, do you think it's possible to make the script work with page breaks? When I add a page, the images only appear on the first page of the form.
    Nice work btw, thanks,

    ReplyDelete
  3. Pedro,

    Sorry no, it will only work on single page forms. That is just the nature of the way I created the script. Making it work with multi-page scripts would be fairly complicated, but it is something I will take a look at when I have time.

    Sorry about that,

    James

    ReplyDelete
  4. no problem.. just checking if you had any unpublished update :)
    My client wants to be autonomous creating some surveys but I guess I'll have to find some other solution.
    thanks,

    Pedro

    ReplyDelete
  5. [FIRST]
    Thanks for this script - it really helped me a lot James

    [SECOND]
    Do you know any way to make this work when I send it via email, since interviewees get redirected to a link that looks like that:
    https://docs.google.com/spreadsheet/viewform?fromEmail=true&formkey=dG9yU1FHZkd1QTRFTTFSWDlI

    instead ofyour actual link in the form

    https://googledrive.com/host/0Bz4hvoRKEeHjJtcFJ3VEU/1357751651216.html

    ReplyDelete
  6. Thanks James, it took me two tries. The first time I ran the script and the images (jpg's) didn't show. I went back in and added the extension (.jpg) to the images and it worked. I noticed on your sample you did not have to add an extension. Is it different based on image type?

    ReplyDelete
  7. Christian,

    I am glad it helped, but sorry, the send via email feature will just use the standard link that doesn't have images. If you are wanting to embed the form with images into an email, you could copy the source code and paste in into the body of the email. This is a good feature to suggest and I will definitely play around with embedding the form into an email. I shouldn't be that hard.

    ReplyDelete
  8. Jeff,

    I always include the file extension because I thought you had to. I didn't realize you could leave the extension off and it could still work. But if you are having troubles, I would recommend just including the extension.

    ReplyDelete
  9. This is awesome, thanks! I've noticed that it has issues if you choose to automatically collect Google Apps usernames (requiring a sign-in) then you end up with a sign in screen and a "browser doesn't have cookies enabled" message. Any way around this?

    ReplyDelete
  10. Sean,

    Thanks for pointing this out. I hadn't considered that this might not work, but it makes senses that it doesn't. I will take a look when I get a chance and see if there is anyway to resolve this.

    James

    ReplyDelete
  11. James,

    This is fantastic. I am a middle school principal. This will allow math and science teachers to really USE forms for assessments. Many thanks for sharing this script!

    Dan

    ReplyDelete
    Replies
    1. Dan - Thanks for the feedback - it is great to hear that this is useful for other educators!

      Delete
  12. Hi, I'm having the same issue of Kim Brown. I'm following all the instruction and I made a copy of the spreadsheed may times but the "GFWI" tab doesn't appear. Could it be because I'm using the italian version of Google Drive? Thanks in advance.

    ReplyDelete
    Replies
    1. Evey,

      I am not sure why it is not appearing. Would you open the copy of GFWI and go to Tools -> Script Manager and tell me what, if any, scripts are listed? Thanks and sorry for your trouble.

      I don't think it should matter what version of Google Drive you are using, but I could be wrong.

      James

      Delete
  13. Hi James,

    I watched the video and tried creating the form as instructed, when I click the link to view the form I keep getting "Not Found: Error 404"

    Any thoughts as to why?

    ReplyDelete
    Replies
    1. Nevermind, I had the root folder spelled, "GWFI" I made the fix and it worked.

      Delete
    2. Adam - I am glad you figured it out! Sorry for the delayed response. It has been a busy week.

      Delete
  14. Hello,
    I am trying to put an image as the header.
    A. Is that possible
    B. I followed your steps and GFWI doesnt come up as an option after I save.
    Hope you can help,
    Amanda

    ReplyDelete
    Replies
    1. ok well I figured out that I need to use your form to start but is there a way to either bring your code into the form I already created or to bring my form into your easily without retyping everything.
      Hope so!

      Delete
    2. Also once I changed something in the form Im now getting - Not Found Error 404
      Even though I re-ran the script something must be happening.
      Hope you can help

      Delete
    3. Amanda, in regards to the 404 - a couple things to check:

      1) Did you create a folder called GFWI?

      2) Did you share that folder and make it public?

      In regards to bringing the code into your form, it is certainly possible. Open up my GFWI v6 spreadsheet. Go to tools -> script editor. Make sure you are on Code.gs. Copy all 96 lines of code.

      Now go into your existing form. Go to tools -> script editor. Select Blank Project, and paste the code into that sheet. (Make sure you paste over the existing code.) That should do it. I may have left something out. Give it a try and let me know if you need more help.

      James

      Delete
  15. HI, this is great stuff! Thanks for the video.

    I followed your instructions and was able to insert two pictures in my form.
    However, the nice formatting of the form is now gone.

    This is what it looks like with pictures: http://goo.gl/3RGrh

    This is what it looks without: http://goo.gl/uHzcS

    Any idea how I get the formatting back?

    Cheers, Christian

    ReplyDelete
  16. Christian,

    This is on my list of possible improvements. I am not very good with CSS, but I need to find a way to make the forms look a little better and/or maintain some of the existing formatting.

    I will let you know if I make any progress in this area!

    Thanks,

    James

    ReplyDelete
  17. Thanks very much
    Can you please explain how you created the page that linked to the file that had a massage "do you want to create a copy?" this is amazing

    ReplyDelete
    Replies
    1. Some one told me about it for this script ... change the “#gid=0” in the link to "&newcopy". I was amazed too!

      Delete
    2. I read also url+ &newcopy=true

      thanks

      Delete
  18. I have already created my form, is there a place from which I can get the script. I cannot find it in the gallery. Thank you so much. I am just starting out using scripts...so very cool.

    ReplyDelete
    Replies
    1. I applied to have this put in the gallery, but I was denied. For the next version I am going to put it in the Chrome Web Store.

      To get it into an existing form, open up my GFWI v6 spreadsheet. Go to tools -> script editor. Make sure you are on Code.gs. Copy all 96 lines of code.

      Now go into your existing form. Go to tools -> script editor. Select Blank Project, and paste the code into that sheet. (Make sure you paste over the existing code.)

      Let me know if that doesn't work or if you need any help!

      Delete
    2. When I ran it the second time I got this error message:
      Attribute provided with no value: url

      Delete
    3. I am guessing you are using the new forms and that is causing the problem. Let me know. I may have to update this to work with the new form.

      Delete
    4. Yes :)last week I played with your script without trouble and now while I like the new Forms....it does mean headaches. Not sure it will even let me use old forms...unless of course I just use your form and recreate.

      Delete
  19. I followed the step by step instuction but got an error message. do i have to download google drive to my computer? can't i do it from my web drive?

    ReplyDelete
  20. Can you tell me what error message you are getting? No you don't need to download the google drive application.

    ReplyDelete
  21. I think this is amazing ! I am trying to change the size of the image. Do I need to do it prior to uploading into the img file ? I checked out the code and did not see any numbers, just the link. Also, is there only certain types of images that work with this script? For example, my jpg shows up but not my TIF.
    Thanks again so much. I am just learning about scripts but clearly have a lot to learn!

    ReplyDelete
    Replies
    1. Hi Stephanie,

      Thanks for feedback - I am glad it is useful for you! In regards to your questions. You can change the size of the image and add it to the GFWI\img folder. Just delete the original and give the resized version the same name as the original. The html file that the script generates creates an image tag, and it will just check that folder for a file by that name. So if you keep the name the same, there is no need to generate a new tag.

      My understanding is that most browsers will render, png, jpg, gif and bmp, but not tiff. Sorry about that.

      I hope my explanations make sense. Let me know if you have any more questions.

      James

      Delete
  22. I take a copy and my form respond by this message
    We're sorry, a server error occurred. Please wait a bit and try again
    what can I do?
    best regards

    ReplyDelete
    Replies
    1. Mohamed,

      There was a bug with Google Scripts, that is now resolved. Please try running it again and let me know if it doesn't work.

      Also, there is a new version you may want to try out.

      http://tech-in-school.blogspot.com/2013/02/update-to-google-forms-with-images.html

      James

      Delete
  23. Hi James
    If I understand correctly, there is no way to add image into google form unless it's html link?? no option to add to a regular form, and so better view?

    ReplyDelete
    Replies
    1. That is correct. The only way for this to work is to take the html from the original form, add the image markup, then host the new html file somewhere else. I do plan to play with the css and do what I can to preserve the original look at some point.

      Delete
  24. How do I embed the form?

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. Thje form is created but after a selection is made and the submit button is pressed, you're redirected to the form with the [[pic.jpg]] options. none of the options are selected and it says: "Looks like you have a question or two that still needs attention."

    link:

    https://googledrive.com/host/0B0fAZH7-x4s6MS03NDA5OTY1ZS0wZjNlLTQ1MWQtYjFkMC03OTZkNGQ0ZWJlZmM/Mascot%20Selection1368461643632.html

    ReplyDelete
  27. First, Great Tool that has helped out a lot. Thank You.

    I too am seeing similar behavior as Mr. Sandick on a required multiple choice with 7 options each containing an image. Make selection, submit and it behaves as if no selection was made: "Looks like you have a question or two that still needs attention." with the multiple choice options in highlighted in red w/o images.

    If I remove options 6 and 7 it behaves as expected and records response.

    Thanks again. I appreciate your work!

    ReplyDelete
  28. Hi,
    thanks for your script. It's working fine for me but when I try to insert my image in the title, I get a HTTP 404 Error. So I assume it's not possible to insert images at this place but is there any workaround ?
    thanks a lot

    ReplyDelete
  29. Hi James, I came across your script after shared this page on one of the groups I am connected with. Excellent script and one that will prove to be useful. One item, would it be possible to include a size function for the images? As I see the image in my form at full res which in some cases may be unsuitable without editing in another application prior to copying into the img folder.

    ReplyDelete
  30. I have used the script to successfully add images to my form - however when
    students select one of the images as an answer - it prompts them answer the
    question again

    the link the form is :
    https://docs.google.com/a/dublinschools.net/forms/d/1broWfWwWZYFvVOIqdEEOkRhI4hF1rVzNzCA-FL34fok/viewform

    any help is greatly appreciated

    ReplyDelete
    Replies
    1. actually - it was a required question - so i changed it --- it appears to not be recording that question to the spreadsheet. all other questions work just fine.

      Delete
  31. This comment has been removed by the author.

    ReplyDelete
  32. I cannot get the script to work. Whenever I try it says "ReferenceError: "DocsList" is not defined" I don't know what that means. I followed your instructions.

    ReplyDelete
    Replies
    1. Same Issue Here. Have you figured out the fix?

      Delete
    2. Same issue- Would really love to use in my classes. Any idea what I am doing wrong? Thank you!

      Delete
  33. I get an error:
    ReferenceError: "DocsList" is not defined.

    ReplyDelete