[Plugin: Contact Form 7] custom submit button

hi peachorama,
sure you can. give the submit button a class and then edit the form’s css file and use the image as a background. if you need more clarification let me know, turning in for tonight.

7

Could you explain a little bit more ms7of9 because I would like to do the samething.

In case anyone else comes across this old post …

1. Open the CSS style sheet for the Contact Form 7 (stylesheet.css).
2. Add a new style for a “submit” button …

.contactSubmit{
padding:8px 0 10px 0px;
color:#FF0000;
border:none;
width:85px;
height:30px;
text-align:center;
background-image:url(images/contact_submit.gif);
background-repeat:no-repeat;
}

3. Re-upload the stylesheet.css to your web server (( wp-content > plugins > contact-form-7 > stylesheet.css ))

Note* You’ll need to create a “button” background image and upload that to the images folder in the contact-form-7 plugins folder on your web server (see #3 above for the path to the images folder).

4. Go into the WordPress Admin for Contact Form 7
5. You can select the “Generate Tag” tab and select “Submit Button”
6. For the class (optional) set that to your new style “contactSubmit”
7. Copy and paste the code generated into your Contact Form 7 code panel…

<p>[submit id:submitbttn class:contactSubmit “submit”]</p>

You can view the effect in the contact section of my blog site (still in progress as of this response) … https://www.designrefresh.com/blog

Good luck.

What file do you need to hack into to add the class to the submit button?

This is the file you need to hack into:

modules/submit.php

$html = ‘<input type=”submit” value=”‘ . esc_attr( $value ) . ‘”‘ . $atts . ‘ />’;

Add you class in the above line

bobs your uncle!

@dynamoash Thanks for the hack info! This came in handy with the most recent upgrade of the plugin. I used an ID that was written into the code before to style my submit button, and it was removed with the most recent release. This was exactly what I needed to know.

Dynamoash. You’re the man. Thanks for saving me on this one. It worked perfectly. This “simple” form plugin seems to require more than a little tweaking.

Cheers! ??

You don’t need to edit any codes of the plugin to set class or id.

To set class:

[submit class:foo]

To set id:

[submit id:bar]