WordPress.org

Ready to get started?Download WordPress

Forums

contact form 7 image as submit button ? (6 posts)

  1. atech714
    Member
    Posted 4 years ago #

    Is there an easy or standard way to use an image for a submit button on contact form 7 ? I have modified the plugin to use a background image for the button but this solution is bad in 2 ways.

    1. updates break it.

    2. button does not get recognized as a link on mouseover as its a bg image.

    Anyone know of a way to get this functionality in a cleaner way ?

  2. e2tango
    Member
    Posted 4 years ago #

    I know its a bit late, but I came across your post when I was looking into how to do it. No one had the answer, so I just kind of tried my own thing.
    Kind of a round about way of doing it, but it works...
    In the preferences of your contact form add change your submit button to look like this:

    [submit class:submit_button "Send"]

    Now in your styles.css file add the following:

    .submit_button{
     color: #FFFFFF; <-- change FFFFFF
     font-size: 0px;
     width: 11111px; <-- change 11111
     height: 11111px; <-- change 11111
     border: none;
     margin: 0;
     padding: 0;
     background: #FFFFFF url(./images/submit.gif) 0 0 no-repeat; <-- submit.gif needs to be the same size as the width / height you set previously.
    }
  3. Matija Erceg
    Member
    Posted 4 years ago #

    doesn't this make the cursor into an arrow when hovering on the button?

  4. alintx
    Member
    Posted 4 years ago #

    Got this in place, now how about making it also a link to another page, so they submit their form and then get sent to another page?

  5. Murf
    Member
    Posted 4 years ago #

    IE doesn't like your zeroing the font size. It stays barely visible. Here's a fix:

    change
    [submit class:submit_button "Send"]
    to
    [submit class:submit_button " "]

    To get the cursor to do the normal mouseover effect add "cursor:pointer;" to your css.

  6. petrusfajarsubekti
    Member
    Posted 4 years ago #

    So i have to change the /images/submit.gif with another address for image?
    Or i have to overwrite the submit.gif image with another image?
    I want to experiment with my blog so i can make up it.

    Any idea better?

Topic Closed

This topic has been closed to new replies.

About this Topic