Sunday, February 24, 2013

Update to Google Forms with Images

I have updated the Google Forms with Images Script. It should now work with the new forms. You no longer need to make a copy of my template - you can add images to existing forms.

The initial setup is the same. You should only have to complete steps 1 through 3 once. If have used a previous version of this script and already have a public GFWI folder, skip to step 4.


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. Create a form as you usually would. (Or modify an existing form.) 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. (Including answer choices.)

5. After you have added the bracketed image tags, just copy live url for your form. This is the link you would use to distribute your form to end users. Paste that link into this form: http://goo.gl/RXToK (The first time you use the script you will have to authorize it.)

6. That's it! A link to your form with images should appear. For your records, a spreadsheet called GFWI links will be created inside the GFWI folder.

Known issues: 
  • This does not work with multi-page forms
  • This does not work when the form is set to collect Google Account Usernames
  • I know the formatting could be better. If anyone who is talented with CSS would like to help me update the script and improve the styling, please let me know.
If you need help you can leave a comment here or contact me on Google+.

Posted by at

79 comments:

  1. UnknownFebruary 26, 2013 at 9:05 AM

    Dear James,

    Thanks for the new script. I followed all the instructions but I get an error when I paste the live URL into the link that is provided (step 5). Would you know what is going wrong?

    Joeri

    ReplyDelete
    Replies
    1. UnknownFebruary 26, 2013 at 9:09 AM

      This comment has been removed by the author.

      Delete
    2. UnknownFebruary 26, 2013 at 9:22 AM

      Joeri,

      I just ran the script and I am now receiving a server error message. I haven't altered the code since Sunday night, so I am not sure what has happened since then. Hopefully this is an issue on the Google side of things, but if it hasn't started working again in a few hours I will try to debug the script and see what is going on.

      Sorry about that.

      James

      Delete
    3. UnknownFebruary 26, 2013 at 9:11 PM

      Joeri,

      The script should be working now. Thank you for bringing this to my attention.

      Let me know if you have any other issues.

      James

      Delete
  2. UnknownFebruary 27, 2013 at 3:57 AM

    Working indeed. Thanks a lot!

    ReplyDelete
  3. UnknownFebruary 27, 2013 at 10:18 AM

    I've followed your wonderful tutorial but receive a Bad Request : Error 400 when I've uploaded the live URL and click the link to get my form. When I go back to my GFWI folder, there is a link inside. However the link leads you to the code of my form. Nothing is recognizable unless you are a person that understands code. What is the issue? I'm assuming it is my user error.

    ReplyDelete
    Replies
    1. UnknownFebruary 27, 2013 at 10:31 AM

      Hi there - don't feel bad, that file inside your GFWI folder was meant to be read by browser not a human! My best guess is that you have not set the GFWI folder access to public on the web. Take a look at step 2 and make sure you have changed that setting. Please follow up and let me know if that works for you. If not, I will help you figure it out.

      Delete
    2. UnknownMarch 22, 2013 at 2:22 PM

      Hi James,

      If I paste the image code in the Title field of the form, I get this error. Perhaps that was troubling Unknown.

      Also, I want to tweak on the CSS/styling to improve the aesthetics. Shall we give it a try?

      Asim

      Delete
  4. Samuel GipsonFebruary 27, 2013 at 12:29 PM

    Hello! The script seems to work for me now, but when I click the "Click here to view the form" link it sends me to my district's Google login page. When I try to log in it says I don't have cookies enabled (which I do.) I am already logged into Google in other browser tabs.

    Any idea what's causing this? I checked the sharing settings of the GFWI folder and it's set to public.

    Thanks!

    ReplyDelete
    Replies
    1. UnknownFebruary 27, 2013 at 12:56 PM

      Samuel,

      I am thinking that you have one or both of the settings enabled where you require users to sign in or collect their username. Unfortunately those settings are not supported with this script. I am trying to figure out way to make them work and I will let you know if I do.

      Sorry about that.

      James

      Delete
    2. Samuel GipsonFebruary 27, 2013 at 1:27 PM

      That was it. Perfect now. Thanks so much!

      Delete
  5. UnknownFebruary 27, 2013 at 12:57 PM

    I recheck and confirmed that I had previously given the GFWI folder access to the web. I switched it over to private and then back to public again (just to make sure). Now when I paste the URL in, I am prompted to "Click here to view the form". However, once selected I receive the following ...

    REDIRECT NOTICE
    The previous page is sending you to https://googledrive.com/host/*********************.html.

    If you do not want to visit that page, you can return to the previous page.

    I am up for more assistance whenever you can. Thanks, Wes

    ReplyDelete
    Replies
    1. UnknownFebruary 27, 2013 at 1:11 PM

      Wes,

      Sorry about that. My next guess is that this is s browser issue. It seems like this is just a security warning that you are being redirected. Does it give you the option to proceed and visit the https://googledrive.com/host/*********************.html page?

      Can you copy that link and try it in another browser?

      Let me know.

      James

      Delete
  6. AnonymousMarch 3, 2013 at 8:47 PM

    How do I make sure I do not have it set up to collect usernames? I have made my link public to the web, and it works for a little bit but then when I go to click it, I get an Error 404: Not Found message. I have followed all of the directions, but I am not sure if my link is set up to collect usernames or not.

    Thank you!
    Elena

    ReplyDelete
    Replies
    1. UnknownMarch 3, 2013 at 8:51 PM

      I don't think the username thing is your problem, that usually gives a cookie error. Is the folder named 'GFWI'?

      Delete
  7. Patrick ReidMarch 5, 2013 at 10:31 AM

    Is there a way to do this while I already have a form created? I am using the google form creator and I tried adding the image, but it only comes up as the words not the image. Thanks for the help.

    ReplyDelete
    Replies
    1. UnknownMarch 5, 2013 at 10:33 AM

      Patrick,

      You have to paste your live form url into this webpage. http://goo.gl/RXToK (see step 5 above). It will require you to authorize the script the first time you use it.

      Let me know if that doesn't work.

      James

      Delete
    2. Reba1March 12, 2013 at 1:28 PM

      This comment has been removed by the author.

      Delete
  8. Reba1March 12, 2013 at 1:29 PM

    I believe I have followed all the directions to a "T", however, when I click on the link in step 5, I get the message "Error encountered: an unexpected error occurred" then when I click on the OK button it is a blank screen with "Select a form" in the tab. Any ideas?
    Thank you,
    Rebecca

    ReplyDelete
  9. UnknownMarch 12, 2013 at 7:28 PM

    Rebecca,

    Are you sure you are pasting the live form url? That is my first guess.

    If you are sure, let me know and we will try some other things. Maybe you could send me the live form url. and I could try it.

    James

    ReplyDelete
    Replies
    1. Reba1March 12, 2013 at 11:15 PM

      James,
      I wasn't even getting to the page to paste the URL in. As soon as I clicked on the link in step 5, I would get the error.

      HOWEVER - When I got home from work, I tried it in IE (which we have at school) and got the same results. I then tried it with Google Chrome - and it worked like a charm! I can now open the form in IE with the generated URL, although it does not have the chosen background. I can live with that. Hopefully, when I get to work tomorrow, it will open on the school computers.

      Thank you,
      Rebecca

      Delete
    2. UnknownMarch 14, 2013 at 7:57 AM

      Reba, That is good to know, that it doesn't work in IE. I will have to add the to the post.

      Thanks!

      James

      Delete
  10. JazMarch 14, 2013 at 7:56 AM

    Hi I try this and everything works fine except the image only show the icon instead of the intended image. How do I solve it?

    ReplyDelete
    Replies
    1. UnknownMarch 14, 2013 at 8:00 AM

      Jaz,

      Do you have your images in a folder called img that is inside the GFWI folder? Did you include the file extension? Are you sure you typed the file names exactly right?

      Let me know.

      James

      Delete
    2. bully dazeMarch 21, 2013 at 2:56 PM

      James,

      I'm having the same problem. I set up the folders correctly and typed in the file names exactly.

      Delete
    3. UnknownMarch 22, 2013 at 11:36 AM

      I am not sure what to say, the script is still functioning correctly, so there must be some small error in your set up. What type of files are they? jpg, png, gif? It has to be a standard image format. Maybe you could share the form with me and send me the link that isn't working. My email is last name dot first name. Sorry for your trouble.

      Delete
  11. AnonymousMarch 14, 2013 at 11:07 AM

    Hey James,

    Thanks for working on this and sharing it. It is the one thing our teachers complained about with Google Forms. With that said, I am unable to get things to work. I am using Google Chrome and I have both the GFWI and the IMG folders set up for public view.

    I paste the URL for the live form as shown and I get a redirect notice page with a link. If I click the link I get an error 404 Not Found. I don't ever get the authentication piece.

    Any suggestions you could offer will be GREATLY appreciated1

    Thanks,
    Sue

    ReplyDelete
    Replies
    1. UnknownMarch 14, 2013 at 12:32 PM

      Sue,

      Is this happening at home and at work. One guess is that you have a firewall/filter that does not like short url's from goo.gl. Here is the direct link.

      https://script.google.com/macros/s/AKfycbyCQ07UeQpERrJmh1_lUtWR-0qa43-m5AI4CQUXzlSRUyJfEGki/exec

      Give it a try and let me know if it works.

      James

      Delete
  12. AnonymousMarch 14, 2013 at 12:56 PM

    Nope, still get the same 404. I will try it from home this evening just to see what happens. Thank you!

    ReplyDelete
    Replies
    1. AnonymousMarch 15, 2013 at 10:28 AM

      I thought I posted this yesterday, but I am not seeing it today. I uninstalled the script and reinstalled it and it is working fine now. Thank you! This is great stuff that teachers can really use!

      Sue

      Delete
    2. UnknownMarch 15, 2013 at 11:53 AM

      This comment has been removed by the author.

      Delete
    3. UnknownMarch 15, 2013 at 11:56 AM

      Sue,

      Thank you so much for posting this solution, I never would have thought of it. For anyone else who needs help uninstalling, a quick way to do it is to go to the page where you paste in the link and then edit the url. Just delete the '/exec', and replace it with '/manage/uninstall'.

      James

      Delete
  13. AnonymousMarch 20, 2013 at 2:41 PM

    I did it and it works GREAT! My teachers will be very happy to hear about this.
    Thanks for all your work.

    ReplyDelete
  14. UnknownMarch 21, 2013 at 12:54 PM

    Thanks, this seems to be working great for me here.

    ReplyDelete
  15. bully dazeMarch 21, 2013 at 2:57 PM

    I seem to be having the same problem with the icon showing up. Please help!

    ReplyDelete
  16. AnonymousMarch 22, 2013 at 9:43 AM

    I followed all the steps above, create the form and edit it, paste the link into your form, click on the link and it opens the form, but the double straight brackets and file name appear just how I typed them. No picture. Please help,

    ReplyDelete
    Replies
    1. AnonymousMarch 22, 2013 at 9:56 AM

      I'm a teacher using a school district google drive account, could that have something to do with it?

      Delete
    2. UnknownMarch 22, 2013 at 11:38 AM

      I don't know what is happening. Can you post the link so I can see? And this script works just fine with school owned Google accounts.

      Delete
  17. UnknownMarch 25, 2013 at 9:25 PM

    Hello James,

    I have also been having problems and keep on getting an error 404.

    ReplyDelete
    Replies
    1. UnknownMarch 28, 2013 at 7:57 AM

      Joshua - I am sorry you have been having trouble. It seems to be working for most people. Maybe you could share you form with me and I could do some testing.

      James

      Delete
  18. EasonMarch 27, 2013 at 11:25 PM

    Hello James,
    Your script does add the image, but lose the CSS connection. The CSS is hosted on https://docs.google.com. Once using google drive to host a html, the html will look for the CSS on https://googledrive.com and lose the connection. That will be great if you are able to fix the link of CSS in your script.

    ReplyDelete
  19. UnknownMarch 28, 2013 at 7:55 AM

    Eason - And it was that simple. Thanks for finding that. I changed the script and fixed the css reference in the html file. Please try it again and let me know if it working for you. I tested with my personal and apps account and it worked with both.

    Thanks for helping out!

    James

    ReplyDelete
    Replies
    1. James AngApril 26, 2013 at 2:22 AM

      Dear James, i could add a picture however the css setting is missing. can you advise me how did you make the change?

      Delete
  20. danaMarch 30, 2013 at 12:58 PM

    Thank you so much for this! Is there a way to use this form with images in a google site? I tried inserting the html code in an html box- it comes up with little icons for the images, but no image.

    ReplyDelete
    Replies
    1. UnknownMarch 30, 2013 at 2:41 PM

      Dana,

      Let me play around with this next week. I suppose you could use an iframe, but if I modify the code a bit I should be able to create embed code that does not use any relative url's for the image files, and instead uses the full url.

      I will get back to you - thanks for the suggestion!

      James

      Delete
    2. danaMarch 30, 2013 at 3:08 PM

      Thanks you are amazing!

      Delete
  21. UnknownMarch 31, 2013 at 8:05 PM

    Hi James,

    So thankful I found your site it really saved me in creating my questionnaire on Google, however (this might not really be a problem for your process) I have tried copying and pasting the link onto Facebook and Facebook thinks its spam and rejects it.

    I have sent a report to Facebook but was wondering if you have any advice on how to go around this problem?

    Thanks

    ReplyDelete
  22. UnknownApril 1, 2013 at 8:32 AM

    Hi - I have no idea why facebook doesn't like it. The domain is googledrive.com - so for whatever facebook may be blocking that. The only suggestion I can think of is to try using a url shortener like goo.gl, tinyurl or bit.ly. But my guess is that facebook's spam filter would still catch it.

    Another option would be to create a google site or some other web page and then place the link to the form on that page. This would of course require your users to have to click through an extra webpage, which is not ideal.

    ReplyDelete
  23. brenttoApril 2, 2013 at 1:27 AM

    Hello,

    Thanks for this great tool! I can get this to work as a test, however, I am unable to use this with Japanese text on my form. If I add any Japanese characters I get a "Not found Error 404".

    I'd appreciate a quick look but understand if this cannot be fixed.

    ReplyDelete
  24. squenzerApril 2, 2013 at 12:00 PM

    Hello,

    I have read the following posts but may have missed it, I also received an Error 404. I tried it in google chrome, I reinstalled it and checked to see if everything was public and labeled correctly.

    This is the live form
    https://docs.google.com/forms/d/1_rjX0Hkx4eX98zVv9Xq8gRawKuZ36YZdodmzPUPpMAI/viewform
    Could you help??

    ReplyDelete
  25. Jessica MoschioniApril 7, 2013 at 6:21 PM

    I did a practice form, to make sure that I was doing everything right, and it worked. I had my pictures in the list, but when I actually created the form with multiple pictures and questions I got an Error 404 message each time when doing the same steps I took before. Any suggestions? Thanks!

    ReplyDelete
  26. AnonymousApril 8, 2013 at 11:09 AM

    I've created a form for K-2 students to vote for their favorite book from a reading program. The pictures are visible in the form and voting worked just fine in my tests. My problem is that the "Submit another response" link that appears after a response is recorded links to my original form that is text only, instead of the scripted form that includes images. Is there a way to edit the script so that the "Submit another response" link goes to the scripted form with the images?

    Here's my live link:
    https://docs.google.com/a/roundrockisd.org/forms/d/1-ZyIy8Ai-BgD_rlHBFho-F1NSBGEGUVN2b_6zVvGSzo/viewform

    Here's a link to my scripted form:
    http://goo.gl/nxRI7

    Thanks so much for sharing directions on how to add images to Google Forms, and thanks in advance for any help you are able to provide with my issue.

    ReplyDelete
    Replies
    1. UnknownApril 8, 2013 at 11:14 AM

      Hmmm... that is a tough issue. It may be beyond my amateur javascripting skills. But I will think about it.

      Sorry about the inconvenience.

      Delete
    2. AnonymousApril 8, 2013 at 3:26 PM

      Thank you for sharing this script. You are too kind to help troubleshoot. I just wanted to add that I was successful at getting my pictures on the form, but when I submit, it automatically goes to the original form with text only like CEdward's does. It then prompts me to answer the question that has the linked pictures before I can submit my form.

      Delete
    3. AnonymousApril 9, 2013 at 11:31 AM

      Hi,James. Don't worry about the "submit another response" issue. I figured a way around it. I unchecked the box "Show link to submit another response" in my form. We will just have students close the page after their vote is submitted, and the next student will click again on the link to open the voting form with images.

      Barbara, I'm not sure I totally understand your problem. But I wondered if you created a response destination for your data? In the new Google Forms, you have to choose a response destination and create a spreadsheet if that is what you want. The spreadsheet for responses is not created automatically the way it was in the old Google Forms. If you don't create a response destination, the data is saved with the form.

      Delete
    4. UnknownApril 9, 2013 at 11:34 AM

      Thanks for getting back to me - great idea to just uncheck that box. And thanks for helping troubleshoot Barbara's issue.

      Delete
  27. UnknownApril 15, 2013 at 5:20 AM

    Hi James,

    Brilliant guide, many thanks. I'm having an issue with when adding an imagine, it alters the template of my existing form, is there any way around this?

    The sorts of things I mean are spacing discrepancies and text box sizes have been shrunk.

    Thanks,
    Owen

    ReplyDelete
    Replies
    1. UnknownApril 15, 2013 at 5:21 AM

      and by imagine, I mean Image. I've been listening to John Lennon.

      Delete
  28. AnonymousApril 15, 2013 at 6:49 PM

    Nice work; but I've discovered it doesn't play nicely with multiple sign-in. I stay signed in to both my work (apps for education) account, and my personal account. I tried creating the forms via my work account, but the links didn't work; I later found that a GFWI folder had been created in my personal account.

    Being signed in to only one account works fine.

    ReplyDelete
    Replies
    1. AnonymousApril 23, 2013 at 3:30 PM

      This appears to be my problem as well...

      Delete
    2. UnknownApril 23, 2013 at 3:33 PM

      Multiple-sign in does cause a lot of problems. The script should look for at the primary account. You need to have a GFWI folder set as public on that account.

      Delete
  29. KatieApril 20, 2013 at 11:05 AM

    This worked wonderfully! Thank you so much!

    ReplyDelete
  30. UnknownApril 21, 2013 at 7:24 AM

    Hi James,

    Getting the 404 error, whatever I do after tryring to open the generated link.
    "The requested URL was not found on this server."

    What could be the problem?
    Thanks!

    ReplyDelete
    Replies
    1. UnknownApril 23, 2013 at 3:35 PM

      Adam,

      Are you using the multiple sign in feature?

      James

      Delete
  31. AnonymousApril 23, 2013 at 3:27 PM

    I get the same 404 error as well. I've tried everything mentioned above...

    ReplyDelete
    Replies
    1. AnonymousApril 23, 2013 at 3:31 PM

      I am encountering the multiple accounts issue as well...

      Delete
    2. UnknownApril 23, 2013 at 3:34 PM

      Do use Chrome? I find having multiple user accounts works much better for me - especially if you plan to use Google Drive heavily.

      http://support.google.com/chrome/bin/answer.py?hl=en&answer=2364824

      Delete
  32. RequisitionApril 24, 2013 at 12:30 PM

    Hey James,

    Thank you so much for your work on this script. Do you think it will ever be possible to use this with multi-page forms?

    ReplyDelete
  33. 颜陵君April 25, 2013 at 11:14 AM

    Hey James,

    Thanks for your work and sharing. Is there any good way of do a side-by-side video survey (videos from Youtube links) by google form? Thanks!

    ReplyDelete
  34. UnknownApril 25, 2013 at 2:04 PM

    Dear James,
    I've been looking for something like that for more than one year! For vocabulary tests is a great solution. Thanks a lot for sharing!
    Beatriz.

    ReplyDelete
  35. 輔導主任May 3, 2013 at 11:10 PM

    Hi James,
    Thanks for your great work and you really did a super job! I have two more question. If my form was written in Chinese, how can it show the submit button in Chinese not English（in GFWI)? Is it possible for people who submitted my form could see a name list to make sure they finished their form. Please help, thanks a bunch! (& thanks for be tolerant of my poor English....)

    ReplyDelete
  36. Debbie YoshinoMay 4, 2013 at 6:51 PM

    Hi James! Thank you for this. One question: How can I center the image? Any advice would be appreciated.

    ReplyDelete
  37. JessMay 9, 2013 at 11:24 AM

    James, thank you for your hard work on this. Yesterday, I had it working great!

    But suddenly today, it's not working properly. I've tried on multiple browsers and had other folks try on their computer with their accounts.

    Every time we push "view live form" it directs us to sign into our google accounts. then it tells us that our cookies are turned off. (which they aren't, bc we troubleshoot the way it says to and it still doesn't work.)

    I was hoping to use this today. Any idea what could be up?

    jess

    ReplyDelete
  38. Giovanni PMay 11, 2013 at 5:51 AM

    I want to create a multiple choice with text and pic for every possible answer. Pics are screened correctly on the multiple choice but it doesn't collect the answer: the answer box on the spreadsheet remains empty for that question. In the non-scripted form the answer to the multiple choice is recorded correctly. Please help

    ReplyDelete
    Replies
    1. BenRMay 14, 2013 at 7:22 AM

      Hello, I made a multiple choice with pictures for the possible answers too. I create the options (pictures) in Ms.office. I put label on each pic like graph A, graph B, etc, then upload the whole graph as a single picture. Later in options, I just write for option A graph A, option B graph B, etc. It works well with my physics quiz and my students responses are collected perfectly.

      Delete
  39. UnknownMay 13, 2013 at 3:29 AM

    James, hi

    First off: Writing from Madrid, Spain, many thanks for sharing this script.

    I can't get the script to work. I made a test form and went through the steps (Folder GFWI is public. img is subfolder). When I click "Click here to view the form" I get a 400 Error. When I view the from in Google I get no images (only the text within the [[]]).

    In chrome. Not multiple sign-in.

    Don't know where to remove / re-install script. I can't see the script in my Google Drive.

    Links:
    https://docs.google.com/spreadsheet/ccc?key=0Av8QAB7FMDpadEtFTElEMnlmMVpoTUR2SnlwcWFkZ1E&usp=sharing

    https://docs.google.com/forms/d/1r7hXKQvd3jFp9zeTiP1hxNPKHfBnw45FXIZjm1ixrq8/edit?usp=sharing

    Live URL used in your form:
    https://docs.google.com/forms/d/1r7hXKQvd3jFp9zeTiP1hxNPKHfBnw45FXIZjm1ixrq8/viewform

    ReplyDelete
    Replies
    1. UnknownMay 13, 2013 at 9:52 AM

      Hi Miguel,

      A guess is that the brackets in the title are causing an error.

      Can you also share the link that is giving you the error? It should look like googledrive.com/host/....

      James

      Delete
    2. UnknownMay 14, 2013 at 3:15 AM

      James, thanks for answering

      I took out the Title and Sub-Title brackets (and image file name)

      I used ALT-091 and ALT-093 for the brackets (in case it was a spanish keyboard issue).

      Still, no cigar. Here is the (most recent) link to the error message:

      https://googledrive.com/host/0B_XwKvIF3tt8MS05Zjg2MTEwMC00YTM3LTQwZmEtYmUwNi1hZjUwNGM2NDI4OTc/Test%20of%20Form%20with%20Images%20021368518920094.html

      Thanks
      Miguel

      Delete
  40. BenRMay 14, 2013 at 7:11 AM

    Thanks so much James, really appreciate your help. It works well with my science quizzes. It helps me a lot indeed and I'd like to share this with my fellow teachers in my school.

    ReplyDelete

New comments are not allowed.

Subscribe to: Post Comments (Atom)