Contact Form 7のデザインを見やすく変更しよう！【WordPress/CSS】

WordPressでお問い合わせフォームを作れるプラグインで有名なContact Form 7ですが初期デザインはかなりシンプルですよね。

今回はContact Form 7で作ったお問い合わせフォームのデザインをカスタマイズして見やすくする方法を解説していきます。

コピペOKなのでぜひ参考にしてみてください。

まだContact Form 7を使ったことがない方や設定方法が分からない方は「Contact Form 7でWordPressにお問い合わせフォームを設置しよう！ 」をご覧ください。

完成イメージ
フォームのHTMLを変更
- 変更前
- 変更後
装飾用のCSSを追加
- style.css
おまけ
まとめ

完成イメージ

まずは完成イメージを見てみましょう。

下記のリンクから実際のページも確認できます。
・お問い合わせページを見る

PCのデザイン

横並びのレイアウトに変更し色をつけて見やすいデザインにしています。

スマホのデザイン

スマホでは縦並びのデザインに変更しています。

エラー画面のデザイン

エラー項目は太字で分かりやすくしています。

フォームのHTMLを変更

まずはフォームのHTMLを変更します。
WordPressの管理画面にログインしましょう。

左メニューの「お問い合わせ」をクリックします。
変更したいフォーム名をクリックします。
※今回は初期状態のフォームを使用していますがご自身の状況によりフォームの名前が違う場合もあります。

続いてフォームのHTMLを変更します。

変更前

変更後

下記のHTMLコードをコピーし貼り付けてください。
最後に「保存」をクリックしましょう。

変更したHTMLコード

<div class="p-form">
  <div class="p-form__items">
    <div class="p-form__heading"><span class="p-form__label p-form__label--required">必須</span>氏名</div>
    <div class="p-form__detail">[text* your-name]</div>
  </div>
  <div class="p-form__items">
    <div class="p-form__heading"><span class="p-form__label p-form__label--required">必須</span>メールアドレス</div>
    <div class="p-form__detail">[email* your-email]</div>
  </div>
  <div class="p-form__items">
    <div class="p-form__heading"><span class="p-form__label p-form__label--required">必須</span>題名</div>
    <div class="p-form__detail">[text* your-subject]</div>
  </div>
  <div class="p-form__items">
    <div class="p-form__heading"><span class="p-form__label p-form__label--free">任意</span>メッセージ本文</div>
    <div class="p-form__detail">[textarea your-message]</div>
  </div>
  <div class="p-form__submit">
    [submit "送信"]
  </div>
</div>

装飾用のCSSを追加

CSSはテーマ内のstyle.cssに追記します。
使用しているテーマによってはCSSを追加できる画面があるのでそこに入力してください。

※CSSの更新方法が分からない方やCSSを追加できる画面がない方は下記の記事をご覧ください。
Simple Custom CSSでテーマを編集しないでCSSをカスタマイズする方法

style.css

.p-form {
  margin-top: 3em;
}
.p-form__items {
  border-top: 1px solid #dddddd;
  padding-top: 2em;
}
@media only screen and (min-width: 1024px) {
  .p-form__items {
    display: flex;
  }
}
.p-form__items + .p-form__items {
  margin-top: 2em;
}
.p-form__heading {
  font-weight: bold;
}
@media only screen and (min-width: 1024px) {
  .p-form__heading {
    width: 200px;
  }
}
.p-form__label {
  font-size: 0.8em;
  display: inline-block;
  padding: 0 0.5em;
  color: #FFFFFF;
  margin-right: 1em;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.p-form__label--required {
  background-color: #d40000;
}
.p-form__label--free {
  background-color: #666666;
}
@media only screen and (max-width: 1023px) {
  .p-form__detail {
    margin-top: 1em;
  }
}
@media only screen and (min-width: 1024px) {
  .p-form__detail {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
.p-form__submit {
  margin-top: 2em;
  border-top: 1px solid #dddddd;
  padding-top: 2em;
}
.p-form input.wpcf7-form-control.wpcf7-text,
.p-form textarea.wpcf7-form-control.wpcf7-textarea {
  outline: 0;
  margin: 0;
  width: 100%;
  border: 1px solid #666666;
  padding: 1em;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  transition: 0.36s;
}
.p-form input.wpcf7-form-control.wpcf7-text:focus,
.p-form textarea.wpcf7-form-control.wpcf7-textarea:focus {
  border-color: #409ad5;
  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
}
.p-form span.wpcf7-not-valid-tip,
.p-form .wpcf7-response-output.wpcf7-validation-errors {
  color: #d40000;
  font-weight: bold;
}
.p-form input.wpcf7-submit {
  cursor: pointer;
  outline: 0;
  margin: 0;
  border: none;
  width: 100%;
  padding: 1em;
  background: #409ad5;
  color: #FFFFFF;
  font-size: 1.2em;
  font-weight: bold;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  transition: 0.36s;
}
.p-form input.wpcf7-submit:hover {
  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
}

CSSのコードを追加したらリロードして反映されているか確認してください。
無事に反映されていれば完了です。

おまけ

今回、用意したCSSですがSCSSで記述していたのでおまけで載せておきます。
Sassを使用している方は下記のコードを利用してカスタマイズしてみてください。

Sassって何？という方は「Sassって何？Sassを使って効率的にコーディングしよう! 」をご覧ください。

style.scss

$color-key: #409ad5;
$color-gray: #666666;
$color-border: #dddddd;
$color-required: #d40000;

.p-form {
  margin-top: 3em;
  &__items {
    border-top: 1px solid $color-border;
    padding-top: 2em;
    @media only screen and (min-width: 1024px) {
      display: flex;
    }
    & + & {
      margin-top: 2em;
    }
  }
  &__heading {
    font-weight: bold;
    @media only screen and (min-width: 1024px) {
      width: 200px;
    }
  }
  &__label {
    font-size: 0.8em;
    display: inline-block;
    padding: 0 .5em;
    color: #FFFFFF;
    margin-right: 1em;
    -webkit-border-radius: 2px;
            border-radius: 2px;
    &--required {
      background-color: $color-required;
    }
    &--free {
      background-color: $color-gray;
    }
  }
  &__detail {
    @media only screen and (max-width: 1023px) {
      margin-top: 1em;
    }
    @media only screen and (min-width: 1024px) {
      -webkit-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }
  }
  &__submit {
    margin-top: 2em;
    border-top: 1px solid $color-border;
    padding-top: 2em;
  }
  input.wpcf7-form-control.wpcf7-text,
  textarea.wpcf7-form-control.wpcf7-textarea {
    outline: 0;
    margin: 0;
    width: 100%;
    border: 1px solid $color-gray;
    padding: 1em;
    -webkit-border-radius: 2px;
            border-radius: 2px;
    transition: .36s;
    &:focus {
      border-color: $color-key;
      box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.10);
    }
  }
  span.wpcf7-not-valid-tip,
  .wpcf7-response-output.wpcf7-validation-errors {
    color: $color-required;;
    font-weight: bold;
  }
  input.wpcf7-submit {
    cursor: pointer;
    outline: 0;
    margin: 0;
    border: none;
    width: 100%;
    padding: 1em;
    background: $color-key;
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: bold;
    -webkit-border-radius: 2px;
            border-radius: 2px;
    transition: .36s;
    &:hover {
      box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.10);
    }
  }
}