Cursorで「お問い合わせフォーム」を自作する：外部ツールを使わず、自社サイトに最適化した窓口を作る手順

自社のホームページにある「お問い合わせフォーム」は、お客様を迎え入れる「インターネット上の玄関」のようなものです。しかし、「とりあえず無料の外部ツールを使っているからデザインが浮いている」「項目を少し変えたいだけなのに制作会社に頼むと数万円かかると言われた」とお悩みの広報や営業担当者の方は多いのではないでしょうか。

そんな課題を解決するのが、AIがプログラミングを手伝ってくれる次世代のエディタ「Cursor（カーソル）」です。Cursorを使えば、専門的なプログラミングの知識がない非エンジニアでも、自社のサイトにぴったり合ったオリジナルのお問い合わせフォームを自作することができます。

この記事では、Cursorを使って外部ツールに依存しない自社専用のお問い合わせフォームを作るための具体的な手順、スパム対策のポイント、そして失敗しないためのコツを現場目線で分かりやすく解説します。

Cursorでお問い合わせフォームを自作すべき理由と解決の方向性

「お問い合わせフォームなんて、既存の無料ツールを使えば十分では？」と思うかもしれません。確かに、外部のフォーム作成ツールは手軽に導入できるというメリットがあります。しかし、BtoBのビジネスにおいて、自社のブランドイメージを損なわずに、お客様からスムーズに情報を入力していただくためには、「自社サイトに完全に最適化されたフォーム」の存在が非常に重要です。

まずは、なぜ今、AIエディタの「Cursor」を使ってフォームを自作することがおすすめなのか、その理由と全体の方向性を解説します。

最大のメリットは「思い通りのカスタマイズ」が「手軽」にできることです。

これまで、自社専用のフォームを作るには、専門のプログラマーに依頼してHTML、CSS、PHPなどの言語を書いてもらう必要がありました。しかし、「ノーコード」の先へ：広報が自ら専用のAIツールを開発する「AX時代」の処方箋と具体手順でも解説している通り、現在はAIの力を借りることで、非エンジニアであっても「こんな画面を作りたい」「こんな機能が欲しい」と日本語で指示を出すだけで、AIが必要なコードを自動で書いてくれます。

Cursorを使ってフォームを自作する方向性として、以下の3つのポイントを押さえておきましょう。

• 外部ツール依存からの脱却：自社でフォームをホスティングすれば、月額料金やサービス終了のリスクを気にせず、自社の資産としてフォームを保有できます。
• シームレスなデザインの実現：サイト全体のデザイン（色やフォント）と完全に一致したフォームを作れるため、お客様に違和感を与えません。
• 柔軟な項目の変更：「新商品の項目を追加したい」「不要な質問を削りたい」といった修正が、自分たちの手で即座に行えます。

つまり、Cursorを使うことで、「システム会社に外注するクオリティ」を「自社の担当者の手」で実現できるということです。これが、これからのBtoBマーケティングにおいて非常に強力な武器になります。

Cursorでフォームを作る具体的なやり方・手順

それでは、実際にCursorを使ってお問い合わせフォームを自作していく手順を解説します。専門用語はなるべく使わず、プロセスごとに「何をすればいいのか」をステップバイステップで説明します。詳細な画面操作はCursorの公式ヘルプなどに譲りますが、全体の流れをしっかりと掴んでください。

ステップ1：フォームの「要件（中身）」を決める

Cursorに指示を出す前に、まずは「どんなフォームにしたいか」を人間の頭で整理しておく必要があります。家を建てる前の設計図のようなものです。ここで決めるべきは、お客様に入力してもらう「項目」です。

BtoBのフォームの場合、項目が多すぎるとお客様が面倒に感じて離脱してしまいます。本当に必要な情報だけを厳選しましょう。以下は、BtoBで一般的な項目の例です。

項目名	入力形式	必須 / 任意	理由・目的
会社名	テキスト	必須	BtoB取引の基本情報として必要不可欠です。
お名前（担当者名）	テキスト	必須	連絡を取るためのキーパーソンを把握します。
メールアドレス	メールアドレス形式	必須	自動返信や回答の送付に絶対必要です。
電話番号	数字（ハイフン可）	任意	緊急時や詳細なヒアリングが必要な場合に使います。
お問い合わせ種別	ドロップダウン（選択式）	必須	「資料請求」「サービスに関する質問」「協業の相談」など、内容を分類します。
お問い合わせ内容	複数行のテキストエリア	必須	具体的な相談事項を自由に書いてもらいます。

このように、あらかじめ「何を聞くか」を表にまとめておくと、後の工程が非常にスムーズになります。

ステップ2：Cursorにプロンプト（指示書）を投げる

要件が決まったら、いよいよCursorの出番です。Cursorを開き、AIとの対話ウィンドウ（Chat機能やComposer機能）に、先ほど決めた要件を日本語で指示します。

ここでのポイントは、「AIにプログラマーの役割を与え、具体的に指示すること」です。たとえば、次のようにプロンプト（指示文）を書きます。

「あなたは優秀なフロントエンドエンジニアです。自社サイトのお問い合わせフォームを作成してください。デザインはシンプルで、ビジネス向けの清潔感のあるものにしてください。必要な項目は以下の通りです：1.会社名（必須） 2.お名前（必須） 3.メールアドレス（必須） 4.お問い合わせ種別（ドロップダウンで「資料請求」「見積依頼」「その他」から選択、必須） 5.お問い合わせ内容（必須）。スマートフォンで見ても崩れないレスポンシブデザインにしてください。HTMLとCSSのコードを出力してください。」

このように指示を出すと、Cursorは数秒で美しいフォームのコードを生成してくれます。Cursorを「最強のWeb更新アシスタント」にする：コードが読めなくてもサイト修正が秒で終わるという記事でも紹介しているように、コードの意味が完璧に分からなくても、「このボタンの色を青に変えて」「項目の間隔をもう少し広くして」と追加でお願いすれば、AIがすぐに修正してくれます。

ステップ3：バックエンド（メール送信の仕組み）を構築する

HTMLとCSSで「見た目」ができたら、次は「送信ボタンを押したときに、実際にメールが担当者に届く仕組み」を作ります。これを専門用語で「バックエンド」と呼びます。

昔は、サーバーにPHPなどのプログラムを直接書いて設定するのが一般的でした。（参考：PHPを使ったお問い合わせフォームの作り方）しかし、現在はサーバーの管理がいらない「サーバーレス」という仕組みや、外部の「メール送信API」を使うのが主流です。

非エンジニアの方におすすめなのは、フォームのデータを受け取ってメールに変換してくれるサービス（例えば「Amazon SES」や、各種フォーム連携ツール）をバックエンドとして活用することです。ただし、これらのサービスの設定にはある程度の技術的な理解やガイダンスが必要となる場合があります。Cursorに「作成したHTMLフォームから、〇〇というサービスを使ってメールを送信するためのJavaScript（またはPHP）のコードを書いてください」と指示すれば、必要な連携コードを提案してくれます。

ステップ4：スパム対策を組み込む

お問い合わせフォームを公開すると、必ずと言っていいほど「迷惑メール（スパム）」が届くようになります。自動プログラム（ボット）が、世界中のフォームを巡回して広告メッセージを送りつけてくるからです。

これを防ぐために、昔は「歪んだ文字を読ませて入力させる（画像認証）」という方法がよく使われていました。しかし、これは人間にとっても面倒です。2026年現在の最新トレンドでは、お客様の入力の手間を増やさずに裏側でボットを判定する仕組みを導入するのが一般的です。

代表的なのが「Cloudflare Turnstile」や「hCaptcha」といったサービスです。これもCursorに「このフォームにCloudflare Turnstileによるスパム対策を組み込んでください」と指示すれば、必要なコードを組み込んでくれます。

ステップ5：動作テストと公開

コードが完成したら、いきなり本番環境（お客様が見るサイト）に公開してはいけません。必ずテスト環境で「本当にメールが届くか」「スマートフォンで見たときに入力しやすいか」「必須項目を空にして送信したときに、ちゃんとエラーが出るか」を確認しましょう。

テストで問題がなければ、自社のサーバーにファイルをアップロードして完了です。

自作フォームを導入した後の効果・成果イメージ

Cursorを使って自社専用のお問い合わせフォームを実装すると、会社にどのような良い変化がもたらされるのでしょうか。期待できる効果を見てみましょう。

一番の変化は、「お客様の離脱率が下がり、問い合わせ数が増える」という点です。

外部ツールで作ったフォームは、どうしても自社サイトのデザインから浮いてしまいがちです。お客様が「お問い合わせ」ボタンをクリックした瞬間に、別会社のロゴが入った簡素な画面に飛ばされると、「本当にこの会社に情報を提供して大丈夫だろうか？」と不安に感じてブラウザを閉じてしまう（離脱する）ことがあります。

自社サイトとデザインが完全に統一されたフォームであれば、お客様は安心感を持って入力を進めることができます。また、スマートフォンの画面サイズにぴったりと合っているため、移動中のビジネスパーソンでもストレスなく入力できます。

また、コストの削減とスピードアップも大きな成果です。Cursorには無料プラン（Hobby）があります。無料でもAI機能は使えますが、Agent利用やTab補完には制限があります。より高い利用枠や先端モデルへのアクセス、Cloud agents などを使いたい場合は、月額20ドルのProプラン以上を検討するとよいでしょう。自社でフォームを自作しホスティングすれば、外部フォーム作成ツールへの月額費用はかかりません。さらに、「新しいキャンペーン用の項目を1つ追加したい」という時も、制作会社に見積もりを取って数週間待つ必要はなく、社内の担当者がCursorを使って数分で修正できるようになります。

現場でよくある失敗と回避法

AIを使えば簡単にフォームが作れる時代になりましたが、それでも現場でやってしまいがちな失敗がいくつかあります。事前に知っておくことで、確実に対策を講じましょう。

失敗1：送信できたかどうかがお客様に伝わらない

一番よくある失敗が、送信ボタンを押した後に画面が切り替わらず、「送信完了しました」というメッセージも出ないという状態です。お客様は「ちゃんと送れたのかな？」と不安になり、何度も送信ボタンを押してしまいます。その結果、同じ問い合わせが何件も届くことになります。

【回避法】
Cursorに指示を出す際、「送信が完了したら『お問い合わせありがとうございます』というサンクスページ（完了画面）に遷移させるか、画面上に明確な成功メッセージを表示する処理を入れてください」と明確に伝えてください。また、お客様のメールアドレス宛に「お問い合わせを受け付けました」という自動返信メールが届く仕組みも必ず設定しましょう。

失敗2：セキュリティの脆弱性を放置してしまう

入力された文字をそのままサーバーで処理してしまうと、「クロスサイトスクリプティング（XSS）」といったサイバー攻撃の標的になるリスクがあります。悪意のあるプログラムコードをフォームに入力されると、サイトが改ざんされたりする恐れがあります。

【回避法】
AIにコードを書かせる際に、「入力値のサニタイズ（無害化）と、厳格なバリデーション（入力チェック）を必ず実装してください」と指示してください。AIはセキュリティを考慮した安全なコードを出力してくれます。

失敗3：入力項目が多すぎて誰も入力してくれない

「せっかくお問い合わせをしてくれるのだから、役職や従業員数、決裁権の有無など、色々な情報を聞いておきたい」と営業部門から要望が出ることがあります。しかし、項目が増えれば増えるほど、お客様の入力ハードルは上がり、途中で諦めてしまいます。

【回避法】
フォームの目的は「最初の接点を持つこと」です。詳細な情報は、後日担当者がヒアリングすれば良いのです。項目は必要最小限（会社名、名前、メールアドレス、内容程度）に絞りましょう。

よくある質問（FAQ）

まとめ：AIを活用して、自社に最適なWeb運用を

この記事では、Cursorを使ってお問い合わせフォームを自作する方法について解説しました。AIの進化により、かつては専門家しかできなかったようなWebサイトの機能開発が、現場の担当者の手でスピーディーに行えるようになっています。

自社専用のフォームを作ることは、単なるコスト削減にとどまらず、「お客様にとっての使いやすさ」を追求し、結果的にビジネスの機会を増やすことにつながります。ぜひ、今回の手順を参考に、Cursorを使ったフォーム作りにチャレンジしてみてください。

「AIを活用した記事づくりや、検索に強いコンテンツ制作に興味はあるけれど、社内にリソースがない…」とお悩みの場合は、当社のAI×SEO記事制作サービス「GEO」にお任せください。AIが「おすすめ」として紹介したくなるような良質な記事を、1記事4,980円から提供されているとされています。AI時代に最適化された文章で、御社の集客を強力にサポートします。まずは気軽にご相談してみませんか？
詳しくはGEOのサービスページをご覧ください。