Here’s how’d I do this. First create a draft post with all the pictures you want to use and insert them into the post using the standard upload/insert “add an image” buttons. Pay attention to alignment and sizing (you may have to experiment to get this right in your form). Next click on the HTML tab and copy the HTML for the images into a text file or open Contact Form 7 in a new window. For example, the HTML for one of my images would be:
<img class="alignnone size-full wp-image-359" title="w2_founder_friday_logo_200px" src="http://jazminhupp.com/wp-content/uploads/2011/08/w2_founder_friday_logo_200px.png" alt="" width="200" height="74" />
Next go into Contact Form 7 and edit the code in the Form box. Place the HTML for each image above each radio box. Play around by using line breaks (<br />) as needed. You may need to resize images or change their alignment to get this right.
Save the form and see how it looks.
Good luck!
I think you may end up with the same issue as me. I have successfully created images that select different radio options, but when the form is submitted I don’t receive the answer to this one question (that includes images).
However, this is how I’ve coded it:
<div class=”radiooption”> <label> <img/> [radio radio-123 “option1”] </label>
</div>
<div class=”radiooption”> <label> <img/> [radio radio-123 “option2”] </label> </div>
<div class=”radiooption”> <label> <img/> [radio Design “option3”] </label> </div>
Hope that helps. Let me know how you get on.
Linda
Oops, I meant
<div class="radiooption"> <label> <img/> [radio radio-123 "option1"] </label>
</div>
<div class="radiooption"> <label> <img/> [radio radio-123 "option2"] </label> </div>
<div class="radiooption"> <label> <img/> [radio radio-123 "option3"] </label> </div>
p.s. you can see my testing page for the form at: http://www.lindabyharrison.com/testing-2
