Hi Tyler, maybe it would be easier for you to start over. Here’s what I did and it works just fine:
fyi, I use both CF 7 and Mailpoet in my WordPress 4.0.1 site. You can see my forms at my site — a CF7 form is in the content area and a Mailpoet form is in the sidebar.
I wanted to have all my submit buttons look the same for visitors across any plugins that use buttons. I also wanted to have the button button look change depending on state (hover and click). When I added Mailpoet, I added css code for the Mailpoet buttons, so it was a simple matter to just add the same class to my CF7 form code:
<p>[submit class:wysija-submit-field "Send Message"]</p>
The button code that I put into custom.css (my theme’s additional css file) is:
.wysija-submit-field {
background: #fac903;
background-image: -webkit-linear-gradient(top, #fac903, #a86b02);
background-image: -moz-linear-gradient(top, #fac903, #a86b02);
background-image: -ms-linear-gradient(top, #fac903, #a86b02);
background-image: -o-linear-gradient(top, #fac903, #a86b02);
background-image: linear-gradient(to bottom, #fac903, #a86b02);
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10px;
font-family: Arial;
font-size: 20px;
font-weight:bold;
padding: 10px 10px 10px 10px;
border: solid #8c711f 2px;
text-decoration: none;
}
.wysija-submit-field:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
.wysija-submit-field:active {
background: #464747;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10px;
text-decoration: underline;
}
That css code gives 3 different looks for a button, and I can change the words for the button right in the CF7 form, so I can use different words for different forms. The button resizes in width to fit the button text.
I tried other methods (including putting the class into the <p>code in the CF7 form, but that didn’t work right. The above method works across all the major browser platforms.
If you put the css code into style.css then anytime you update your theme you’ll have to re-do the custom button code. This way if I want to globally change the look of the buttons my site visitors see, I only need to edit custom.css and change the above code information (e.g., the color numbers, the radius numbers, and the decoration) for each button state.
So to copy my method, you’d:
- revert your style.css to the default that comes with your theme, and also the CF7 button code
- add the css code I showed you above into the custom.css file (if you have one), or at the bottom of the style.css if you don’t. You can change the colors to fit your theme, and use a different class name if you want.
- add the class into the CF7 submit button code.
I hope this helps you.
