Ever wanted to add pictures to a Google Form? Well, with a little help from HTML, you can do it.
First, you need to create a form. Where you want pictures, just leave your options as text. For instance, if you asked the question--what is your favorite food--and you wanted to give picture options of hot dogs, burgers, and pizza, you would still list those as answer choices--as text. Those will be place holders for when you add in the <IMG SRC> tag.
Once your form is finished, go into the Live Form view. Right-click somewhere on the form and choose: View Source.
It will give you the html code for the form. Copy the entire source code.
Paste the source code in a Web editing program like Notepad, Microsoft Expression Web or Adobe Dreamweaver (the latter two options give you the ability to preview your work as you go).
Now, find your images. If you want Google images of the items above (hot dogs, burgers, and pizza), you could do an image search for each item. As the searches populate, right-click on the respective picture and choose "copy link address." Repeat this for all pictures. You will need URLs for the pictures so if they come from your hard drive, upload them to Google Drawing and get the URL. Save the URLs in a separate .txt file so you can come back to them.
Now, go into your Form source, look for your answer choices. You will see a <label> tag nested in a <li> tag. At the end of the answer choice, you'll see a </label></li>. You will need to insert the following code in between the </label> and the </li>. You will repeat this for any answer choice where you want a picture. Here is the code:
<img alt="Hot Dogs" height="32" src="http://schools.roundrockisd.org/forestnorth/hot_dog.jpg" width="32" />
Replace the highlighted section with your image's URL.
Once you have added in all images, copy the entire completed code and paste it in a Blogger page or Google Sites page (any area where you have the ability to paste in HTML code).
*Tip--I recommend keeping your form theme as blank. If you don't it will apply that theme to your entire page.
That's it! Click here to see what a completed form with pictures looks like.
First, you need to create a form. Where you want pictures, just leave your options as text. For instance, if you asked the question--what is your favorite food--and you wanted to give picture options of hot dogs, burgers, and pizza, you would still list those as answer choices--as text. Those will be place holders for when you add in the <IMG SRC> tag.
Once your form is finished, go into the Live Form view. Right-click somewhere on the form and choose: View Source.
It will give you the html code for the form. Copy the entire source code.
Paste the source code in a Web editing program like Notepad, Microsoft Expression Web or Adobe Dreamweaver (the latter two options give you the ability to preview your work as you go).
Now, find your images. If you want Google images of the items above (hot dogs, burgers, and pizza), you could do an image search for each item. As the searches populate, right-click on the respective picture and choose "copy link address." Repeat this for all pictures. You will need URLs for the pictures so if they come from your hard drive, upload them to Google Drawing and get the URL. Save the URLs in a separate .txt file so you can come back to them.
Now, go into your Form source, look for your answer choices. You will see a <label> tag nested in a <li> tag. At the end of the answer choice, you'll see a </label></li>. You will need to insert the following code in between the </label> and the </li>. You will repeat this for any answer choice where you want a picture. Here is the code:
<img alt="Hot Dogs" height="32" src="http://schools.roundrockisd.org/forestnorth/hot_dog.jpg" width="32" />
Replace the highlighted section with your image's URL.
Once you have added in all images, copy the entire completed code and paste it in a Blogger page or Google Sites page (any area where you have the ability to paste in HTML code).
*Tip--I recommend keeping your form theme as blank. If you don't it will apply that theme to your entire page.
That's it! Click here to see what a completed form with pictures looks like.
No comments:
Post a Comment