skip to Main Content
Contact Form 7 CSS Boilerplate

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.

CSS

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.

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

 

Gist File

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

Jasper

Been working with WordPress, SEO, content marketing and the web for 12+ years. When I am not coding, reading about the web or dreaming the web of things I travel or run a few blocks

Leave a Reply

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

Back To Top