Contact Form 7 bootstrap-styled submit buttons

Posted by on in WordPress

Normally you would use this short-code to create a submit button for your contact form:

[submit class:classname "Contact Us"]

Unfortunately if you add class:btn btn-primary to the sort-code above it’s not going to work properly. The button will be rendered like this:

‹input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit btn" /›

As you can see the “btn-primary” part will be omitted. One of the ways to fix it is to use jQuery’s addClass() function. To do so, simply add this code to your WordPress theme head template:

And your submit button short-code will be:

[submit "Contact Us"]