Yes, you can get beautiful forms with Contact Form 7

October 28, 2017   |   2 minutes read.

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:

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*"]

You can either use


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:

  max-width 600px
  margin 0 auto
    font-size 1rem
    background transparent
    border 2px solid white
    color white
    transition background ease 200ms
    border-radius 0 !important
    padding 0.75rem
    font-size 1rem
    font-family inherit
    width 100%
    display block
      color white
      outline 0 none
      background rgba(white,0.05)
    margin-bottom: 1rem
    transition background ease 200ms, color ease 200ms
    padding 1rem
    width 100%
    max-width 290px
    margin 0 auto
      background rgba(white,0.05)
      background white
      color darkbrown
    display: none
    border 2px solid #B62626
    & + span
      text-align left
      display: block
      padding: 0.5rem 0.75rem
      font-size 0.85rem
    padding 1rem
    position relative
    background rgba(white,0.3)
      display: none
      background #B62626
      background #B62626
      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: