MENU
WordPressの「つくる」と「困った」をやさしくサポート
  1. ホーム
  2. サイトづくりメモ
  3. Contact Form 7のデザインをおしゃれにカスタマイズ！コピペで使えるCSSスニペット8選

Contact Form 7のデザインをおしゃれにカスタマイズ！コピペで使えるCSSスニペット8選

当ページのリンクには広告が含まれています。
サイトづくりメモ

「Contact Form 7を使っているけど、デザインがシンプルすぎてサイトと合わない…」
「CSSを書く時間がないので、すぐ使えるコードが欲しい」
「フォームのデザインでサイトのクオリティを上げたい」

Contact Form 7はWordPressで最も使われているフォームプラグインですが、デフォルトのままだとどうしても素っ気ない見た目になりがちです。

この記事では、コピー＆ペーストだけで使えるデザインスニペット集をご用意しました。テーマやサイトのトーンに合わせて選べるよう、複数のデザインパターンを掲載しています。CSSやHTMLの知識がなくても大丈夫です。

この記事でわかること
  • Contact Form 7のデザインをおしゃれにする方法
  • コピペで使えるフォームコード（5カテゴリ・全11デザイン）
  • フォームの使い分けのポイント
目次

使い方

コードのコピペは以下の手順で行ってください。

  1. WordPress管理画面 →「お問い合わせ」→ 対象のフォームを開く 2.「フォーム」タブの内容をすべて選択して削除する
  2. 下記のコードを貼り付けて「保存」

ポイント [text*] の * は必須項目を意味します。任意項目にしたい場合は * を外してください。 フォームを新規作成してから貼り付けると、既存のフォームに影響が出ないので安心です。

収録デザイン一覧

カテゴリデザイン名雰囲気
シンプルお問い合わせMINIMALモノトーン・クール
シンプルお問い合わせNATURALナチュラル・温かみ
シンプルお問い合わせSHARPダーク・エッジの効いた
シンプルお問い合わせELEGANTゴールド・高級感
見積もり依頼MINIMALクール系・会社向け
見積もり依頼SHARPダーク・インパクト重視
採用応募NATURAL温かみ・親しみやすさ
採用応募ELEGANTフォーマル・丁寧さ
予約・申し込みMINIMALシンプル・使いやすい
予約・申し込みNATURALやわらかい・サービス向け
かわいい系FLUFFY水色×丸み・ポップ
かわいい系HANDWRITTEN手書き風・ほっこり
かわいい系CHICミニマル×かわいい
かわいい系PASTELパステルグラデーション

シンプルお問い合わせ

MINIMAL（ミニマル）

黒背景×ライムイエローのアクセントが特徴のクールなデザイン。ポートフォリオやデザイン系のサイトに合います。

    お名前 必須

    会社名・屋号

    メールアドレス 必須

    電話番号

    お問い合わせ種別

    希望の連絡方法

    メール電話どちらでも可

    お問い合わせ内容 必須

    確認画面は表示されません。上記内容にて送信しますがよろしいですか？ 必須 

    <style>
.cf7-minimal {
  width: 100%;
  max-width: 100%;
  background: #0f0f0f;
  padding: 32px;
}
.cf7-minimal .fm-group {
  margin-bottom: 24px;
}
.cf7-minimal .fm-label {
  display: block;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}
.cf7-minimal .wpcf7-not-valid-tip
.cf7-minimal .fm-label span {
  font-size: 12px;
  color: #dc3545;
}
.cf7-minimal input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.cf7-minimal textarea,
.cf7-minimal select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #333;
  padding: 10px 0;
  font-size: 14px;
  color: #f0f0f0;
  outline: none;
  transition: border-color .2s;
}
.cf7-minimal input:focus,
.cf7-minimal textarea:focus,
.cf7-minimal select:focus { border-color: #c8f135; }
.cf7-minimal textarea { height: 80px; resize: none; }
.cf7-minimal select option { background: #1a1a1a; }
.cf7-minimal .wpcf7-submit {
  width: 100%;
  background: transparent;
  border: 1px solid #f0f0f0;
  color: #f0f0f0;
  font-size: 11px;
  letter-spacing: 3px;
  padding: 12px 32px;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
}
.cf7-minimal .wpcf7-submit:hover { background: #f0f0f0; color: #000; }
</style>

<div class="cf7-minimal">
  <div class="fm-group">
    <p class="fm-label">お名前<span> 必須</span></p>
    [text* your-name placeholder "山田 はなこ"]
  </div>
  <div class="fm-group">
    <p class="fm-label">会社名・屋号</p>
    [text company-name placeholder "株式会社〇〇"]
  </div>
  <div class="fm-group">
    <p class="fm-label">メールアドレス<span> 必須</span></p>
    [email* your-email placeholder "****@mail.com"]
  </div>
  <div class="fm-group">
    <p class="fm-label">電話番号</p>
    [tel your-tel placeholder "****-***-***"]
  </div>
  <div class="fm-group">
    <p class="fm-label">お問い合わせ種別</p>
    [select* service-type "製品・サービスについてのお問い合わせ" "お仕事・お見積もりのご依頼" "資料請求" "採用に関するお問い合わせ" "取材・メディア掲載のご依頼" "その他"]
  </div>
  <div class="fm-group">
    <p class="fm-label">希望の連絡方法</p>
    [radio radio "メール" "電話" "どちらでも可"]
  </div>
  <div class="fm-group">
    <p class="fm-label">お問い合わせ内容<span> 必須</span></p>
    [textarea* your-message placeholder "お問い合わせ内容をご記入ください"]
  </div>
  <div class="fm-group">
    <p class="fm-label">確認画面は表示されません。上記内容にて送信しますがよろしいですか？<span> 必須</span></p>
    [checkbox* checkbox-712 use_label_element "はい"]
  </div>
  [submit "SEND MESSAGE"]
</div>

    NATURAL（ナチュラル）

    オフホワイトの背景にグリーン系ボタン。ナチュラル系・ライフスタイル系のサイトにぴったりです。

      お問い合わせ

      お名前 必須

      会社名・屋号

      メールアドレス 必須

      電話番号

      お問い合わせ種別

      希望の連絡方法

      メール電話どちらでも可

      お問い合わせ内容 必須

      確認画面は表示されません。上記内容にて送信しますがよろしいですか？ 必須 

      <style>
.cf7-natural {
  width: 100%;
  max-width: 100%;
  background: #faf8f3;
  padding: 40px;
  border-radius: 2px;
}
.cf7-natural .fn-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #5c5245;
  margin-bottom: 6px;
}
.cf7-natural .wpcf7-not-valid-tip,
.cf7-natural .fn-label span {
  font-size: 12px;
  color: #dc3545;
}
.cf7-natural .fn-group { margin-bottom: 20px; }
.cf7-natural input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.cf7-natural textarea,
.cf7-natural select {
  width: 100%;
  background: #fff;
  border: 1.5px solid #e5ddd3;
  padding: 10px 14px;
  font-size: 14px;
  color: #333;
  outline: none;
  border-radius: 2px;
  transition: border-color .2s;
}
.cf7-natural input:focus,
.cf7-natural textarea:focus,
.cf7-natural select:focus { border-color: #a8c5a0; }
.cf7-natural textarea { height: 80px; resize: none; }
.cf7-natural .fn-title {
  font-size: 22px;
  color: #3a3028;
  margin-bottom: 28px;
  letter-spacing: -0.5px;
}
.cf7-natural .wpcf7-submit {
  width: 100%;
  background: #5c8a55;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 13px;
  cursor: pointer;
  border-radius: 2px;
  transition: background .2s;
  letter-spacing: 1px;
}
.cf7-natural .wpcf7-submit:hover { background: #4a7244; }
</style>

<div class="cf7-natural">
  <p class="fn-title">お問い合わせ</p>
  <div class="fn-group">
    <p class="fn-label">お名前<span> 必須</span></p>
    [text* your-name placeholder "山田 はなこ"]
  </div>
  <div class="fn-group">
    <p class="fn-label">会社名・屋号</p>
    [text company-name placeholder "株式会社〇〇"]
  </div>
  <div class="fn-group">
    <p class="fn-label">メールアドレス<span> 必須</span></p>
    [email* your-email placeholder "****@mail.com"]
  </div>
  <div class="fn-group">
    <p class="fn-label">電話番号</p>
    [tel your-tel placeholder "****-***-***"]
  </div>
  <div class="fn-group">
    <p class="fn-label">お問い合わせ種別</p>
    [select* service-type "製品・サービスについてのお問い合わせ" "お仕事・お見積もりのご依頼" "資料請求" "採用に関するお問い合わせ" "取材・メディア掲載のご依頼" "その他"]
  </div>
  <div class="fn-group">
    <p class="fn-label">希望の連絡方法</p>
    [radio radio "メール" "電話" "どちらでも可"]
  </div>
  <div class="fn-group">
    <p class="fn-label">お問い合わせ内容<span> 必須</span></p>
    [textarea* your-message placeholder "お問い合わせ内容をご記入ください"]
  </div>
  <div class="fn-group">
    <p class="fn-label">確認画面は表示されません。上記内容にて送信しますがよろしいですか？<span> 必須</span></p>
    [checkbox* checkbox use_label_element "はい"]
  </div>
  [submit "送信する"]
</div>

      SHARP（シャープ）

      オレンジのアクセントカラーが映えるダーク系デザイン。インパクトを出したいサイトや、クリエイティブ系のブランドサイトに向いています。

        CONTACT FORM

        お名前 必須

        会社名・屋号

        メールアドレス 必須

        電話番号

        お問い合わせ種別

        希望の連絡方法

        メール電話どちらでも可

        お問い合わせ内容 必須

        確認画面は表示されません。上記内容にて送信しますがよろしいですか？ 必須 

        <style>
.cf7-sharp {
  width: 100%;
  max-width: 100%;
  background: #0d0d0d;
  border: 1px solid #ff6b35;
  padding: 0;
  position: relative;
}
.cf7-sharp::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: 4px;
  bottom: 4px;
  border: 1px solid rgba(255,107,53,0.2);
  pointer-events: none;
}
.cf7-sharp .sharp-header {
  background: #ff6b35;
  padding: 12px 20px;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #000;
  font-weight: 700;
}
.cf7-sharp .sharp-body { padding: 28px 24px; }
.cf7-sharp .fs-group { margin-bottom: 20px; }
.cf7-sharp .fs-label {
  font-size: 14px;
  display: block;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ff6b35;
  margin-bottom: 6px;
}
.cf7-sharp .fs-label span {
  font-size: 12px;
  color: #ff9a7a;
}
.cf7-sharp input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.cf7-sharp textarea,
.cf7-sharp select {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #333;
  border-left: 3px solid #ff6b35;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0f0f0;
  outline: none;
  transition: border-color .2s;
}
.cf7-sharp input:focus,
.cf7-sharp textarea:focus,
.cf7-sharp select:focus { border-color: #ff6b35; background: #1f1a17; }
.cf7-sharp textarea { height: 80px; resize: none;}
.cf7-sharp .wpcf7-submit {
  width: 100%;
  background: #ff6b35;
  border: none;
  color: #000;
  font-size: 11px;
  letter-spacing: 3px;
  padding: 13px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
  transition: background .2s;
  margin: 4px 0 0 0;
}
.cf7-sharp .wpcf7-submit:hover { background: #e55a22; }
.cf7-sharp .fs-group .wpcf7-list-item-label {
  color: #ffffff;
}
</style>

<div class="cf7-sharp">
  <div class="sharp-header">CONTACT FORM</div>
  <div class="sharp-body">
    <div class="fs-group">
      <p class="fs-label">お名前<span> 必須</span></p>
      [text* your-name placeholder "山田 はなこ"]
    </div>
    <div class="fs-group">
      <p class="fs-label">会社名・屋号</p>
      [text company-name placeholder "株式会社〇〇"]
    </div>
    <div class="fs-group">
      <p class="fs-label">メールアドレス<span> 必須</span></p>
      [email* your-email placeholder "****@mail.com"]
    </div>
    <div class="fs-group">
      <p class="fs-label">電話番号</p>
      [tel your-tel placeholder "****-***-***"]
    </div>
    <div class="fs-group">
      <p class="fs-label">お問い合わせ種別</p>
      [select* service-type "製品・サービスについてのお問い合わせ" "お仕事・お見積もりのご依頼" "資料請求" "採用に関するお問い合わせ" "取材・メディア掲載のご依頼" "その他"]
    </div>
    <div class="fs-group">
      <p class="fs-label">希望の連絡方法</p>
      [radio radio "メール" "電話" "どちらでも可"]
    </div>
    <div class="fs-group">
      <p class="fs-label">お問い合わせ内容<span> 必須</span></p>
      [textarea* your-message placeholder "お問い合わせ内容をご記入ください"]
    </div>
    <div class="fs-group">
      <p class="fs-label">確認画面は表示されません。上記内容にて送信しますがよろしいですか？<span> 必須</span></p>
      [checkbox* checkbox use_label_element "はい"]
    </div>
    [submit "→ SEND"]
  </div>
</div>

        ELEGANT（エレガント）

        ゴールドのボーダーと影で高級感を演出。ホテル・エステ・ブライダルなど、上品さを大切にするサイトに最適です。

          お問い合わせ

          お名前 必須

          会社名・屋号

          メールアドレス 必須

          電話番号

          お問い合わせ種別

          希望の連絡方法

          メール電話どちらでも可

          お問い合わせ内容 必須

          確認画面は表示されません。上記内容にて送信しますがよろしいですか？ 必須 

          <style>
.cf7-elegant {
  width: 100%;
  max-width: 100%;
  position: relative;
  padding: 48px 40px;
  background: #fff;
}
.cf7-elegant .elegant-deco {
  position: absolute;
  top: 8px; left: 8px;
  right: -8px; bottom: -8px;
  border: 1px solid #c9a96e;
  pointer-events: none;
  z-index: 0;
}
.cf7-elegant > * { position: relative; z-index: 1; }
.cf7-elegant .fe-title {
  font-size: 26px;
  color: #1a1a1a;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.cf7-elegant .fe-rule {
  width: 40px;
  height: 1px;
  background: #c9a96e;
  margin-bottom: 28px;
}
.cf7-elegant .fe-group { margin-bottom: 20px; }
.cf7-elegant .fe-label {
  display: block;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 6px;
}
.cf7-elegant .wpcf7-not-valid-tip,
.cf7-elegant .fe-label span {
  font-size: 12px;
  color: #dc3545;
}
.cf7-elegant input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.cf7-elegant textarea,
.cf7-elegant select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #ddd;
  padding: 8px 0;
  font-size: 14px;
  color: #1a1a1a;
  outline: none;
  transition: border-color .2s;
}
.cf7-elegant input:focus,
.cf7-elegant textarea:focus,
.cf7-elegant select:focus { border-color: #c9a96e; }
.cf7-elegant textarea { height: 80px; resize: none; }
.cf7-elegant .wpcf7-submit {
  width: 100%;
  background: transparent;
  border: 1px solid #c9a96e;
  color: #c9a96e;
  font-size: 14px;
  padding: 11px 36px;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: 1px;
}
.cf7-elegant .wpcf7-submit:hover { background: #c9a96e; color: #fff; }
</style>

<div class="cf7-elegant">
  <div class="elegant-deco"></div>
  <p class="fe-title">お問い合わせ</p>
  <div class="fe-rule"></div>
  <div class="fe-group">
    <p class="fe-label">お名前<span> 必須</span></p>
    [text* your-name placeholder "山田 はなこ"]
  </div>
  <div class="fe-group">
    <p class="fe-label">会社名・屋号</p>
    [text company-name placeholder "株式会社〇〇"]
  </div>
  <div class="fe-group">
    <p class="fe-label">メールアドレス<span> 必須</span></p>
    [email* your-email placeholder "****@mail.com"]
  </div>
  <div class="fe-group">
    <p class="fe-label">電話番号</p>
    [tel your-tel placeholder "****-***-***"]
  </div>
  <div class="fe-group">
    <p class="fe-label">お問い合わせ種別</p>
    [select* service-type "製品・サービスについてのお問い合わせ" "お仕事・お見積もりのご依頼" "資料請求" "採用に関するお問い合わせ" "取材・メディア掲載のご依頼" "その他"]
  </div>
  <div class="fe-group">
    <p class="fe-label">希望の連絡方法</p>
    [radio radio "メール" "電話" "どちらでも可"]
  </div>
  <div class="fe-group">
    <p class="fe-label">お問い合わせ内容<span> 必須</span></p>
    [textarea* your-message placeholder "お問い合わせ内容をご記入ください"]
  </div>
  <div class="fe-group">
    <p class="fe-label">確認画面は表示されません。上記内容にて送信しますがよろしいですか？<span> 必須</span></p>
    [checkbox* checkbox use_label_element "はい"]
  </div>
  [submit "送信"]
</div>

          かわいい系お問い合わせ

          水色・パステルカラーをベースにした、やわらかい雰囲気のデザインです。

          FLUFFY（フラフィ）

          丸みのあるカードデザイン。ふんわりした雰囲気のサービスサイトやブログに。

            お問い合わせ

            お気軽にご連絡ください ✉

            お名前 必須

            会社名・屋号

            メールアドレス 必須

            電話番号

            お問い合わせ種別

            希望の連絡方法

            メール電話どちらでも可

            お問い合わせ内容 必須

            確認画面は表示されません。上記内容にて送信しますがよろしいですか？ 必須 

            <style>
.cf7-fluffy {
  width: 100%;
  max-width: 100%;
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 8px 32px rgba(126,207,212,0.18), 0 2px 8px rgba(126,207,212,0.10);
  border: 1.5px solid #d6f0f2;
}
.cf7-fluffy .ff-title {
  font-size: 20px;
  font-weight: 700;
  color: #4ab3ba;
  margin-bottom: 6px;
}
.cf7-fluffy .ff-sub {
  font-size: 11px;
  color: #a8d8db;
  margin-bottom: 24px;
}
.cf7-fluffy .ff-group { margin-bottom: 16px; }
.cf7-fluffy .ff-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #7ab8bc;
  margin-bottom: 5px;
}
.cf7-fluffy .wpcf7-not-valid-tip,
.cf7-fluffy .ff-label span {
  font-size: 12px;
  color: #dc3545;
}
.cf7-fluffy input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.cf7-fluffy textarea,
.cf7-fluffy select {
  width: 100%;
  background: #f2fafb;
  border: 1.5px solid #c8e9eb;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: #4a8a8e;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.cf7-fluffy input:focus,
.cf7-fluffy textarea:focus,
.cf7-fluffy select:focus {
  border-color: #7ecfd4;
  box-shadow: 0 0 0 3px rgba(126,207,212,0.15);
}
.cf7-fluffy textarea { height: 80px; resize: none; }
.cf7-fluffy .wpcf7-submit {
  width: 100%;
  background: linear-gradient(135deg, #7ecfd4 0%, #5bb8c1 100%);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 13px;
  border-radius: 14px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: opacity .2s, transform .15s;
  margin: 4px 0 0 0;
  box-shadow: 0 4px 16px rgba(91,184,193,0.3);
}
.cf7-fluffy .wpcf7-submit:hover { opacity: .88; transform: translateY(-1px); }
</style>

<div class="cf7-fluffy">
  <p class="ff-title">お問い合わせ</p>
  <p class="ff-sub">お気軽にご連絡ください ✉</p>
  <div class="ff-group">
    <p class="ff-label">お名前<span> 必須</span></p>
    [text* your-name placeholder "山田 はなこ"]
  </div>
  <div class="ff-group">
    <p class="ff-label">会社名・屋号</p>
    [text company-name placeholder "株式会社〇〇"]
  </div>
  <div class="ff-group">
    <p class="ff-label">メールアドレス<span> 必須</span></p>
    [email* your-email placeholder "****@mail.com"]
  </div>
  <div class="ff-group">
    <p class="ff-label">電話番号</p>
    [tel your-tel placeholder "****-***-***"]
  </div>
  <div class="ff-group">
    <p class="ff-label">お問い合わせ種別</p>
    [select* service-type "製品・サービスについてのお問い合わせ" "お仕事・お見積もりのご依頼" "資料請求" "採用に関するお問い合わせ" "取材・メディア掲載のご依頼" "その他"]
  </div>
  <div class="ff-group">
    <p class="ff-label">希望の連絡方法</p>
    [radio radio "メール" "電話" "どちらでも可"]
  </div>
  <div class="ff-group">
    <p class="ff-label">お問い合わせ内容<span> 必須</span></p>
    [textarea* your-message placeholder "お問い合わせ内容をご記入ください"]
  </div>
  <div class="ff-group">
    <p class="ff-label">確認画面は表示されません。上記内容にて送信しますがよろしいですか？<span> 必須</span></p>
    [checkbox* checkbox use_label_element "はい"]
  </div>
  [submit "送信する"]
</div>

            DOTTEDBORDER（破線ボーダー）

            破線ボーダー＋爽やかな色合いのデザイン。

              お問い合わせ

              いつでもお気軽にどうぞ

              お名前 必須

              会社名・屋号

              メールアドレス 必須

              電話番号

              お問い合わせ種別

              希望の連絡方法

              メール電話どちらでも可

              お問い合わせ内容 必須

              確認画面は表示されません。上記内容にて送信しますがよろしいですか？ 必須 

              <style>
.cf7-dottedborder {
  width: 100%;
  max-width: 100%;
  background: #f7fefe;
  padding: 36px 32px;
  border: 2px dashed #a8d8db;
  border-radius: 4px;
  position: relative;
}
.cf7-dottedborder::before {
  content: '✉';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: #7ecfd4;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 36px;
  text-align: center;
}
.cf7-dottedborder .fd-title {
  font-size: 20px;
  color: #3d9ea4;
  text-align: center;
  margin: 8px 0 4px 0;
}
.cf7-dottedborder .fd-sub {
  font-size: 11px;
  color: #a0cdd0;
  text-align: center;
  margin-bottom: 24px;
}
.cf7-dottedborder .fd-group { margin-bottom: 18px; }
.cf7-dottedborder .fd-label {
  display: block;
  font-size: 16px;
  color: #5aabaf;
  margin-bottom: 5px;
}
.cf7-dottedborder .wpcf7-not-valid-tip,
.cf7-dottedborder .fd-label span {
  font-size: 12px;
  color: #dc3545;
}
.cf7-dottedborder input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.cf7-dottedborder textarea,
.cf7-dottedborder select {
  width: 100%;
  background: #fff;
  border: none;
  border-bottom: 2px solid #b8e0e3;
  padding: 8px 4px;
  font-size: 13px;
  color: #3a7a7e;
  outline: none;
  transition: border-color .2s;
}
.cf7-dottedborder input:focus,
.cf7-dottedborder textarea:focus,
.cf7-dottedborder select:focus { border-color: #5bb8c1; }
.cf7-dottedborder textarea { height: 80px; resize: none; }
.cf7-dottedborder .wpcf7-submit {
  display: block;
  margin: 8px auto 0;
  background: transparent;
  border: 2px solid #7ecfd4;
  color: #4ab3ba;
  font-size: 14px;
  padding: 10px 40px;
  border-radius: 30px;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: 1px;
}
.cf7-dottedborder .wpcf7-submit:hover { background: #7ecfd4; color: #fff; }
</style>

<div class="cf7-dottedborder">
  <p class="fd-title">お問い合わせ</p>
  <p class="fd-sub">いつでもお気軽にどうぞ</p>
  <div class="fd-group">
    <p class="fd-label">お名前<span> 必須</span></p>
    [text* your-name placeholder "山田 はなこ"]
  </div>
  <div class="fd-group">
    <p class="fd-label">会社名・屋号</p>
    [text company-name placeholder "株式会社〇〇"]
  </div>
  <div class="fd-group">
    <p class="fd-label">メールアドレス<span> 必須</span></p>
    [email* your-email placeholder "****@mail.com"]
  </div>
  <div class="fd-group">
    <p class="fd-label">電話番号</p>
    [tel your-tel placeholder "****-***-***"]
  </div>
  <div class="fd-group">
    <p class="fd-label">お問い合わせ種別</p>
    [select* service-type "製品・サービスについてのお問い合わせ" "お仕事・お見積もりのご依頼" "資料請求" "採用に関するお問い合わせ" "取材・メディア掲載のご依頼" "その他"]
  </div>
  <div class="fd-group">
    <p class="fd-label">希望の連絡方法</p>
    [radio radio "メール" "電話" "どちらでも可"]
  </div>
  <div class="fd-group">
    <p class="fd-label">お問い合わせ内容<span> 必須</span></p>
    [textarea* your-message placeholder "お問い合わせ内容をご記入ください"]
  </div>
  <div class="fd-group">
    <p class="fd-label">確認画面は表示されません。上記内容にて送信しますがよろしいですか？<span> 必須</span></p>
    [checkbox* checkbox use_label_element "はい"]
  </div>
  [submit "送信する"]
</div>

              CHIC（シック）

              トップボーダーのみのすっきりしたデザイン。かわいさとシンプルさを両立させたい方に。

                Contact

                お名前 必須

                会社名・屋号

                メールアドレス 必須

                電話番号

                お問い合わせ種別

                希望の連絡方法

                メール電話どちらでも可

                お問い合わせ内容 必須

                確認画面は表示されません。上記内容にて送信しますがよろしいですか？ 必須 

                <style>
.cf7-chic {
  width: 100%;
  max-width: 100%;
  background: #fff;
  padding: 40px 36px;
  border-top: 3px solid #7ecfd4;
}
.cf7-chic .fc-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #7ecfd4;
  margin-bottom: 28px;
}
.cf7-chic .fc-group { margin-bottom: 22px; }
.cf7-chic .fc-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9dcdd0;
  margin-bottom: 6px;
}
.cf7-chic .wpcf7-not-valid-tip,
.cf7-chic .fc-label span {
  font-size: 12px;
  color: #dc3545;
}
.cf7-chic input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.cf7-chic textarea,
.cf7-chic select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #d4edef;
  padding: 8px 0;
  font-size: 14px;
  color: #2a7a80;
  outline: none;
  transition: border-color .2s;
}
.cf7-chic input:focus,
.cf7-chic textarea:focus,
.cf7-chic select:focus { border-color: #7ecfd4; }
.cf7-chic textarea { height: 80px; resize: none; }
.cf7-chic .wpcf7-submit {
  background: #7ecfd4;
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 12px 36px;
  cursor: pointer;
  transition: background .2s;
}
.cf7-chic .wpcf7-submit:hover { background: #5bb8c1; }
</style>

<div class="cf7-chic">
  <p class="fc-title">Contact</p>
  <div class="fc-group">
    <p class="fc-label">お名前<span> 必須</span></p>
    [text* your-name placeholder "山田 はなこ"]
  </div>
  <div class="fc-group">
    <p class="fc-label">会社名・屋号</p>
    [text company-name placeholder "株式会社〇〇"]
  </div>
  <div class="fc-group">
    <p class="fc-label">メールアドレス<span> 必須</span></p>
    [email* your-email placeholder "****@mail.com"]
  </div>
  <div class="fc-group">
    <p class="fc-label">電話番号</p>
    [tel your-tel placeholder "****-***-***"]
  </div>
  <div class="fc-group">
    <p class="fc-label">お問い合わせ種別</p>
    [select* service-type "製品・サービスについてのお問い合わせ" "お仕事・お見積もりのご依頼" "資料請求" "採用に関するお問い合わせ" "取材・メディア掲載のご依頼" "その他"]
  </div>
  <div class="fc-group">
    <p class="fc-label">希望の連絡方法</p>
    [radio radio "メール" "電話" "どちらでも可"]
  </div>
  <div class="fc-group">
    <p class="fc-label">お問い合わせ内容<span> 必須</span></p>
    [textarea* your-message placeholder "お問い合わせ内容をご記入ください"]
  </div>
  <div class="fc-group">
    <p class="fc-label">確認画面は表示されません。上記内容にて送信しますがよろしいですか？<span> 必須</span></p>
    [checkbox* checkbox use_label_element "はい"]
  </div>
  [submit "送信する"]
</div>

                PASTEL（パステル）

                グラデーション背景に半透明の入力欄を重ねたデザイン。やさしい雰囲気のサービスサイトに。

                  お問い合わせ

                  お気軽にどうぞ ☁

                  お名前 必須

                  会社名・屋号

                  メールアドレス 必須

                  電話番号

                  お問い合わせ種別

                  希望の連絡方法

                  メール電話どちらでも可

                  お問い合わせ内容 必須

                  確認画面は表示されません。上記内容にて送信しますがよろしいですか？ 必須 

                  <style>
.cf7-pastel {
  width: 100%;
  max-width: 100%;
  background: linear-gradient(160deg, #e8f9fa 0%, #d6f4f6 100%);
  padding: 36px 32px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.cf7-pastel::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: rgba(126,207,212,0.15);
  border-radius: 50%;
  pointer-events: none;
}
.cf7-pastel::after {
  content: '';
  position: absolute;
  bottom: -30px; left: -30px;
  width: 90px; height: 90px;
  background: rgba(126,207,212,0.10);
  border-radius: 50%;
  pointer-events: none;
}
.cf7-pastel > * { position: relative; z-index: 1; }
.cf7-pastel .fp-title {
  font-size: 19px;
  font-weight: 700;
  color: #3a9ea4;
  margin-bottom: 4px;
}
.cf7-pastel .fp-sub {
  font-size: 11px;
  color: #8ac8cc;
  margin-bottom: 22px;
}
.cf7-pastel .fp-group { margin-bottom: 14px; }
.cf7-pastel .fp-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #6ab5ba;
  margin-bottom: 4px;
}
.cf7-pastel .wpcf7-not-valid-tip,
.cf7-pastel .fp-label span {
  font-size: 12px;
  color: #dc3545;
}
.cf7-pastel input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.cf7-pastel textarea,
.cf7-pastel select {
  width: 100%;
  background: rgba(255,255,255,0.75);
  border: 1.5px solid rgba(126,207,212,0.35);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13px;
  color: #3a7a7e;
  outline: none;
  transition: border-color .2s, background .2s;
}
.cf7-pastel input:focus,
.cf7-pastel textarea:focus,
.cf7-pastel select:focus {
  border-color: #7ecfd4;
  background: rgba(255,255,255,0.92);
}
.cf7-pastel textarea { height: 80px; resize: none; }
.cf7-pastel .wpcf7-submit {
  width: 100%;
  background: rgba(126,207,212,0.85);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background .2s;
  margin: 6px 0 0 0;
}
.cf7-pastel .wpcf7-submit:hover { background: #5bb8c1; }
</style>

<div class="cf7-pastel">
  <p class="fp-title">お問い合わせ</p>
  <p class="fp-sub">お気軽にどうぞ ☁</p>
  <div class="fp-group">
    <p class="fp-label">お名前<span> 必須</span></p>
    [text* your-name placeholder "山田 はなこ"]
  </div>
  <div class="fp-group">
    <p class="fp-label">会社名・屋号</p>
    [text company-name placeholder "株式会社〇〇"]
  </div>
  <div class="fp-group">
    <p class="fp-label">メールアドレス<span> 必須</span></p>
    [email* your-email placeholder "****@mail.com"]
  </div>
  <div class="fp-group">
    <p class="fp-label">電話番号</p>
    [tel your-tel placeholder "****-***-***"]
  </div>
  <div class="fp-group">
    <p class="fp-label">お問い合わせ種別</p>
    [select* service-type "製品・サービスについてのお問い合わせ" "お仕事・お見積もりのご依頼" "資料請求" "採用に関するお問い合わせ" "取材・メディア掲載のご依頼" "その他"]
  </div>
  <div class="fp-group">
    <p class="fp-label">希望の連絡方法</p>
    [radio radio "メール" "電話" "どちらでも可"]
  </div>
  <div class="fp-group">
    <p class="fp-label">お問い合わせ内容<span> 必須</span></p>
    [textarea* your-message placeholder "お問い合わせ内容をご記入ください"]
  </div>
  <div class="fp-group">
    <p class="fp-label">確認画面は表示されません。上記内容にて送信しますがよろしいですか？<span> 必須</span></p>
    [checkbox* checkbox use_label_element "はい"]
  </div>
  [submit "送信する"]
</div>

                  まとめ

                  Contact Form 7はデフォルトのままでも機能しますが、CSSを工夫するだけでサイトのトーンに合ったフォームに仕上げることができます。

                  このスニペット集のデザインは、WordPress管理画面からコンタクトフォーム編集画面の「フォーム」タブに貼るだけで使えます。まずは気に入ったデザインを試してみてください。

                  サイトづくりメモ
                  よかったらシェアしてね！
                  • URLをコピーしました！
                  • URLをコピーしました！

                  関連記事

                  目次