WordPress.org

Forums

Contact Form 7
Adding an logo/image to the right of the input fields. (14 posts)

  1. sugarcookies
    Member
    Posted 4 years ago #

    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

  2. deadbeatguitarist
    Member
    Posted 4 years ago #

    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.

  3. Fee
    Member
    Posted 4 years ago #

    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?

  4. Fee
    Member
    Posted 4 years ago #

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

  5. webjunk
    Member
    Posted 4 years ago #

    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>
  6. Fee
    Member
    Posted 4 years ago #

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

  7. webjunk
    Member
    Posted 4 years ago #

    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.

  8. webjunk
    Member
    Posted 4 years ago #

    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>
  9. Fee
    Member
    Posted 4 years ago #

    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-300x174.gif" alt="">
    </td></tr></table>

  10. webjunk
    Member
    Posted 4 years ago #

    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......

  11. Fee
    Member
    Posted 4 years ago #

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

  12. webjunk
    Member
    Posted 4 years ago #

    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;">

  13. Fee
    Member
    Posted 4 years ago #

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

  14. webjunk
    Member
    Posted 4 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic