お問い合わせフォームを一から作ろうとすると、「どの項目を入れるべきか、デザインをどう整えるか」など、意外と手間がかかるものです。

今回は「Contact Form 7」でそのまま使える汎用的なフォームのテンプレート集を作成しました。
用途別にHTMLとCSSをコピペするだけで使えるので、ぜひご活用ください。

WordPressテーマ「GLUE」
WordPressテーマ「GLUE」
無料で高機能なWordPressテーマが手に入る。

Contact Form 7のテンプレート

下記のそれぞれの用途に適するお問い合わせフォームのソースコードを公開しています。クリックして任意のフォームへジャンプしてみてください。そのままコピペしてお使いいただけます。

ご利用のテーマによっては、既存のCSSとの兼ね合いで微調整が必要になる場合があります。

各テンプレートは、必要最低限の項目に絞った構成にしています。もし業種上どうしても項目を増やしたい場合は、本当にその場で必要かを見直したうえで追加してください。

当記事のフォームのスタイルをそのまま使いたい場合は、以下のCSSをコピペしてご活用ください。

.wpcf7 {
  background: #f7f7f7 !important;
  padding: 35px !important;
  box-sizing: border-box !important;
}

.wpcf7 .hidden-fields-container {
  display: none !important;
}

.wpcf7 form > p {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: 20px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  box-sizing: border-box !important;
}

.wpcf7 form > p:first-of-type {
  border-top: none !important;
}

.wpcf7 form > p:has(input[type="submit"]) {
  border-bottom: none !important;
  padding-top: 16px !important;
  justify-content: center !important;
  text-align: center !important;
}

.wpcf7 p label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 200px !important;
  flex-shrink: 0 !important;
  font-size: 15px !important;
  font-weight: bold !important;
  color: #222 !important;
  padding-right: 16px !important;
}

.wpcf7 .required {
  display: inline-block !important;
  margin-left: 8px !important;
  padding: 4px 10px !important;
  background: #161c21 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: normal !important;
  border-radius: 2px !important;
}

.wpcf7 .wpcf7-form-control-wrap {
  display: block !important;
  flex: 1 !important;
  min-width: 240px !important;
  box-sizing: border-box !important;
}

.wpcf7 .wpcf7-form-control-wrap:has(.wpcf7-list-item) {
  display: flex !important;
  flex-wrap: wrap !important;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  display: block !important;
  width: 100% !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

.wpcf7 textarea {
  height: 120px !important;
}

.wpcf7 select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  padding: 10px 40px 10px 12px !important;
  font-size: 14px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23333'%3E%3Cpath d='M5.25 7.5L10 12.25L14.75 7.5H5.25Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  box-sizing: border-box !important;
}

.wpcf7 select::-ms-expand {
  display: none !important;
}

.wpcf7 .wpcf7-list-item {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  margin: 4px 24px 8px 0 !important;
}

.wpcf7 .wpcf7-list-item label {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: normal !important;
  color: #222 !important;
}

.wpcf7 .wpcf7-list-item input[type="radio"],
.wpcf7 .wpcf7-list-item input[type="checkbox"] {
  margin: 0 6px 0 0 !important;
  width: auto !important;
  accent-color: #161c21 !important;
}

.wpcf7 input[type="submit"] {
  display: block !important;
  width: 200px !important;
  height: 50px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: #161c21 !important;
  color: #fff !important;
  font-size: 16px !important;
  border: 0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.wpcf7 input[type="submit"]:hover {
  background: #333c44 !important;
}

.wpcf7 .wpcf7-spinner {
  display: none !important;
}

.wpcf7-form.submitting .wpcf7-spinner {
  display: inline-block !important;
  margin-left: 8px !important;
}

.wpcf7 form > p.cf7-note {
  display: block !important;
  text-align: center !important;
  font-size: 13px !important;
  color: #666 !important;
  padding: 8px 16px 0 !important;
  border-bottom: none !important;
}

.wpcf7 form > p.cf7-note a {
  color: #161c21 !important;
  text-decoration: underline !important;
}

@media screen and (max-width: 600px) {
  .wpcf7 {
    padding: 20px !important;
  }

  .wpcf7 form > p {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px 8px !important;
  }

  .wpcf7 form > p:has(input[type="submit"]) {
    padding-top: 16px !important;
  }

  .wpcf7 p label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 4px 0 !important;
    line-height: 1.4 !important;
  }

  .wpcf7 .required {
    padding: 4px 10px !important;
    margin-left: 8px !important;
  }

  .wpcf7 .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .wpcf7 .wpcf7-list-item {
    font-size: 14px !important;
  }

  .wpcf7 input[type="submit"] {
    width: 100% !important;
  }
}

汎用/一般企業

コーポレートサイトなどでよく使われる、汎用性の高いお問い合わせフォームです。

フォーム例






    ソースコード例
    <p><label>会社名/組織名<span class="required">必須</span></label>
[text* your-business placeholder "例）株式会社デザインプラス"]</p>

<p><label>お名前<span class="required">必須</span></label>
[text* your-name placeholder "例）山田 太郎"]</p>

<p><label>メールアドレス<span class="required">必須</span></label>
[email* your-email placeholder "メールアドレス"]</p>

<p><label>電話番号</label>
[tel your-tel placeholder "電話番号"]</p>

<p><label>お問い合わせ内容<span class="required">必須</span></label>
[textarea* your-message]</p>

[response]

<p>[submit "送信する"]</p>

    住所・郵便番号・FAX・部署名・役職といった項目は、実際の商談ややり取りの中で聞けば十分な情報のため、あえて外しています。業種上どうしても必要な場合のみ、任意項目として追加してください。

    必須項目は「会社名/組織名」「お名前」「メールアドレス」の3つのみです。電話番号は、こちらから折り返し連絡する必要がある業種であれば必須に、そうでなければ任意にするのがおすすめです。

    資料請求

    資料請求の問い合わせなどに活用ください。名前と連絡先のみを必須にし、資料をメールでお送りする運用を想定しています。

    フォーム例




      料金について導入事例について機能について


      ソースコード例
      <p><label>お名前<span class="required">必須</span></label>
[text* your-name placeholder "例）山田 太郎"]</p>

<p><label>メールアドレス<span class="required">必須</span></label>
[email* your-email placeholder "メールアドレス"]</p>

<p><label>ご興味のある内容</label>
[checkbox check-interest "料金について" "導入事例について" "機能について"]</p>

<p><label>ご相談やメッセージ</label>
[textarea your-message]</p>

[response]

<p>[submit "資料を請求する"]</p>

      住所や郵便番号は、資料を郵送する場合にのみ必須にし、メール送付の場合は外すのがおすすめです。電話番号もこちらから連絡を取る必要がなければ任意で十分です。

      ご興味のある内容をチェックボックスで選べるようにしておくと、資料送付後のフォローも的確に行いやすくなります。

      採用エントリー

      採用の一次エントリーで利用できるフォームです。エントリー段階では連絡先の確認までにとどめ、学歴・職務経歴などの詳細情報は面談時に確認する構成にしています。

      フォーム例






        ソースコード例
        <p><label>お名前<span class="required">必須</span></label>
[text* your-name placeholder "例）山田 太郎"]</p>

<p><label>ふりがな<span class="required">必須</span></label>
[text your-ruby placeholder "例）やまだ たろう"]</p>

<p><label>電話番号<span class="required">必須</span></label>
[tel* your-tel placeholder "電話番号"]</p>

<p><label>メールアドレス<span class="required">必須</span></label>
[email* your-email placeholder "メールアドレス"]</p>

<p><label>会社に貢献できること</label>
[textarea your-message]</p>

[response]

<p>[submit "エントリーする"]</p>

        生年月日・郵便番号・住所・最終学歴・職務経歴といった詳細情報は、書類選考や面談の段階で改めて確認する運用例です。エントリーの間口を広げることを優先しています。

        面談・説明会予約

        面談や説明会の日程調整に活用できるフォームです。候補日を選択式にすることで、やり取りの往復を減らしています。

        フォーム例






          ソースコード例
          <p><label>ご希望の開催形式<span class="required">必須</span></label>
[radio radio-668 use_label_element "対面" "オンライン"]</p>

<p><label>ご希望の日程<span class="required">必須</span></label>
[select* menu-403 "第1候補" "第2候補" "第3候補"]</p>

<p><label>お名前<span class="required">必須</span></label>
[text* your-name placeholder "例）山田 太郎"]</p>

<p><label>メールアドレス<span class="required">必須</span></label>
[email* your-email placeholder "メールアドレス"]</p>

<p><label>ご質問など</label>
[textarea your-message]</p>

[response]

<p>[submit "予約する"]</p>

          電話番号・郵便番号・住所は、オンライン開催が主流になった現在では必須にしにくい項目です。会場や連絡手段によって必要な場合のみ、任意項目として追加してください。

          必須項目は「開催形式」「希望日程」「お名前」「メールアドレス」の4つです。日程は候補日をこちらで用意し選択式にすることで、自由記述より確定までのやり取りが早くなります。

          メルマガ登録フォーム

          メルマガ登録は、最も項目を絞るべきフォームです。メールアドレスのみで登録できる形にしています。

          フォーム例


            登録した場合、利用規約への同意したことになります。

            ソースコード例
            <p><label>メールアドレス</label>
[email* your-email placeholder "例）design-plus@example.com"]</p>

[response]

<p>[submit "登録する"]</p>

<p class="cf7-note">登録した場合、<a href="利用規約のURL">利用規約</a>への同意したことになります。</p>

            お名前・ふりがなも、配信するだけであれば必須ではありません。メールアドレスと利用規約への同意だけで、最もハードルの低いフォームになります。

            まとめ

            フォームの設計は、項目数を絞るだけでなく、用途に合わせてどの情報が本当に必要かを見極めることが重要です。今回紹介した5つのテンプレートを、まずはそのままコピペして設置し、必要に応じて項目を調整してみてください。

            フォームの項目を絞ると反応も上がります。

            2026.08.20

            問い合わせフォームは「項目を減らす」だけで反応が変わる

            問い合わせフォームからの反応が来ない。 そんな相談を受けるとき、原因の多くはデザインやキャッチコピーではなく、実はフォームの入力項目数にあります。今回は「入力項目を減らすだけで反応が変わる」という、シンプルながら見落とされがちなポイントを解説します。 問い合わせが来な...

            項目を絞ったフォームは入力のハードルが下がる一方で、スパムボットからの送信も受けやすくなります。そういった場合は、下記記事で紹介しているようなプラグインでかんたんに対策が可能です。

            2026.05.14

            有効化するだけで手軽にスパム対策できるWordPressプラグイン「WP Armour」

            「コメントフォームにスパムが飛んでくる」 「お問い合わせフォームのスパムをブロックしたい」 「手軽にスパム対策したい」 WordPressサイトを運営していると、こんな場面があります。 そこで当記事では、有効化するだけで、スパムをブロックできるプラグインをご紹介します。 スパム...

            魅力的なブログがつくれる
            WordPressテーマ集
            WordPressテーマ「PANDORA」
            WordPressテーマ「PANDORA」
            レイアウト自由自在なブログ・メディアを構築。
            WordPressテーマ「NULL」
            WordPressテーマ「NULL」
            技術や知見をシェアする開発者ブログを構築。
            WordPressテーマ「Muum」
            WordPressテーマ「Muum」
            デザイン・SEOともに最高峰のブログに。
            WordPressテーマ「Cherie」
            WordPressテーマ「Cherie」
            華やかなブログで集客できるテンプレート。