How To Style The Contact Form 7 Submit Button

Contact form 7 is a WordPress plugin for building forms, it is one of the most popular and one that I use on this site and a few others. I really like the AJAX messages it gives to the users without refreshing the page. Skip the prose and go straight to the code. (this link only works after unlocking the content below). Thank you.

I have applied some CSS styling to the submit button so that it looks like other buttons on the site, in this case the send button on the contact form in my contact page. I have Googled it and there seems to be a fair amount of people struggling with the issue and putting ways to solve the problem forward, I have tried a few but some were either too complicated or didn’t work for me.

My best solution was to create a CSS style in the main WordPress theme stylesheet and then call the style from the plugin itself. This isn’t the most elegant solution but it works, the only problem is every time the plugin is updated (around once a month in the past few months) it wipes my style. So in order to update the plugin I need to go over the process again, sigh, worse still if there isn’t documentation on how to do it, it takes about half the time it takes to write this post to go and look for what I’ve done not long ago, so here it is, it may help some of you.

Yes, yes nice story but how do I do it? I hear you gasp impatiently. Patience grasshopper WordPress wasn’t built in a day. OK, let’s pretend the post begins on the next line.

About Pedro Matias

I'm a central London SEO consultant and private tutor, also specialise in WordPress web design and training. All SEO, web consulting and training approaches are centred on user experience, minimalism, speed and engineering centric design. Run 10K for lunch most days for fun and health.
This entry was posted in How To, Wordpress. Bookmark the permalink.