Contact Form 7のサンプル例

2025年11月25日 2025年11月25日

やすぷ～

【サンプル1】シンプル＆ミニマル

お問い合わせフォーム

ブログや記事内容に関するご質問・ご相談は、こちらのフォームからお送りください。

お名前（必須）

フリガナ（任意）

メールアドレス（必須）

メールアドレス（確認用・必須）

お問い合わせ種別（必須）

該当ページURL（任意）

件名（必須）

メッセージ本文（必須）

※技術的なご質問の場合、OS／ブラウザ情報や使用デバイスも本文中にご記載いただけるとスムーズです。

送信内容を確認のうえ、通常数日以内にご返信いたします。

<div class="contact-form contact-simple">

<p class="hidden">[honeypot honeypot-1]</p>

<h3 class="contact-title">お問い合わせフォーム</h3>
<p class="contact-lead">ブログや記事内容に関するご質問・ご相談は、こちらのフォームからお送りください。</p>

<div class="form-row">
  <div class="form-col">
    <p>
      <label>お名前（必須）<br>
      [text* your-name placeholder "例：山田 太郎"]</label>
    </p>
  </div>
  <div class="form-col">
    <p>
      <label>フリガナ（任意）<br>
      [text your-kana placeholder "例：ヤマダ タロウ"]</label>
    </p>
  </div>
</div>

<div class="form-row">
  <div class="form-col">
    <p>
      <label>メールアドレス（必須）<br>
      [email* your-email default:onetest@onetest.onetest]</label>
    </p>
  </div>
  <div class="form-col">
    <p>
      <label>メールアドレス（確認用・必須）<br>
      [email* your-email-confirm default:onetest@onetest.onetest]</label>
    </p>
  </div>
</div>

<p>
  <label>お問い合わせ種別（必須）<br>
  [select* your-type include_blank "ブログ全体について" "個別記事への質問" "技術的な不具合" "お仕事・コラボの相談" "その他"]</label>
</p>

<p>
  <label>該当ページURL（任意）<br>
  [text your-url placeholder "例：https://example.com/post/xxxxx"]</label>
</p>

<p>
  <label>件名（必須）<br>
  [text* your-subject placeholder "例：○○の記事についての質問"]</label>
</p>

<p>
  <label>メッセージ本文（必須）<br>
  [textarea* your-message placeholder "できるだけ具体的に状況やご質問内容をご記入ください。"]</label>
</p>

<div class="recaptcha-wrap">
[recaptcha]
</div>

<p class="contact-note">送信内容を確認のうえ、通常数日以内にご返信いたします。</p>

<p>[submit class:btn class:btn-primary "この内容で送信する"]</p>
</div>

/* 1: シンプルフォーム用の軽い調整 */
.contact-simple {
  background:#ffffff;
  border-color:#e0e0e0;
}

【サンプル2】スタイリッシュ

お問い合わせ・ビジネスのご相談

お取引・タイアップ・取材・講演などのご相談は、下記の項目をご記入のうえ送信してください。

ご担当者様名（必須）

会社名・媒体名（必須）

メールアドレス（必須）

お電話番号（任意）

お問い合わせ区分（必須）

ご予算感（任意）

ご希望の時期・期間（任意）

参考URL・資料（任意）

ご相談内容の詳細（必須）

内容を確認のうえ、担当よりご連絡いたします。

<div class="contact-form contact-modern">

<p class="hidden">[honeypot honeypot-2]</p>

<h3 class="contact-title">お問い合わせ・ビジネスのご相談</h3>
<p class="contact-lead">お取引・タイアップ・取材・講演などのご相談は、下記の項目をご記入のうえ送信してください。</p>

<div class="form-row">
  <div class="form-col">
    <p>
      <label>ご担当者様名（必須）<br>
      [text* your-name class:form-control placeholder "例：山田 太郎"]</label>
    </p>
  </div>
  <div class="form-col">
    <p>
      <label>会社名・媒体名（必須）<br>
      [text* your-company class:form-control placeholder "例：株式会社サンプル / ○○WEBメディア"]</label>
    </p>
  </div>
</div>

<div class="form-row">
  <div class="form-col">
    <p>
      <label>メールアドレス（必須）<br>
      [email* your-email class:form-control default:onetest@onetest.onetest]</label>
    </p>
  </div>
  <div class="form-col">
    <p>
      <label>お電話番号（任意）<br>
      [text your-tel class:form-control placeholder "例：03-1234-5678"]</label>
    </p>
  </div>
</div>

<p>
  <label>お問い合わせ区分（必須）<br>
  [select* your-type include_blank "広告掲載・タイアップ" "制作・監修のご依頼" "講演・登壇のご相談" "取材・インタビュー" "その他"]</label>
</p>

<div class="form-row">
  <div class="form-col">
    <p>
      <label>ご予算感（任意）<br>
      [select your-budget include_blank "未定・相談したい" "5万円未満" "5〜10万円" "10〜30万円" "30万円以上"]</label>
    </p>
  </div>
  <div class="form-col">
    <p>
      <label>ご希望の時期・期間（任意）<br>
      [text your-term class:form-control placeholder "例：◯月中に公開希望 / スケジュール相談可"]</label>
    </p>
  </div>
</div>

<p>
  <label>参考URL・資料（任意）<br>
  [text your-url class:form-control placeholder "企画書・既存サイトなどのURLがあればご記入ください"]</label>
</p>

<p>
  <label>ご相談内容の詳細（必須）<br>
  [textarea* your-message class:form-control placeholder "企画の背景・目的・ターゲット・想定ボリュームなど、分かる範囲で詳細をご記入ください。"]</label>
</p>

<p class="form-consent">
  [acceptance agree]プライバシーポリシーに同意し、この内容で問い合わせます[/acceptance]
</p>

<div class="recaptcha-wrap">
[recaptcha]
</div>

<p class="contact-note">内容を確認のうえ、担当よりご連絡いたします。</p>

<p>[submit class:btn class:btn-accent "入力内容を送信する"]</p>
</div>

/* 2: ダークトーンのコーポレートフォーム */
.contact-modern {
  background:#111827;
  border:none;
  color:#f9fafb;
}
.contact-modern label,
.contact-modern .contact-lead {
  color:#e5e7eb;
}
.contact-modern input[type="text"],
.contact-modern input[type="email"],
.contact-modern select,
.contact-modern textarea {
  background:#111827;
  border:1px solid #374151;
  color:#f9fafb;
}
.contact-modern input::placeholder,
.contact-modern textarea::placeholder {
  color:#6b7280;
}
.contact-modern input:focus,
.contact-modern select:focus,
.contact-modern textarea:focus {
  border-color:#6366f1;
  box-shadow:0 0 0 2px rgba(99,102,241,0.3);
}
.contact-modern .form-consent {
  font-size:0.85rem;
  color:#9ca3af;
}

【サンプル3】お仕事依頼・取材依頼

【サンプル4】商品・サービス問い合わせ

お仕事・取材のご依頼

制作のご依頼や共同企画、取材・登壇のご相談などがございましたら、こちらからお知らせください。

ご担当者様名（必須）

部署名・役職（任意）

会社名・団体名（必須）

メールアドレス（必須）

お電話番号（任意）

ご希望の連絡方法（任意）

ご依頼種別（必須）

想定媒体・掲載先（必須）

ご予算感（任意）

ご希望スケジュール（任意）

参考URL・資料（任意）

ご依頼内容の詳細（必須）

内容を確認後、スケジュールや条件などを含めて折り返しご連絡いたします。

<div class="contact-form contact-business">

<p class="hidden">[honeypot honeypot-4]</p>

<h3 class="contact-title">お仕事・取材のご依頼</h3>
<p class="contact-lead">制作のご依頼や共同企画、取材・登壇のご相談などがございましたら、こちらからお知らせください。</p>

<p>
  <label>ご担当者様名（必須）<br>
  [text* your-name]</label>
</p>

<p>
  <label>会社名・団体名（必須）<br>
  [text* your-company]</label>
</p>

<p>
  <label>メールアドレス（必須）<br>
  [email* your-email default:onetest@onetest.onetest]</label>
</p>

<p>
  <label>ご依頼種別（必須）<br>
  [select* your-request include_blank "執筆・制作のご依頼" "監修のご依頼" "講演・登壇" "取材・インタビュー" "その他のご相談"]</label>
</p>

<p>
  <label>想定媒体・掲載先（必須）<br>
  [text* your-media]</label>
</p>

<p>
  <label>ご予算・スケジュール（任意）<br>
  [text your-conditions]</label>
</p>

<p>
  <label>ご依頼内容の詳細（必須）<br>
  [textarea* your-message]</label>
</p>

<p class="form-consent">
[acceptance* agree] プライバシーポリシーに同意のうえ送信します
</p>

<div class="recaptcha-wrap">
[recaptcha]
</div>

<p class="contact-note">内容を確認後、スケジュールや条件などを含めて折り返しご連絡いたします。</p>

<p>[submit class:btn class:btn-outline "依頼内容を送信する"]</p>
</div>

/* 4: ビジネスフォーム */
.contact-business {
  background:#f8fafc;
  border-color:#dbe3f0;
}

【サンプル5】写真・データ添付あり

制作・技術サポートのご相談

再現性の高い調査のため、ご利用環境や発生手順の記載にご協力ください。

お名前（必須）

メールアドレス（必須）

ご利用端末（必須）

OS・バージョン（任意）

ブラウザ（必須）

該当ページURL（任意）

症状の種類（任意・複数選択可）
レイアウトが崩れる画像が表示されないフォーム送信ができないエラーメッセージが表示される表示が極端に重いその他

発生頻度（任意）

発生するまでの操作手順（必須）

スクリーンショット・ログファイル（任意）

内容を確認のうえ、再現テストや調査を行った結果をご連絡いたします。

<div class="contact-form contact-support">

<p class="hidden">[honeypot honeypot-5]</p>

<h3 class="contact-title">制作・技術サポートのご相談</h3>
<p class="contact-lead">再現性の高い調査のため、ご利用環境や発生手順の記載にご協力ください。</p>

<div class="form-row">
  <div class="form-col">
    <p>
      <label>お名前（必須）<br>
      [text* your-name]</label>
    </p>
  </div>
  <div class="form-col">
    <p>
      <label>メールアドレス（必須）<br>
      [email* your-email default:onetest@onetest.onetest]</label>
    </p>
  </div>
</div>

<div class="form-row">
  <div class="form-col">
    <p>
      <label>ご利用端末（必須）<br>
      [select* your-device include_blank "デスクトップPC" "ノートPC" "タブレット" "スマートフォン"]</label>
    </p>
  </div>
  <div class="form-col">
    <p>
      <label>OS・バージョン（任意）<br>
      [text your-os placeholder "例：Windows 11 / macOS など"]</label>
    </p>
  </div>
</div>

<div class="form-row">
  <div class="form-col">
    <p>
      <label>ブラウザ（必須）<br>
      [select* your-browser include_blank "Chrome" "Edge" "Safari" "Firefox" "その他"]</label>
    </p>
  </div>
  <div class="form-col">
    <p>
      <label>該当ページURL（任意）<br>
      [text your-page placeholder "例：https://example.com/contact/"]</label>
    </p>
  </div>
</div>

<p>
  <label>症状の種類（任意・複数選択可）<br>
  [checkbox your-type "レイアウトが崩れる" "画像が表示されない" "フォーム送信ができない" "エラーメッセージが表示される" "表示が極端に重い" "その他"]</label>
</p>

<p>
  <label>発生頻度（任意）<br>
  [select your-frequency include_blank "毎回必ず発生する" "ときどき発生する" "一度だけ発生した"]</label>
</p>

<p>
  <label>発生するまでの操作手順（必須）<br>
  [textarea* your-steps placeholder "どのページで、どの操作を行ったときに、どのような不具合が出るかをご記入ください。"]</label>
</p>

<p>
  <label>スクリーンショット・ログファイル（任意）<br>
  [file your-file limit:10mb filetypes:jpg|jpeg|png|pdf|txt|zip]</label>
</p>

<div class="recaptcha-wrap">
[recaptcha]
</div>

<p class="contact-note">内容を確認のうえ、再現テストや調査を行った結果をご連絡いたします。</p>

<p>[submit class:btn class:btn-primary "相談内容を送信する"]</p>
</div>

/* 5: サポートフォーム */
.contact-support {
  background:#f9f9ff;
  border-color:#d6defa;
}

【サンプル6】お問い合わせフォーム＋簡易アンケート付き

<div class="contact-form contact-feedback">

<p class="hidden">[honeypot honeypot-6]</p>

<h3 class="contact-title">お問い合わせ・サイト改善アンケート</h3>
<p class="contact-lead">当サイトの改善のために、簡単なアンケートへのご協力もお願いしております。</p>

<div class="form-row">
  <div class="form-col">
    <p>
      <label>お名前（任意）<br>
      [text your-name]</label>
    </p>
  </div>
  <div class="form-col">
    <p>
      <label>メールアドレス（返信が必要な方）<br>
      [email your-email default:onetest@onetest.onetest]</label>
    </p>
  </div>
</div>

<p>
  <label>ご利用端末<br>
  [radio your-device "Windows PC" "Mac" "iPhone" "Android" "その他"]</label>
</p>

<p>
  <label>当サイトの総合的な満足度<br>
  [radio your-satisfaction "とても満足" "満足" "普通" "やや不満" "不満"]</label>
</p>

<p>
  <label>よくご覧になるコンテンツ（複数選択可）<br>
  [checkbox your-category "ガジェットレビュー" "PC・周辺機器解説" "ソフトウェア／アプリ解説" "トラブルシューティング" "コラム・雑記"]</label>
</p>

<div class="form-row">
  <div class="form-col">
    <p>
      <label>当サイトをどこで知りましたか？<br>
      [select your-route include_blank "検索エンジン（Google等）" "SNS" "他サイトのリンク" "知人の紹介" "その他"]</label>
    </p>
  </div>
  <div class="form-col">
    <p>
      <label>閲覧頻度（任意）<br>
      [select your-frequency include_blank "ほぼ毎日" "週に数回" "月に数回" "今回が初めて"]</label>
    </p>
  </div>
</div>

<p>
  <label>お問い合わせ内容・ご意見（必須）<br>
  [textarea* your-message placeholder "見づらかった点・分かりづらかった点・逆に気に入っている点など、率直なご意見をお聞かせください。"]</label>
</p>

<div class="recaptcha-wrap">
[recaptcha]
</div>

<p class="contact-note">いただいたご意見は、今後のコンテンツ改善・サイト運営の参考にさせていただきます。</p>

<p>[submit class:btn class:btn-gradient "フィードバックを送信する"]</p>
</div>

/* 6: アンケート付きフォーム */
.contact-feedback {
  background:#fefefe;
  border-style:dashed;
  border-color:#e0e7ff;
}

共通CSS

/* =========================
   Contact Form 7 共通スタイル
   ========================= */
.contact-form {
  max-width: 720px;
  margin: 0 auto 3rem;
  padding: 1.8rem 1.5rem;
  background: #fafafa;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}

.contact-form h3.contact-title {
  margin: 0 0 0.6rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.contact-form .contact-lead {
  margin: 0 0 1.6rem;
  font-size: 0.9rem;
  color: #666;
}

.contact-form p {
  margin-bottom: 1.2rem;
}

.contact-form label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  background-color: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #4c8dff;
  box-shadow: 0 0 0 2px rgba(76,141,255,0.16);
}

/* 2カラム用 */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.form-row .form-col {
  flex: 1 1 0;
  min-width: 180px;
}

/* ボタン共通 */
.contact-form .btn,
.contact-form input[type="submit"] {
  display: inline-block;
  padding: 0.8rem 2.3rem;
  font-size: 0.95rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: opacity .2s ease, transform .1s ease, box-shadow .2s ease;
}

.contact-form .btn:hover,
.contact-form input[type="submit"]:hover {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.contact-form .btn:active,
.contact-form input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ボタン色バリエーション */
.btn-primary { background:#0070f3; color:#fff; }
.btn-accent  { background:#ff5c7b; color:#fff; }
.btn-black   { background:#111;   color:#fff; }
.btn-outline { background:#fff;   color:#333; border:1px solid #333 !important; }
.btn-gradient{
  background:linear-gradient(135deg,#6a5af9,#ff5c7b);
  color:#fff;
}

/* reCAPTCHAまわり */
.contact-form .recaptcha-wrap {
  margin: 1rem 0 1.3rem;
  font-size: 0.8rem;
  color: #777;
}

/* ハニーポット非表示 */
.contact-form p.hidden,
.contact-form .wpcf7-form-control.wpcf7-honeypot {
  display: none !important;
}

/* CF7エラー表示を少し整える */
.contact-form .wpcf7-not-valid-tip {
  font-size: .8rem;
  color: #d93025;
  margin-top: .25rem;
}
.contact-form .wpcf7-response-output {
  margin-top: 1.5rem;
  padding: .8rem 1rem;
  border-radius: 6px;
  font-size: .9rem;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .contact-form {
    padding: 1.4rem 1rem;
    border-radius: 8px;
  }
  .contact-form .btn,
  .contact-form input[type="submit"] {
    width: 100%;
  }
}

Visited 28 times, 1 visit(s) today