Posted 2 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 ?
Posted 2 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.
}
Posted 2 years ago #
doesn't this make the cursor into an arrow when hovering on the button?
Posted 1 year 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?
Posted 1 year 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.
Posted 1 year 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?
This topic has been closed to new replies.
