Often themes don’t offer great style support for plugins like Contact Form 7. Many other times when you’re doing a website from scratch the UI looks inconsistent and making the layout looking not that great.
Yes, you can get a beautiful form with Contact Form 7 without having to install extra plugins. And you can change the styles as much as you want so it looks simple and great.
First, remove the default styles from Contact Form 7:
add_filter( 'wpcf7_load_css', '__return_false' );
Second, Create your own style for your form, use it and re-use it!
This is how mine looks:
Submit
By having this simple template structure then you will replace your fields inside Contact Form 7 like this:
[textarea* message id:message class:text placeholder "Message"]
[text* fullname id:fullname class:text placeholder "Name"]
[email* email id:email class:text placeholder "Email*"]
Enviar
You can either use
or
Contact form 7 handle both of them either way.
Then you will just have to do a bit of some CSS. In my case I like using Stylus so this is an example of how I’d style my form:
.form-wrapper
max-width 600px
margin 0 auto
.text,
.submit
font-size 1rem
background transparent
border 2px solid white
color white
.text
transition background ease 200ms
border-radius 0 !important
padding 0.75rem
font-size 1rem
font-family inherit
width 100%
display block
+placeholder()
color white
&:focus
outline 0 none
background rgba(white,0.05)
.field
margin-bottom: 1rem
.submit
transition background ease 200ms, color ease 200ms
padding 1rem
width 100%
max-width 290px
margin 0 auto
&:hover
background rgba(white,0.05)
&:focus
background white
color darkbrown
.screen-reader-response
display: none
.wpcf7-not-valid
border 2px solid #B62626
& + span
text-align left
display: block
padding: 0.5rem 0.75rem
font-size 0.85rem
.wpcf7-response-output
margin-top:1rem
padding 1rem
position relative
background rgba(white,0.3)
&.wpcf7-display-none
display: none
&.wpcf7-validation-errors
background #B62626
&.wpcf7-validation-errors
background #B62626
&.wpcf7-mail-sent-ok
background #2B842E
Some things to consider:
- You may want to display or not .screen-reader-response
- +placeholder() is a mixin from Stylus I’ve created. Read more here.
This form I’ve used for mariafondevila.com. And it looks like this:
