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+.
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??
ReplyDeleteKim,
DeleteI 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
Not sure what I was doing but it seems to be all happening for me now. Thank you very much for sharing this.
DeleteHi, 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.
ReplyDeleteNice work btw, thanks,
Pedro,
ReplyDeleteSorry 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
no problem.. just checking if you had any unpublished update :)
ReplyDeleteMy client wants to be autonomous creating some surveys but I guess I'll have to find some other solution.
thanks,
Pedro
[FIRST]
ReplyDeleteThanks 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
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?
ReplyDeleteChristian,
ReplyDeleteI 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.
Jeff,
ReplyDeleteI 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.
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?
ReplyDeleteSean,
ReplyDeleteThanks 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
Thanks, James! Great work!
ReplyDeleteJames,
ReplyDeleteThis 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
Dan - Thanks for the feedback - it is great to hear that this is useful for other educators!
DeleteHi, 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.
ReplyDeleteEvey,
DeleteI 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
Hi James,
ReplyDeleteI 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?
Nevermind, I had the root folder spelled, "GWFI" I made the fix and it worked.
DeleteAdam - I am glad you figured it out! Sorry for the delayed response. It has been a busy week.
DeleteHello,
ReplyDeleteI 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
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.
DeleteHope so!
Also once I changed something in the form Im now getting - Not Found Error 404
DeleteEven though I re-ran the script something must be happening.
Hope you can help
Amanda, in regards to the 404 - a couple things to check:
Delete1) 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
HI, this is great stuff! Thanks for the video.
ReplyDeleteI 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
Christian,
ReplyDeleteThis 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
Thanks very much
ReplyDeleteCan 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
Some one told me about it for this script ... change the “#gid=0” in the link to "&newcopy". I was amazed too!
DeleteI read also url+ &newcopy=true
Deletethanks
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.
ReplyDeleteI 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.
DeleteTo 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!
When I ran it the second time I got this error message:
DeleteAttribute provided with no value: url
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.
DeleteYes :)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.
DeleteI 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?
ReplyDeleteCan you tell me what error message you are getting? No you don't need to download the google drive application.
ReplyDeleteI 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.
ReplyDeleteThanks again so much. I am just learning about scripts but clearly have a lot to learn!
Hi Stephanie,
DeleteThanks 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
I take a copy and my form respond by this message
ReplyDeleteWe're sorry, a server error occurred. Please wait a bit and try again
what can I do?
best regards
Mohamed,
DeleteThere 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
now ok, thank you
DeleteHi James
ReplyDeleteIf 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?
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.
DeleteHow do I embed the form?
ReplyDeleteon a website, that is...
DeleteThis comment has been removed by the author.
ReplyDeleteThje 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."
ReplyDeletelink:
https://googledrive.com/host/0B0fAZH7-x4s6MS03NDA5OTY1ZS0wZjNlLTQ1MWQtYjFkMC03OTZkNGQ0ZWJlZmM/Mascot%20Selection1368461643632.html
First, Great Tool that has helped out a lot. Thank You.
ReplyDeleteI 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!
Hi,
ReplyDeletethanks 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
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.
ReplyDeleteI have used the script to successfully add images to my form - however when
ReplyDeletestudents 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
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.
DeleteThis comment has been removed by the author.
ReplyDeleteI 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.
ReplyDeleteSame Issue Here. Have you figured out the fix?
DeleteSame issue- Would really love to use in my classes. Any idea what I am doing wrong? Thank you!
DeleteI also have this error.
ReplyDeleteI get an error:
ReplyDeleteReferenceError: "DocsList" is not defined.