Contact Form 7 Styling Example

_contact-form.scss

+.wpcf7-form {
+  @include breakpoint(md) {
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  p {
+    label {
+      width: 100%;
+      font-weight: bold;
+    }
+    input, textarea {
+      width: 100%;
+      border: 0;
+      border: 1px solid $color-primary;
+      border-radius: 2px;
+      margin-bottom: 20px;
+      padding: 4px 5px;
+      background-color: rgba($color-primary, .05);
+      &:focus {
+        background-color: rgba($color-primary, .10);
+        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
+      }
+    }
+    input[type=submit] {
+      padding: 22px 38px;
+      background-color: $color-primary;
+      font-size: 20px;
+      display: inline-block;
+      font-weight: bold;
+      transition: .1s;
+      border: 1px solid $color-primary-light;
+      border-radius: 5px;
+      color: #fff;
+      box-shadow: 0px 4px 0px 0px $color-primary-light;
+      &:hover {
+        color: #fff;
+        opacity: .9;
+      }
+    }
+  }
+}
+
+// Adjust positioning for not valid message below form fields
+span.wpcf7-not-valid-tip {
+  margin-top: -20px;
+  margin-bottom: 20px;
+}
+
+div.wpcf7-response-output {
+  padding: 10px 12px !important;
+  margin-top: -20px;
+}