miguel.nz

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: