Styling Contact form 7 with tailwind & sass

It’s often nice to find a post where you can just copy paste the code and continue. That is the purpose of this post.

What Is Tailwind?

Tailwind is more than a CSS framework, it’s an engine for creating design systems. — Tailwind website

That sounds daunting, but its really super easy to get started! If you want to get started using WordPress with tailwind you can check out this awesome boilerplate project: https://github.com/mishterk/wp-tailwindcss-theme-boilerplate

Styling CF7 forms with bootstrap was a hassle and time-consuming. I found it much easier using tailwind. I usually start off by removing the extra <p> tags generated by CF7. That can be done by adding this to your theme functions.php file:

add_filter( 'wpcf7_autop_or_not', '__return_false' );

I have added “primary” as a custom color in tailwind.js file like this:

extend: {
    colors: {
        primary: "#1475be",

You can change that with whatever you want eg. text-blue-600. Or set your own primary to whatever you want.

My contact form code looks like this:

[text* your-name placeholder "Name"]
[email* your-email placeholder "E-mail"]
[text your-phone placeholder "Phone number"]
[textarea* your-message placeholder "Message"]
<div class="wpcf7-form-control-wrap">
  [submit "Send"]
</div>

Simple enough, finally this is my scss file:

// Contact form
// =≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠=≠
.contact-form {

  input {
    @apply block w-full px-4 py-3 mb-3 leading-tight border appearance-none text-primary font-semibold rounded;
    &:focus {
      @apply outline-none;
    }
  }

  textarea {
    @apply block w-full px-4 py-3 mb-3 leading-tight rounded border appearance-none text-primary font-semibold;
    &:focus {
      @apply outline-none;
    }
  }

  .wpcf7-submit {
    @apply py-2 mr-auto w-40 mt-3 text-lg font-bold text-white border-2 border-transparent bg-primary rounded shadow-md;
    &:hover {
      @apply bg-white text-primary border-primary shadow-lg;
    }
    &:focus {
      @apply outline-none;
    }
  }

  .wpcf7-form {
    @apply flex flex-wrap justify-center w-full max-w-lg mx-auto;
    &.sent {
      .wpcf7-form-control-wrap {
        @apply hidden;
      }
    }
  }

  .wpcf7-form-control-wrap {
    @apply w-full px-3 mb-0;
  }

  .wpcf7-not-valid {
    @apply border-red-600;
  }

  .wpcf7-not-valid-tip {
    @apply font-semibold text-xs text-red-600 block mb-1 -mt-1;
  }

  .wpcf7-response-output {
    @apply rounded border text-sm font-bold mt-0 my-auto relative;

    &.wpcf7-validation-errors {
      @apply border-red-600 text-red-600;
    }

    &.wpcf7-mail-sent-ok {
      @apply text-primary border-primary;
    }
  }

}

Don’t forget to create an account, get started developing locally, sync to stage and to production with ease, read more here

Check out how we can improve your WordPress Hosting