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.
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.
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.
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.