One web design element I absolutely love customizing is the contact form. I know, so exciting right?! I’m not sure why this is a thing for me, but it is. WordPress users, today I have a short tutorial for you on how to customize your contact form if you’re using the plugin Contact Form 7. I highly recommend using this plugin because it has a simple markup and won’t slow down your site, it can be customized in so many ways, and it has 1 million+ users with a rating of 4.5 stars. NBD.
Let’s go through the process of customizing a basic contact form for your blog or website. The end result will look a lot like the contact form we have on this site, but you can always decide to make it fancier and/or more inline with your brand.
First, install and activate the Contact Form 7 plugin if you haven’t already.
In your WordPress Dashboard, go to Contact > Add New. You’ll want to name the contact form and press “save”, and you will see a shortcode that you can place into your contact page. When you preview your page, your default contact form will look similar to this:
Before we add code, we need to make sure all of the contact fields are correct. Go back to your “Edit Contact Form” page and insert whatever fields you need. Contact Form 7 gives you a bunch of options to choose from so just click whatever field you need, and it’ll appear.
Something I also like to do is put the labels inside of the fields rather than above them. To do that, remove all the text between the <p> tags except for the shortcode. Then add placeholder “field name” to the very end of each shortcode. Obviously replace “field name” with the actual field name. ;)
Afterward your HTML will look something like this:
<p>[text* your-name placeholder “your name”]</p>
<p>[email* your-email placeholder “your email”]</p>
<p>[text your-subject placeholder “subject”]</p>
<p>[textarea your-message “message”] </p>
<p>[submit “Send”]</p>
Save your changes and refresh your contact page to see the updated form:
Now we’re at the fun part! Customizing with CSS. Copy and paste the codes below into your CSS stylesheet and tweak them as necessary (view our CSS cheat sheet as a helpful reference).
Edits the text within each field:
.wpcf7 input, .wpc7f textarea {
padding: 16px;
width: 100%;
font-family: futura-pt;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
font-size: 13px;
background: #fff9f7;
border: 1px solid #ffb2a0;
}
Controls spacing between each field:
.wpcf7 p {
margin-bottom: 12px;
}
Customizes “send” button (regular and on hover):
.wpcf7-submit {
background: #ffb2a0;
width: 100%;
}
.wpcf7-submit:hover {
opacity: 0.7;
}
Here is the final result:
And there you go! Another great thing about Contact Form 7 is that it’s already mobile responsive so that’s one less thing to worry about.
Hope you found this tutorial helpful. Send any questions my way!
Anne @ Yeys.com says
Nice tutorial, thanks! Some WordPress themes seem to handle the forms well on their own (their CSS taking over) but others probably need a little bit of help ;)
Kelly says
I love this code! However I’m having trouble with it. For some reason, it’s only coding the name, email, and subject fields, and not the message or send fields. Here is a screenshot: https://snag.gy/5TUpzr.jpg
I was wondering if you knew why it was doing this. I did the actual form code properly, and I even looked at the stylesheet for the plugin itself but I couldn’t find anything on why it wasn’t making the last two fields work.
Jennifer says
Hi Kelly! Sorry about that. Try this code instead:
.wpcf7 input, .wpc7f textarea {
padding: 16px;
width: 100%;
font-family: futura-pt;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
font-size: 13px;
background: #fff9f7;
border: 1px solid #ffb2a0;
}
I’m not sure why the Send button isn’t being customized. Email me and I can look into it more! :)
Kelly says
Hey there,
Unfortunately that didn’t work either. The first three fields were still customized, but yet again the message and send fields were not. This is an odd misfortune. If you’d like to talk about it more one-on-one, my email is hazygreenroad@gmail.com
Thanks!
Olivia says
I was having the same issue and I believe I found the solution!
This snippet:
.wpcf7 input, .wpc7f textarea {
…
}
Should be:
.wpcf7 input, .wpcf7 textarea {
…
}
I also noticed that the font color on the send button was white making it hard to see against the light pink so I adjusted the CSS so that the font was a different color.
Amazing blog post by the way! Super helpful!
Belle says
Thanks for this, it was (almost) very helpful. I have my contact form 80% of the way exactly how I want it, but for some reason it’s not obeying the 100% width. Screenshot: http://screencast.com/t/Cc31mxS1
Code:
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea {
display: block;
margin-bottom: 5px;
width: 100%;
border: 1px solid #7054a3;
font-weight: 300;
}
.wpcf7 button,
.wpcf7 input[type=”button”],
.wpcf7 input[type=”submit”] {
background: #e8e5ea;
color: #6A676D;
border: 1px solid #7054a3;
width: 100%;
font-weight: 300;
}
.wpcf7 button:hover,
.wpcf7 input:hover[type=”button”],
.wpcf7 input:hover[type=”submit”] {
background: #7054a3;
color: #ffffff;
opacity: 0.7;
}
I’m wondering if it’s because there’s “size=”40” on the input fields but I can’t seem to find in any of the php files where that’s defined or how to get rid of it.
Any suggestions?
Jennifer says
Hi Belle!
Sorry the coding is giving you trouble. I’m not able to figure out what is going wrong without seeing the actual contact form, but feel free to send me an email and I can look into it more! :) jennifer@earlgreycreative.com
Jax says
Hi there, thanks for the fab tutorial! I am also having issues with the send button not customising (everything else is fine!) Was wondering if this issue had been solved?
Jennifer says
Hi Jax! You might want to try replacing .wpcf7-submit with:
.wpcf7 input[type=”submit”]
If this doesn’t work, feel free to send an email to jennifer@earlgreycreative.com and I can help more! :)
Kelly Siech says
hey! I tried your codes and for some reason they will not apply to the “message” input. Also, I want to add opacity to all the text areas but, the “send button”, but it changes them all. any suggestions?
Jennifer says
Hi Kelly!
For the message input, you’ll need to make sure you’re using the selector “.wpc7f textarea”. For the send button issue, I would recommend adding something like:
.wpcf7-submit {
opacity: 1;
}
or whatever code you need so that the send button’s style overrides the input style. Technically they’re all classified as “input”.
Send me an email if it still doesn’t work and I’ll take a look! jennifer@earlgreycreative.com. :)