Support » Plugin: Contact Form 7 » [Plugin: Contact Form 7] Adding an logo/image to the right of the input fields.

  • Hi there,
    I was attempting to put an image off to the right side of the input fields but was unsuccessful. I only managed to add one to the top of the page. Will this be something that you will have the option to do in a later version. Or is there a way to adjust the code so that I can put an image to the right of the fields? Here is a link to the page that I am referring to: http://sugarcookiesnyc.com/blog/contact-us

    Best Regards,
    Paul

Viewing 13 replies - 1 through 13 (of 13 total)
  • Something like this may work for you… Modify it accordingly and place it at the top of your form.

    <div style="float: right; width: 120px;">
    
    <img src="http://sugarcookiesnyc.com/path-to-the-image/image-file-name.jpg alt="Your-Caption" />
    </div>

    That sorta works for me there are some resolutions and situtations where the image fails to show at all but mostly it does.

    I would like to do the same thing. http://www.supergeek.com.au/ There is a great deal of space between the end of the contact form and the next column of widgets and I would like to be able to put and image to the right of the contact form. Is this possible?

    That code puts the image on the right hand side of the column but still underneath the contact form

    Why not just do a simple table on the Page/Post you have the contact form. (Not in the Contact Form itself)

    <table><tr><td>
    [contact-form 1 "Contact form 1"]
    </td><td>
    <img src="http://mydomain.com/uploads/myimage1.jpg" alt="alt tag">
    </td></tr></table>

    That puts the image above the contact form on the other side though

    The only way it should be ABOVE the contact form is either if you have empty space in the form itself which needs to be removed or you did not specify the <tr> t(row) tag correctly. I use this on hundreds of sites.

    Maybe you should go back to basics in case you have some other code or divs getting into the way. Do the tables IN THE FORM like this:

    <table><tr><td>
    <p>Your Name (required)<br />
        [text* your-name] </p>
    <p>Your Email (required)<br />
        [email* your-email] </p>
    <p>Subject<br />
        [text your-subject] </p>
    <p>Your Message<br />
        [textarea your-message] </p>
    <p>[submit "Send"]</p>
    </td><td>
    <img src="http://mydomain.com/uploads/myimage1.jpg" alt="alt tag">
    </td></tr></table>

    It’s still putting the image above the table sorry.

    <table><tr><td>
    <p>Your Name (required)
    [text* your-name] </p>
    <p>Phone*
    [text* phone] </p>
    <p>Postcode*
    [text* postcode] </p>
    <p>How can we help?
    [textarea your-message] </p>
    <p>[submit “Send”]</p>
    </td><td>
    <img src=”http://www.supergeek.com.au/wp-content/uploads/2010/10/Contact-300×174.gif” alt=””>
    </td></tr></table>

    hhhmmm. Hate to admit I was wrong when I do this stuff for a living (websites not posting in this forum) but I was wrong. Sometimes I type faster than I think. you need to align the first cell to top so change the first line to:

    <table><tr><td style="vertical-align: top;">

    Here is an example with the only thig changed from your code is the style tag:
    http://webjunk.com/wordpress/table-example-for-cf7

    Never said I was perfect. Just dang close……

    No your great! That worked perfectly!! Any way I can make the table box invisible?

    That is dependant on your theme’s style.css which you could edit bit will effect site-wise. Probably either for table or td. Don’t know your page your on. You could try adding to the table:
    <table style=”border-style: none;”>
    and for td
    <td style=”vertical-align: top; border-style: none;”>

    no having much luck… but I will play with it over the next two days… im using twenty ten theme

    Check:
    #wp-calendar tbody td {
    background: #f5f5f5;

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Plugin: Contact Form 7] Adding an logo/image to the right of the input fields.’ is closed to new replies.