Styling WordPress Contact Form 7
July 12, 2015 / by Marco / Categories : Business, Websites, Wordpress
Styling a contact form can be a difficult task, especially for those like me that have very little programming experience but with some persistence (more like trial and error), I managed to style the contact form. The website is built using WordPress and the theme that was used is Unik.
The theme also had a built in Contact Form but it wasn’t customisable especially the way it sends out the information in the form so I decided not to use it. It was one of the reason why I had to use the plugin Contact Form 7.
Firstly, lets have a look at the default style for the Contact Form 7 – it looks like this:
As you can see the default style of the form is pretty boring and it actually doesn’t match the style guide of the website.
So the first step is to change the layout of the form. I wanted the Name, Your Email and Subject to be in the same row. The Your Message field and the Send button I wanted these to also be in a separate row. To do this, I ended up using the table syntax (yes I know most of you will say its best to use CSS but I didn’t have enough time to work this out so I used tables instead). Anyways, here’s the code that I used:
<table>
<tr>
<td>
<p>YOUR NAME (required)<br />
[text* your-name] </p>
</td>
<td>
</td>
<td>
<p>YOUR EMAIL (required)<br />
[email* your-email] </p>
</td>
<td>
</td>
<td>
<p>SUBJECT<br />
[text your-subject] </p>
</td>
<td>
</td>
</tr>
</table>
<table>
<tr>
<p>YOUR MESSAGE<br />
[textarea your-message] </p>
</tr>
<tr>
<p>[submit "Send Message"]</p>
</tr>
</table>You need to paste the code in the Form Tab in Contact Form 7.
Make sure to click Save. After these changes the form should look like this:
You will notice that the second and third row is not displaying full width for the second table and this is caused by some CSS syntax. So I wanted to make the following changes:
- Display full width
- Changed background colour
- Removed the borders around each field
- Changed the button and text colour
- Changed the text for each field and the button to be all uppercase.
Here’s the CSS code I used:
.wpcf7
{
background-color: #f7f7f7;
border: 0px solid #0f0;
}
table:not([class]) td, table:not([class]) th {
border: 0px;
}
input[type=submit] {
background: #ee1d24;
color: #00000;
font-size: medium;
display: block;
width: 100%;
height:50px;
text-transform: uppercase;
}
input[type=text], input[type=password], input[type=email], input[type=search], textarea{
margin-right:5px;
text-transform: uppercase;
height:45px;
width: 100%;
}I pasted this CSS code in the Unik theme’s Custom CSS section as shown below:
So after all the above changes the final Contact Form looked like this:
If you need to put a captcha box on the Contact Form then you need to install the plugin called Really Simple Captcha and add the code like below:
Press save and you will now see the Captcha box on the form:
WordPress – Popular Content Management System
Unik – Awesome WordPress Theme
Contact Form 7 – WordPress Plugin for contact forms
Really Simple Captcha – WordPress Captcha Plugin compatible with Contact Form 7
Marco / admin / 30 Nov
Writing day to day ramblings about making money, business, technology, sharing awesome deals and everything else that I know I'll forget. Follow my personal blog https://marcotran.com.au
I've recently also turned Vegan and started this website Veggie Meals - check it out
"When technology speaks for itself, that is art" - MT
Affiliate Compensated: there are some articles with links to products or services that I may receive a commission.
OTHER ARTICLES YOU MAY LIKE
A SMALL BUTTON, A BIG MILESTONE: MY FIRST SUPER THANKS
Every creator has milestones that feel both modest and momentous. Your first upload. Your first comment. Your first subscriber. And then one day, among the usual notifications, a new one pops up: your first Super Thanks. Mine came from a generous viewer, Frank Castlenut, who left a donation of five dollars alongside a kind note. […]
read more
NEW RUNNING BELT ON TEST: FIRST IMPRESSIONS AND HONEST THOUGHTS
There’s a special kind of anticipation that comes with unboxing fresh kit, especially something as personal as a running belt. It’s the bit of gear that sits closest to you on every run, carrying your phone, keys, gels and—in this case—a water bottle, all while ideally disappearing from your awareness once you’re moving. Today’s subject […]
read more
