📧

【WordPress】 Contact Form 7 をレスポンシブ対応のいい感じのCSSでカスタマイズ

2023/04/14に公開

CSS

この記事に書いたこと

ワードプレスのContact Form 7 のスタイルを調整するCSSを書いたのでよければお使いください。
コピペで実装すると下の画像のようになります。

モバイル版とPC版

やり方

Step1

下記のコードをContact Form 7のプラグインの設定ページに貼り付けてください。
ラベルなどは各々で変更してください。ラベルについて詳しいことは下記ドキュメント参照してください。
https://contactform7.com/tag-syntax/

html

<div class="form__container">
  <p><span class="tag warning-color">必須</span><label for="" class="form__label">お名前</label></p>
  [text* your-name]

  <p><span class="tag warning-color">必須</span><label for="" class="form__label">メールアドレス</label></p>
  [email* your-email]

  <p><span class="tag secondary-color">任意</span><label for="" class="form__label">件名</label></p>
  [text your-subject]

  <p><span class="tag warning-color">必須</span><label for="" class="form__label">お問い合わせ内容</label></p>
  [textarea* your-message]
</div>

<div class="form__buttonBox">
  <button type="submit" class="form__button">送信する</button>
</div>

Step2

下記のCSSをご使用ください。プラグインの "Simple Custom CSS and JS" をお使いいただくのが一番簡単かなと思います。

慣れている方は

form__button は適当にスタイル当てていますが、気に入らなければ各自変更してください。

css

.form__container {
  display: grid;
  align-items: start;
  grid-template-columns: 1.25fr 3fr;
  gap: 1em;
}
.form__container > p {
  margin-bottom: 0;
}
@media (max-width: 770px) {
  .form__container {
    grid-template-columns: 1fr;
  }
}
.form__buttonBox {
  text-align: center;
  gap: 0;
}
.form__button {
  min-width: 120px;
  padding: 0.5em 1em;
  color: white;
  background-color: skyblue;
  border-radius: 4px;
  border: 1px solid rgb(196, 196, 196);
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05);
  font-weight: bold;
}
@media (max-width: 770px) {
  .form__button {
    width: 100%;
  }
}
.form__button:hover {
  color: white;
  background-color: rgb(169, 169, 169);
  box-shadow: none;
}
.form__label {
  padding-left: 0.5em;
}

.wpcf7-form {
  margin: auto;
  max-width: 700px;
}

.wpcf7-form-control {
  border: 1px solid #d0d0d0;
  height: 36px;
  width: 100%;
}

.wpcf7-textarea {
  height: 300px;
  resize: none;
}

.warning-color {
  color: red;
}

.secondary-color {
  color: blue;
}

以上です。ご覧いただきありがとうございました。

番外編　SCSS

必要かわかりませんが、SCSSの場合も下に書きました。よしなに。

scss

/* contact form7 */
.form {
  &__container {
    display: grid;
    align-items: start;
    grid-template-columns: 1.25fr 3fr;
    gap: 1em;

    >p {
      margin-bottom: 0;
    }

    @media(max-width: 770px) {
      grid-template-columns: 1fr;
    }
  }

  &__buttonBox {
    text-align: center;
    gap: 0;
  }

  &__button {
    min-width: 120px;
    padding: 0.5em 1em;
    color: white;
    background-color: skyblue;
    border-radius: 4px;
    border: 1px solid rgb(196, 196, 196);
    box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05);
    ;
    font-weight: bold;

    @media(max-width: 770px) {
      width: 100%;
    }

    &:hover {
      color: white;
      background-color: rgb(169, 169, 169);
      box-shadow: none;
    }
  }

  &__label {
    padding-left: 0.5em;
  }

}

.wpcf7 {
  &-form {
    margin: auto;
    max-width: 700px;
  }

  &-form-control {
    border: 1px solid #d0d0d0;
    height: 36px;
    width: 100%;
  }

  &-textarea {
    height: 300px;
    resize: none;
  }
}

.warning-color {
  color: red;
}

.secondary-color {
  color: blue;
}