skip to Main Content
Contact Form 7 CSS Boilerplate

Basic Contact Form 7 CSS styling is horrible. Here a basic setup in CSS I have been working on and will update from time to time. A gist at Github I set up based on one by codehandling. Make sure you do not use the labels and that you check the configuration.

Basic Form Configuration

In Contact Form 7 remove the labels and add placeholders. This will make the form look way more modern and appealing. Here is the basic setup:

[text* your-name placeholder "name"] 

[email* your-email placeholder "email"] 

[textarea your-message class:comment-form] 

[submit "Send"]

As you can see the basic labels have been removed and placeholders have been added for the name and email fields.

Complete Contact Form 7 CSS Boilerplate

So here the actual Contact Form 7 CSS Boilerplate I was talking about. Take it and tweak it to your liking. This setup is responsive and shows a decent form without labels and with placeholders. I have made the fields cover the full width of the form, not just half. I also gave the fields nice rounded corners and a decent submit button.Text in the fields is styled too.

Here is the complete Contact Form 7 CSS Boilerplate:

/***********basic************/

/*Form width*/
.wpcf7 {
    text-align: left;
    width: 90%;
}

/*Input Field widths*/
.wpcf7-text, .wpcf7-textarea {
    width: 100%;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
}

.wpcf7-text {

	height: 50px;
    padding-left: 10px;

}
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #129FEA;
}

/*Label Font*/
.wpcf7-form p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

/*Submit button Font*/
.wpcf7-submit {
    width: 85%;
    font-size: 15px !important;
    background: #4a97c2 !important;
    color: #fff !important;
    padding: 20px;
}

/*Submit button Hover*/
.wpcf7-submit:hover {
    background: #3b86b0 !important;
}

/*Response messages - Error & Success*/
.wpcf7-response-output {
    margin-bottom: 30px !important;
}

/***********borders************/

/*Form border*/
.wpcf7 {
    padding: 20px 25px !important;
    padding-bottom: 0px !important;
}

/*Input Field borders*/
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #8F8F8F !important;
}

/*Submit button Background*/
.wpcf7-submit {
    background: #7E7E7E !important;
    color: #fff !important;
}

/*Submit button Hover*/
.wpcf7-submit:hover {
    background: #5F5F5F !important;
}

/***********colors************/

/*Submit button background & border*/
.wpcf7-submit {
    background-color: #1d2731 !important;
    border: 2px solid #5A5050 !important;
    color: #5A5050 !important;
    font-weight: bold !important;
}

/*Submit button Hover styles*/
.wpcf7-submit:hover {
    background-color: rgba(29, 39, 49, 0.66) !important;    
    border-color: #4CAF50 !important;
    color: #4CAF50 !important;
}

/*Label Text color*/
.wpcf7-form p {
    color: #FFF;
}

.wpcf7-form label{
	/*display: none;*/
}

/*Input Field Text color*/
.wpcf7-text, .wpcf7-textarea {
	color: #777;
}

/****background-images********/

/*Form background*/
.wpcf7 {
    /*background-image: url(http://i.imgur.com/iAFPf0G.jpg);*/
    background-color: rgba(255, 255, 255, 0.2);
    background-position: center;
    background-size: cover;
}

/*Label Text color*/
.wpcf7-form p {
    /*display: none;*/
    /*color: #000000;*/
}

/*Submit button background & border*/
.wpcf7-submit {
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
}

/*Submit button Hover styles*/
.wpcf7-submit:hover {
    border-color: transparent !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #FFFFFF !important;
}

/*Input Field border*/
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #5A3D3D !important;
}

NB Here the  Gist File at Github Gists.

End Result

The end result I will show you now with a screenshot. The theme itself is not quite done yet. Once it is up for sale I will update this post.

Contact Form 7 Styled

 

 

Fork it, adjust it to your liking. If you enjoyed it do leave a comment or link to the blog post. Appreciate it.

Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top