お問い合わせフォームの作り方4つ！自作コード（HTML/PHP）もご紹介！

「お問い合わせフォームってどうやって作るの？」
「無料で作れる？それとも有料？」

こんな悩みをかかえていませんか？

結論、無料で作ることもできるし、コード不要で作成することも可能です。

今回は、そんなお問い合わせフォームを作る方法を4つご紹介しますので、ぜひ最後までご覧ください。

1 お問い合わせフォームとは？仕組みや構成は？
2 お問い合わせフォームを作る4つの方法
3 1. Googleフォームで作成
4 2. WordPressのプラグインで作成
5 3. フォーム作成ツールを利用
6 4. お問い合わせフォームを自分で作成
7 お問い合わせフォーム作成時のポイント9つ
8 まとめ

お問い合わせフォームとは？仕組みや構成は？

お問い合わせフォームは、Webサイト上でユーザーがお問い合わせを送るためのツールです。

ユーザーが「名前」や「メールアドレス」などを入力して「送信ボタン」を押すと、その内容が指定されたメールボックスに届くという仕組みになっています。

この流れをさらに細分化すると、「ユーザー入力画面」→「確認画面」→「サンクスページ」の3つの構成になります。

入力画面（必須）	ユーザーが問い合わせ内容を入力する画面使いやすさや項目の数、デザインが問い合わせ率に直結
確認画面（任意）	フォーム入力内容を確認する画面入力ミス防止や不要なお問い合わせの削減が見込める
サンクスページ（任意）	入力内容送信後に表示される画面送信完了を明確に伝える、追加アクションに誘導しやすい

ただし、確認画面とサンクスページは絶対に必要な要素ではありません。

自社にとって必要であれば、導入を検討してください。また、お問い合わせフォームの作り方によっては、用意できない可能性もあるので、注意が必要です。

お問い合わせフォームを作る4つの方法

お問い合わせフォームを作る主な方法は以下の4つです。順番に解説します。

ツール	費用	難易度	デザイン
Googleフォーム	無料	★	色やフォントなど変更可自由度が非常に低い
WordPressプラグイン	無料	★★	変更にはCSSの知識が必要だが、自由度は非常に高い ※CF7の場合（プラグインによる）
フォーム作成ツール	有料	★	プリセットが豊富で、ツール上で手軽に変更可能 ※ツールによって異なる
フォームの自作	0円〜※	★★★	自由自在

※フォームを自作する場合は、エンジニアの稼働時間がコストになります。

1. Googleフォームで作成

Googleが提供しているフォーム作成サービスです。Googleアカウントがあれば誰でも利用でき、初心者でも簡単につくれる手軽さが強みです。

実際に作れるフォームは以下になります。（メールアドレスと名前を入力するシンプルなもの）

一般的には、GoogleフォームのURLを共有して使うことが多いです。共有したURLにアクセスすると、上記のフォームが表示されて回答できるといった流れです。

操作画面は、以下のように直感的で非常に使いやすいです。チェックボックスやラジオボタンなど、フォームパーツも豊富で必要なものはだいたい揃っている印象です。

ただし、「いかにもGoogleフォームっぽいデザイン」は変更できません。（多少のカスタマイズは可能）

サイト内にGoogleフォームを埋め込むことは可能ですが、どうしても「Googleフォーム感」が出てしまいます。

また、お問い合わせ管理はスプレッドシートが基本、自動返信メールの中身を変更できないなど、細かい部分を調整できないので、サイト内のお問い合わせフォームとして本格的に使われることは少ないです。

そのため、アンケートやイベントの出欠確認、簡易的な申し込みフォームなどにオススメです。

※formタグのactionや各inputのname属性を無理やり合わせてフォームを自作する裏技あり（仕様変更に注意が必要）
※アドオンを使ってカスタマイズすることも可能（料金が発生する可能性あり）

2. WordPressのプラグインで作成

WordPressサイトなら、プラグインを使うことで、お金をかけずに本格的なお問い合わせフォームを設置することができます。

最も有名なプラグインは「Contact Form 7」です。無料で使えて、カスタマイズ性が高く、開発者が日本人である点が安心で人気な理由です。

何もカスタマイズしなければ、以下のシンプルなフォームを設置できます。

このフォームの操作画面は以下のような画面です。HTMLと独自のフォームテンプレートを使ってパーツを追加していきます。（操作には少し慣れが必要です。）

HTMLを自由に記入できますし、メールやメッセージのカスタマイズ性も高いので、「できること」が非常に多いです。

ただし、デザインを整えるには、HTMLとCSSの知識が必要になります。社内にマークアップできる方がいるのであれば、非常にコスパの良い選択肢といえます。

実際に弊社が運営している資料作成サービス「c-slide」のお問い合わせフォームは、「Contact Form 7」を利用しています。CSSでカスタマイズできれば、このレベルのフォームを作れるんですね。

「Contact Form 7」の使い方は以下で解説してますので、ぜひご覧ください。

Contact Form 7の使い方とカスタマイズ方法まとめ！おすすめの設定方法もご紹介！

WordPressでお問い合わせフォームを設置できるプラグインは「Contact Form 7」が最も有名です。この記事では、「Contact Form 7」に関する以下について解説していきます。 Contact Form 7は何ができるの？ Contact Form 7のイ...

他のプラグインも気になる方は、以下にメジャーなプラグインを紹介してます。

WordPressお問い合わせフォームプラグイン3選｜導入で失敗しない4つのポイント

WordPressでお問い合わせフォームを設置する時に思い浮かぶのがプラグインです。プラグインならコストをかけずに導入できそう！と考える方が多いと思います。確かに無料で使えるものが多いですが、導入するプラグインの選定を間違えると、逆に時間や費用がかかってしまう可能性があります。この...

3. フォーム作成ツールを利用

お問い合わせフォームを作成・運用できるサービスを利用する方法です。操作も直感的で機能拡張も簡単なので、お金をかけても良いならこの方法が最もオススメです。

フォームを設置する流れは以下になります。

ツール上でフォームを作成
コード（HTML/iframe）を取得
Webサイトに貼り付け

Googleフォームのさらに自由度が高いバージョンだと思ってください。

気になる料金ですが、基本的に月額で定額の費用が発生します。以下に国内の主要サービスの料金を比較表にまとめました。（だいたい月額数千円）

ツール	月額料金	無料プラン
formrun	3,880円〜	◯
Tayori	3,800円〜	◯
FormBridge	7,000円〜 ※kintoneの利用が必要	◯
FormMailer	1,485円〜	◯
オレンジフォーム	1,200円	◯

どれも無料プランが用意されていますが、フォームやユーザー、返答数などの制限が多いので、実用的とはいえません。

実際に使ってみて、使用感が良ければ有料プランを契約するのがオススメです。

4. お問い合わせフォームを自分で作成

お問い合わせフォームを1から自分で作成する方法です。どのようなフォームも実現可能ですが、最もコストがかかる方法になります。（システムの維持にもコストがかかる）

実務で使えるレベルのお問い合わせフォームを作成するのは簡単ではありません。例えば、簡単なお問い合わせフォーム1つ作成する場合でも、以下は最低限必要です。

フロント	フォームのレイアウト作成（HTML/CSS）バリデーションやダイアログ、動的な要素（JavaScript）
サーバーサイド	POST送信されたデータの処理バリデーション&サニタイズ処理メール送信処理
スパム対策	CSRF対策 reCAPTCHAの導入
顧客管理	自前で用意

※ドメインやサーバー、SSL化など、最低限のインフラが整っている前提

これだけだとイメージが湧かないと思うので、実際にWordPress環境で使える簡単なお問い合わせフォームを作成してみました。

以下を「functions.php」にコピペして、ショートコードをエディタに記入すると、シンプルなお問い合わせフォームが表示されるはずです。

// ショートコード [simple_contact_form] を登録
add_shortcode( 'simple_contact_form', 'render_simple_contact_form' );

/**
 * フォームの表示・処理を行うコールバック
 */
function render_simple_contact_form() {
    // 送信後のメッセージ用変数
    $message = '';

    // フォームが POST されたとき
    if ( $_SERVER['REQUEST_METHOD'] === 'POST' && isset( $_POST['scf_submit'] ) ) {
        // CSRF対策（nonce）のチェック
        if ( ! isset( $_POST['scf_nonce'] ) || ! wp_verify_nonce( $_POST['scf_nonce'], 'simple_contact_form' ) ) {
            $message = '<p class="scf-error">不正な送信です。</p>';
        } else {
            // 入力をサニタイズ・バリデーション
            $your_name  = sanitize_text_field( $_POST['scf_name'] );
            $your_email = sanitize_email( $_POST['scf_email'] );

            if ( empty( $your_name ) || empty( $your_email ) || ! is_email( $your_email ) ) {
                $message = '<p class="scf-error">名前と有効なメールアドレスを正しく入力してください。</p>';
            } else {
                // メール送信設定
                $to      = get_option( 'admin_email' );  // サイト管理者メールアドレス
                $subject = 'サイトからのお問い合わせ';
                $body    = "名前： {$your_name}\nメール： {$your_email}\n";
                $headers = [ 'Content-Type: text/plain; charset=UTF-8', "From: {$your_name} <{$your_email}>" ];

                if ( wp_mail( $to, $subject, $body, $headers ) ) {
                    $message = '<p class="scf-success">お問い合わせありがとうございます。送信が完了しました。</p>';
                    // 二重送信防止
                    $_POST = [];
                } else {
                    $message = '<p class="scf-error">メール送信に失敗しました。時間をおいて再度お試しください。</p>';
                }
            }
        }
    }

    // フォームの HTML を組み立てて返す
    ob_start(); ?>
    <style>
    .scf-error { color: red; }
    .scf-success { color: green; }
    .scf-form { max-width: 400px; margin:20px 0; }
    .scf-form input { width:100%; padding:8px; margin-bottom:10px; box-sizing:border-box; }
    .scf-form button { padding:8px 16px; }
    </style>

    <?php echo $message; ?>

    <form class="scf-form" method="post">
        <?php wp_nonce_field( 'simple_contact_form', 'scf_nonce' ); ?>

        <label for="scf_name">お名前（必須）</label><br>
        <input type="text" id="scf_name" name="scf_name" value="<?php echo esc_attr( $_POST['scf_name'] ?? '' ); ?>" required>

        <label for="scf_email">メールアドレス（必須）</label><br>
        <input type="email" id="scf_email" name="scf_email" value="<?php echo esc_attr( $_POST['scf_email'] ?? '' ); ?>" required>

        <button type="submit" name="scf_submit">送信</button>
    </form>
    <?php
    return ob_get_clean();
}

フォームの基本レイアウト、CSRF対策、入力値のサニタイズやバリデーション、メール送信機能など、本当に最低限の機能だけが備わったフォームになります。

お問い合わせフォーム作成時のポイント9つ

お問い合わせフォーム作成する時は、ユーザーにとって使いやすいかを意識しましょう。

以下に確認すべきポイントを9個まとめました。順番に対応できているかどうかチェックしてください。

基本項目	1. 必須項目を最低限に絞る 2. 入力チェックはリアルタイムか 3. 自動返信メールは設定済みか
デザイン	4. レスポンシブ対応できているか 5. 入力例を用意しているか 6. 確認画面・サンクスページを用意しているか
セキュリティ	7. SSL（HTTPS）対応しているか 8. スパム対策しているか 9. CSRF / XSS / SQLインジェクション対策しているか

1. 必須項目を最低限に絞る

お問い合わせフォームの必須項目は、名前やメールアドレスなど最低限に絞っておきましょう。

必須項目が多いとユーザーの入力負担が増え、途中で離脱されるリスクが高まってしまいます。そのため、本当に送信してほしい項目だけを必須にすることで、送信完了率を高めることができます。

また、入力項目が「必須」か「任意」が分かりにくいと、ユーザーが混乱する可能性があります。視覚的に区別しやすいスタイルにしてください。

2. 入力チェックはリアルタイムか

リアルタイムの入力チェックを導入することで、ユーザーの入力ミスをその場で防ぎ、ストレスなく送信完了まで導くことができます。

古いフォームだとたまに見かけますが、送信した後に入力ミスを指摘されると、ユーザーは「どこが間違っているんだっけ」「再入力が面倒」と感じてしまいます。

メールアドレスの形式にミスがあったらその場で知らせるなど、入力直後にミスを知らせることができれば、ユーザーの離脱を防ぐことができます。

3. 自動返信メールは設定済みか

フォーム送信後に自動返信メールを送信することで、ユーザーに「お問い合わせを確実に送信できた！」という安心感を与えることができます。

特に初めて利用するフォームの場合は、「本当に届いたのかな？」「いつ返事が来るのだろう？」と不安になっちゃいますよね。

すぐに「お問い合せありがとうございます。本日中にご返信いたします」という内容のメールが届けば、ユーザーは安心して待てますし、トラブル時にも「メールが届いていない」という誤解を防げます。

4. レスポンシブ対応できているか

レスポンシブ対応は、スマホやタブレットからも快適にフォーム入力できるようにするために必要です。スマホで見た時にお問い合わせフォームのデザインが崩れていないか確認しましょう。

レスポンシブ対応は、PCやタブレット、スマートフォンなど、様々な画面サイズに合わせて、適したデザインで表示することです。

画面サイズに最適化されていないと、入力欄や送信ボタンが見切れたり、拡大・スクロールが発生し、使いにくいフォームになってしまいます。

ユーザーの離脱を防ぐために、スマホ表示は必ず確認しましょう。

5. 入力例を用意しているか

入力欄の近くに「記入例」を用意することで、ユーザーは回答内容をイメージしやすくなります。

例えば、電話番号入力欄に「例）03-1234-5678」と表示するだけで「数字は半角なんだな、ハイフンを入れるのか」と直感的に理解しやすくなります。

入力例を用意するだけで、このような迷いをなくし、ユーザーが安心して記入できるようになります。また、入力内容の誤りを減らすという運営側のメリットもあります。

6. 確認画面・サンクスページを用意しているか

冒頭で確認画面とサンクスページは、必ずしも用意する必要は無いとお伝えしました。

確かに必須ではないものの、フォーム作成ツールや利用しているプラグインにこれらの機能が備わっているのであれば、できる限り利用しましょう。

ただ、優先度は高くないので、フォーム運用時に「やっぱり必要だな」と思ったタイミングで実装しても構いません。

7. SSL（HTTPS）対応しているか

お問い合わせフォームを設置しているページがSSL化できているか必ず確認しましょう。URLが「https」から始まっていればSSL化できているので問題無しです。

HTTP通信（SSL化できていない状態で通信）だと、ユーザーによって送信されたデータが第三者によって盗聴や改ざんされる危険性があります。

今は、大半のフォーム作成ツールがSSL化に対応していますし、運営サイトのSSL化対応もサーバー上で簡単に設定できるので、必ず対応しておきましょう。

8. スパム対策しているか

お問い合わせフォームにとって、スパム対策は必須です。

対策していないと、自動投稿ボットなどによる大量の迷惑メッセージが送信され、運営側のメールボックスが埋まり、重要な問い合わせが埋もれるリスクが存在します。

有名なスパム対策サービスとして、Googleが提供している「reCAPTCHA」があります。無料で使えるので、何も対策していない場合はこちらで対策してください。

9. CSRF / XSS / SQLインジェクション対策しているか

これらの対策はお問い合わせフォームを安全に運用するために必要です。こちらはフォームを自作する場合のみ確認してください。（WordPressプラグインやフォーム作成ツールの場合はすでに対策されています。）

CSRF対策	CSRFトークンなどの導入（リクエスト照合の強化）
XSS/SQLインジェクション対策	入力値のサニタイズや出力時のエスケープ処理

これらの対策を怠ると、第三者による不正送信やユーザー情報の漏えい、データベース改ざんなどが発生する可能性があるので、ご注意ください。

まとめ

今回はお問い合わせフォームの作り方について解説しました。

どの方法も実用的ですが、それぞれメリット・デメリットがあります。以下に作り方別にオススメな用途をまとめましたので、ぜひ参考にしてください。

Googleフォーム	デザインなどのこだわりはなく、とにかく手軽にフォームを用意したい
WordPressプラグイン	コストをかけずに本格的なフォームを用意したい社内にエンジニアがいればさらに良し
フォーム作成ツール	コストがかかっても良いので、簡単な操作で本格的なフォームを用意したい
フォームの自作	どうしても自分で作りたいエンジニア以外は不可能

Coneの中の人

資料・記事など、BtoBコンテンツについてCone社のメンバー一同で知識を集めあわせて解説します。株式会社Coneを応援してね！※Twitterリンクは代表のものです。