WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Can you insert images into the form? (6 posts)

  1. frsigns
    Member
    Posted 2 years ago #

    I'm using contact form 7 and I'd like to add images within the form. Is this possible?

    Right now I have radio buttons set-up so our customers can request a design, but I'd like a thumbnail of the design next to each radio button.

    You can see how it is set-up so far here: http://www.startevent.org/?page_id=16

    Please let me know how I can go about doing this.

    Thanks!

    http://wordpress.org/extend/plugins/contact-form-7/

  2. jazminhupp
    Member
    Posted 2 years ago #

    See below :)

  3. jazminhupp
    Member
    Posted 2 years ago #

    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!

  4. Harrison1990
    Member
    Posted 2 years ago #

    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

  5. Harrison1990
    Member
    Posted 2 years ago #

    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>
  6. Harrison1990
    Member
    Posted 2 years ago #

    p.s. you can see my testing page for the form at: http://www.lindabyharrison.com/testing-2

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic