Cursorで問い合わせフォームを自作｜外部ツール不要で作る手順

「問い合わせフォームを設置したいけど、外部サービスの月額料金は払いたくない」「でも自分でコードを書くのは無理そう」。そんな板挟みでお悩みではありませんか。

結論から言うと、AIコードエディタのCursorを使えば、外部ツールに頼らず自社サイトに問い合わせフォームを自作できます。この記事では、非エンジニアの方でも再現できるように、設計の考え方から実際の作り方、送信の仕組み、スパム対策、そして現場でつまずきやすいポイントまでを順番に解説します。

Contents / 目次

1. 結論。Cursorが書くのはコードまで、勝負は3つの設計
2. Cursorで問い合わせフォームを作る具体的な手順
3. 自作するとどう変わるか。コストと自由度のメリット
4. よくある失敗と回避法。現場でつまずく3パターン
5. 使う側の落とし穴。自作の「向き不向き」を正直に話します
6. よくある質問

結論。Cursorが書くのはコードまで、勝負は3つの設計

最初に大事なことをお伝えします。Cursorは、フォームの見た目（HTMLとCSS）だけでなく、送信用のPHPなどのコードも書けます。ただし、そのコードを動かすサーバーと、メールを送る設定は自社で用意する必要があります。

つまり、問い合わせフォームは「入力画面」と「配達係」の2つでワンセットです。Cursorは入力画面も送信用のコードも作れますが、そのコードを動かすサーバーとメールの設定までは用意してくれません。ここを知らずに作り始めると、後から作り直しになります。

Cursorで問い合わせフォームを作る具体的な手順

ここからは、実際に手を動かす流れを5ステップで解説します。コードもそのまま使える形で載せますので、自社の値に書き換えながら進めてください。

ステップ1。集める項目を紙に書き出す

Cursorを開く前に、まず紙やメモに「欲しい項目」を箇条書きにします。これがCursorへの指示書になります。

ここで一番やりがちな失敗が、項目の盛りすぎです。入力項目が多いほど、訪問者は途中で面倒になって離脱します。「この情報がないと営業や対応が進まない」というものだけに絞りましょう。

• お名前：必須。誰からの問い合わせかを把握する
• メールアドレス：必須。返信先として使う
• お問い合わせ内容：必須。自由記述で要件を書いてもらう
• 会社名・電話番号：任意でよい。必須にするほど離脱が増える

ステップ2。Cursorに日本語で指示して見た目を作る

項目が決まったら、Cursorに自然な日本語で指示します。完璧な指示文を考え込む必要はありません。ただし、AIは指示に無い条件を推測で埋めることがあるので、項目・必須かどうか・送信先は短くても書いて渡します。まずは出発点として、次のくらい短いたたき台（seed）で十分です。

基本的なHTMLの問い合わせフォームを作ってください。
項目は、お名前（必須）、メールアドレス（必須）、
お問い合わせ内容（必須・複数行）です。
スマホでも見やすいようにCSSも付けてください。
送信先は contact.php への POST 送信にしてください。

［ここに自社の都合（任意項目など）を追記して、AIと対話しながら詰める］

すると、たとえば次のようなHTMLが返ってきます。これがフォームの「入力画面」です。1か所だけ、後で説明するスパム対策の隠し項目（website）を入れてあります。

<form action="contact.php" method="post">
  <label>お名前（必須）
    <input type="text" name="name" required>
  </label>
  <label>メールアドレス（必須）
    <input type="email" name="email" required>
  </label>
  <label>お問い合わせ内容（必須）
    <textarea name="message" required></textarea>
  </label>
  <!-- ハニーポット：人には見えない隠し項目（スパム対策） -->
  <input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">送信する</button>
</form>

ステップ3。送信の仕組み（配達係）を用意する

ここが最重要です。先ほどのHTMLだけでは、送信ボタンを押しても内容はどこにも届きません。入力内容を自社のメールに届ける「配達係」が必要です。PHPが動くサーバー（XSERVERやさくらなど）を使っているなら、次のPHPファイルを置くのが一番シンプルです。

このコードは、入力チェック・スパム対策・メール送信までを一通りこなす完結した例です。冒頭コメントの前提を読んで、自社の値に書き換えてください。

<?php
// 【前提】このファイルを contact.php としてPHPが動くサーバーに置く
// HTMLフォームの action="contact.php" から送信される想定
// ［送信先メール］と［自社ドメインのアドレス］は必ず自社の値に変更する

// 1. POST以外のアクセスは弾く
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    exit('不正なアクセスです');
}

// 2. ハニーポット：隠し項目に値が入っていたらボットなので静かに終了
if (!empty($_POST['website'])) {
    exit();
}

// 3. 入力値を取得して前後の空白を除去
$name    = trim($_POST['name'] ?? '');
$email   = trim($_POST['email'] ?? '');
$message = trim($_POST['message'] ?? '');

// 4. 入力チェック（必須・形式・長さ）
$errors = [];
if ($name === '' || mb_strlen($name) > 50) {
    $errors[] = 'お名前を正しく入力してください';
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $errors[] = 'メールアドレスの形式が正しくありません';
}
if ($message === '' || mb_strlen($message) > 2000) {
    $errors[] = 'お問い合わせ内容を入力してください';
}
if ($errors) {
    http_response_code(400);
    exit(implode("\n", $errors));
}

// 5. メールヘッダーインジェクション対策（改行混入を拒否）
foreach ([$name, $email] as $v) {
    if (preg_match('/[\r\n]/', $v)) { exit(); }
}

// 6. メール送信
$to      = 'info@example.com';        // ［送信先メールに変更］
$subject = '【サイトお問い合わせ】' . $name . '様';
$body    = "お名前: {$name}\nメール: {$email}\n\n内容:\n{$message}";
$headers = 'From: no-reply@example.com' . "\r\n"  // ［自社ドメインのアドレスに変更］
         . 'Reply-To: ' . $email;

mb_language('Japanese');
mb_internal_encoding('UTF-8');

if (mb_send_mail($to, $subject, $body, $headers)) {
    header('Location: thanks.html'); // 完了ページへ遷移
    exit();
} else {
    http_response_code(500);
    exit('送信に失敗しました。時間をおいて再度お試しください');
}

「PHPは難しそう」と感じたら、この丸ごとのコードをCursorに貼り付けて「この処理を解説して」「自社用に直すべき箇所を教えて」と聞けば、対話しながら理解できます。AIは生成だけでなく、既存コードの説明役としても優秀です。

なお、社内向けの問い合わせ集計なら、Googleフォームの方が手軽なこともあります。Googleフォームは、回答をリンクしたGoogleスプレッドシートに保存できます（Googleのヘルプ「フォームの回答の保存先を選択する」）。総務・情シスへの問い合わせをデータ化する集計フォーム自作術でも、集計を前提としたフォームの考え方を解説しています。

ステップ4。サイトに組み込んで設置する

HTMLを固定ページに貼り付けるか、サーバーに直接ファイルを置いて公開します。WordPressを使っているなら、固定ページにカスタム HTML ブロックを追加して、フォームのHTMLを貼り付けます。

固定ページに貼る場合は、フォームの action の値も確認します。「contact.php」のように相対パスで書くと、固定ページのURLを基準に送信先が決まるため、たとえば /contact/ のページからは /contact/contact.php に送られます。contact.php をサイト直下に置いたなら、action を「/contact.php」に書き換えます。

ステップ5。必ずテスト送信して確認する

公開したら、必ず自分でテスト送信します。ここを省くと「問い合わせが届いていなかった」という最悪の事故につながります。公開前チェックリストを用意しました。

• 届くか：テスト送信して、設定したメールアドレスに実際に届くか確認する
• 迷惑メール：迷惑メールフォルダに入っていないかも確認する
• 必須チェック：空欄のまま送信して、ちゃんとエラーになるか確認する
• スマホ表示：スマホで開いて、はみ出さず入力できるか確認する
• SSL：URLが「https」から始まっているか確認する（個人情報を扱うため必須）

自作するとどう変わるか。コストと自由度のメリット

Cursorでフォームを自作すると、主に「コスト」と「自由度」の2つで効果が出ます。

まずコスト面です。外部フォームサービスの多くは月額制です。仮に月3,000円のサービスを使い続けると、年間で約36,000円、5年で18万円ほどになります。自作なら、すでに借りているサーバー上で動かせるため、追加の月額費用をほぼゼロにできます（金額はあくまで一般的な例であり、利用サービスによって変わります）。

次に自由度です。外部サービスでは「この項目を足したい」「この見た目に変えたい」と思っても、提供範囲の中でしか調整できないことがあります。自作なら、Cursorに「電話番号の項目を任意で追加して」と頼むだけで、その場で変更できます。事業の変化に合わせてフォームを育てられるのは、自作の大きな強みです。

AIにコードや文章を作らせる流れは、もはや一部の技術者だけのものではありません。

届いた問い合わせの活かし方。フォームを「ただの受付窓口」で終わらせず、「どんな問い合わせが・何件・どんな内容で来たか」を記録・分析すると、改善につなげられます。届いた内容をスプレッドシートに溜めるだけでも、営業の打ち手が見えてきます。

「指示を出すだけでサイトが直る」という体験そのものに価値を感じる方は、Vibe CodingでWeb担当者が脱ストレスする方法もあわせて読んでみてください。

よくある失敗と回避法。現場でつまずく3パターン

フォームの自作で起こりやすい失敗を、3つに絞って紹介します。どれも「起きる状況→どうなるか→どう防ぐか」のセットで覚えておくと、事前に避けられます。

失敗1。設計せずに作り始めて作り直しになる

いきなりCursorでフォームを作り始めると、後から「項目が足りない」「送信の仕組みを考えていなかった」「セキュリティが甘い」と気づき、最初から作り直しになります。

防ぎ方はシンプルです。冒頭で触れた「3つの設計（項目・送信方法・スパム対策）」を、手を動かす前に紙1枚にまとめておくこと。たった10分の準備が、数時間の手戻りを防ぎます。

失敗2。スパムメールが大量に届く

スパム対策をしないままフォームを公開すると、ボット（自動プログラム）から迷惑メッセージが大量に送られてきます。本物の問い合わせがその中に埋もれ、見逃してしまう事故も起きます。

防ぎ方は2段構えがおすすめです。

• ハニーポット：先ほどのコードに入れた、人には見えない隠し項目です。ボットだけが反応して入力するため、値が入っていれば自動で弾けます。
• reCAPTCHA：より強力に防ぎたい場合に設置します。導入にはGoogle側での登録とキーの取得が必要なので、正確な手順や料金体系は公式ヘルプで確認してください。

失敗3。送信したのにメールが届かない

「フォームは動いているのに、なぜか自社にメールが来ない」というトラブルも起こります。原因としては、宛先アドレスの打ち間違い（全角文字の混入など）、サーバー側のメール設定の不整合、SMTP未設定などが考えられます。

防ぎ方は、公開後に必ずテスト送信すること、そして送信ログを残せるようにしておくことです。トラブルが起きたとき、ログがあれば原因を追えます。「動いているはず」と思い込まず、自分の目で届くことを確認する習慣が、機会損失を防ぎます。

個人情報を扱うフォームでは、SSL暗号化（httpsで始まるURL）とプライバシーポリシーへのリンク明記が事実上の必須です。これがないと、訪問者に不安を与えるだけでなく、企業の信頼性にも関わります。

使う側の落とし穴。自作の「向き不向き」を正直に話します

ここまで自作のやり方を解説してきましたが、運用を続けるうえで知っておきたい落とし穴があります。

一番の落とし穴は、「作れること」と「運用し続けられること」は別だという点です。Cursorを使えば、フォーム自体は驚くほど早く作れます。問題はその後です。送信の仕組みやセキュリティの土台は、サーバーの環境やメールの設定が絡むため、一度トラブルが起きると、コードを書いた本人しか直せない「属人化」に陥りがちです。

もう一つの見落としが、コストの考え方です。月額料金がゼロになる代わりに、保守やトラブル対応という「時間のコスト」が自社に乗ります。フォームが止まれば問い合わせが止まり、それは売上の機会損失に直結します。月数千円の外部サービス料金と、自社で抱えるリスクを天秤にかける視点が必要です。

おすすめの分担。送信の仕組みとセキュリティの「土台」だけは、最初に詳しい人に作ってもらう。その後の項目変更や文言修正は、Cursorに相談しながら自社で回す。この役割分担が、いちばん無理がなく続きます。

「見た目はAIで、土台はプロと一緒に」。この切り分けができると、自作のメリット（自由度とコスト）を活かしつつ、リスクだけを外せます。

逆に、全部を自社だけで抱え込もうとすると、本業の片手間では回らなくなることがあります。社内に専任のIT担当がいない会社ほど、この見極めが大事になります。

なお、AIに業務情報を入力する際の注意点はAIに入力してはいけない個人情報｜線引きと社内ルールの作り方にまとめています。

よくある質問

問い合わせフォームを含めて、相談を受けるページから見直したい方は、コレットラボのホームページ制作・LP制作をご覧ください。よくある質問からお問い合わせへ進む構成を作り、公開前にフォームの送信まで確認します。