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

「お問い合わせフォーム、外部サービスを埋め込んでいるけど、デザインがサイトから浮いている」「項目を1つ変えたいだけなのに、毎月の利用料を払い続けるのもなんだか割に合わない」。そんなモヤモヤを抱えていませんか。

この記事では、AIコードエディタ「Cursor」を使って、外部ツールに頼らず自社サイトにぴったり合うお問い合わせフォームを自分たちで作る手順を、現場目線でお伝えします。コードを書いた経験がない方でも、何をどの順番で進めればいいかが分かる内容です。専門用語はそのつど補足するので、安心して読み進めてください。

まず押さえるべきは「3つの設計」。ツール選びより先にやること

いきなりCursorに「フォームを作って」と指示したくなりますが、その前に決めておくべきことがあります。ここを飛ばすと、あとから作り直しになりがちです。お問い合わせフォームづくりで本当に大事なのは、ツールの操作テクニックではなく、次の3つを先に固めることなんです。

• 入力項目の設計：誰から、どんな情報をもらえれば営業や対応がスムーズになるかを決める。多すぎる項目は離脱の最大の原因になります。
• 送信のしくみ（バックエンド）：入力された内容を「どうやって自社に届けるか」を決める。ここがフォームの心臓部です。
• セキュリティとスパム対策：迷惑メールや不正な送信を防ぐしくみ。後回しにすると痛い目を見ます。

とくに2つ目の「送信のしくみ」は、見落とされがちなポイントです。フォームの見た目（入力欄やボタン）はHTMLとCSSという言語で作れますが、それだけでは入力内容はどこにも届きません。かんたんに言うと、フォームは「入力する箱」を作っただけでは機能せず、「箱の中身を自社のメールやデータベースに運ぶ配達係」が別途必要なんです。この配達係をどう用意するかを最初に決めておくのが、つまずかないコツです。

ポイント。フォーム自作の成否は「作り始める前の設計」で8割決まります。Cursorはあくまで設計を素早く形にする道具であって、設計そのものを肩代わりしてくれるわけではありません。

Cursorでフォームを作る具体的な手順。5つのステップで進める

設計が固まったら、いよいよCursorの出番です。Cursorは、世界中の開発現場で使われているコードエディタにAIを組み込んだツールで、日本語で「こういうものを作って」と話しかけるだけでコードを書いてくれます。カカクコムが開発効率の向上を理由に全社導入を進めるなど、プロの現場でも活用が広がっています。ここでは非エンジニアの方でも進められる流れを5ステップで紹介します。

ステップ1。作りたいフォームの中身を言葉で書き出す

まずは紙やメモに、欲しい項目を箇条書きにします。たとえば「会社名、お名前、メールアドレス、電話番号、お問い合わせ内容」のように、先ほど設計した項目をそのまま並べるだけでOKです。この時点で「どれを必須にするか」も決めておきましょう。これがそのままCursorへの指示書になります。

ステップ2。Cursorに自然な日本語で指示を出す

Cursorのチャット欄に、ステップ1で書き出した内容をそのまま伝えます。たとえば「会社名・名前・メール・電話・問い合わせ内容を入力できるお問い合わせフォームをHTMLとCSSで作って。スマホでも見やすいレスポンシブ対応にして」といった具合です。レスポンシブとは、パソコンでもスマートフォンでも画面サイズに合わせて表示が崩れないようにする作りのことです。今はアクセスの大半がスマホなので、ここは必ず指示に入れてください。

ステップ3。送信のしくみを相談しながら決める

次に、入力内容を自社に届ける方法を決めます。自社サイトがどんな環境で動いているかによって最適な方法が変わるので、ここはCursorに「この環境で送信処理を作るには、どんな選択肢がありますか」と相談するのが賢いやり方です。よくあるのは、サーバー側でメール送信を処理するPHPというプログラムを使う方法や、フォーム送信を代行してくれる外部の送信サービスとつなぐ方法です。自社の技術環境に合わせて、Cursorに提案させて選びましょう。

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

フォームを公開すると、必ずと言っていいほど機械による迷惑送信（スパム）が来ます。これを防ぐために、人間かどうかを判定するしくみを入れます。Cursorに「スパム対策としてCloudflare Turnstileを組み込みたい」と伝えれば、組み込み方を案内してくれます。Turnstileは、利用者に面倒なクイズを解かせずに自動でボットをはじいてくれる、近年よく使われる無料のしくみです（2026年06月09日時点）。

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

完成したら、公開前に自分で何度かテスト送信します。パソコンとスマホの両方、できれば複数のメールソフトで「ちゃんと届くか」「文字化けしていないか」を確認してください。ここを省くと、お客さまからの問い合わせが届かないという最悪の事態になりかねません。なお、Cursorの画面操作の細かい部分はバージョンによって変わるため、最新の使い方は公式のヘルプを参照するのが確実です。サイト全体の修正にCursorを使う方法はCursorを「最強のWeb更新アシスタント」にするでも詳しく解説しています。

自作するとどう変わる。コストとスピードの成果イメージ

「わざわざ自作しなくても、外部ツールでいいのでは」と思う方もいますよね。たしかに無料のフォーム作成ツールは手軽です。ただ、自社サイトに最適化したフォームを持つと、長い目で見て次のような変化が期待できます。

項目	外部ツール埋め込み	Cursorで自作
デザインの統一感	サイトから浮きやすい	サイトに完全に合わせられる
項目の変更	サービスの制約を受ける	その場ですぐ直せる
月額コスト	機能を増やすと有料化しがち	基本は自社サーバー内で完結
データの所有	外部サービス側に蓄積	自社で管理できる

とくに効果が大きいのが「変更したいときにすぐ直せる」というスピード感です。キャンペーンに合わせて項目を1つ足したい、確認画面を付けたいといった要望に、外注や月額サービスの仕様変更を待たずに対応できます。問い合わせ数を増やすには、フォームの改善を細かく繰り返せる体制そのものが効いてくるんです。

成果を出している企業に共通するのは、フォームを「作って終わり」にせず、入力途中での離脱がどこで起きているかを見ながら改善し続けている点です。フォームを自社の手元に置くことが、その改善サイクルの土台になります。サイト全体を使い勝手よく育てる発想はCursorで自社サイトを「スマホアプリ風」にする手順とも通じる考え方です。

よくある失敗と、その防ぎ方

現場でフォームの自作を見ていると、つまずくポイントはだいたい決まっています。先回りして知っておけば、ほとんどは避けられます。

失敗1。AIが書いたコードをそのまま信じてしまう

Cursorはとても優秀ですが、指示の出し方によっては的外れなコードを出すこともあります。とくにセキュリティに関わる部分は、生成されたものを鵜呑みにせず、必ず動作を確認してから公開してください。AIは「優秀なアシスタント」であって、最終判断をする「指揮者」は人間だという感覚が大事です。

入力内容のチェック（バリデーション）は、利用者側の画面だけでなく、必ずサーバー側でも行ってください。画面側のチェックだけだと、悪意のある送信を素通りさせてしまうリスクがあります。ここはCursorにもはっきりとAI任せにせず確認したいポイントです。

失敗2。入力項目を欲張りすぎる

「あれもこれも聞いておきたい」と項目を増やすと、利用者は面倒に感じて途中で離脱します。本当に必要な項目だけに絞るのが鉄則です。迷ったら「この情報がなくても最初の連絡は取れるか」を基準に、削れる項目は思い切って削りましょう。

失敗3。個人情報の扱いを説明していない

送信ボタンのそばに、プライバシーポリシー（個人情報の取り扱い方針）へのリンクがないと、利用者は不安で送信をためらいます。「入力いただいた情報は問い合わせ対応以外には使いません」という一文とリンクを添えるだけで、安心感が大きく変わります。社内のセキュリティ意識を整える話は「AIセキュリティ」超入門も参考になります。

よくある質問

自社だけで進めるのが不安なときは

ここまで読んで「やることは分かったけれど、送信のしくみやセキュリティの判断は自信がない」と感じた方もいるはずです。フォームの土台部分は、最初の設計を間違えなければ長く安心して使えます。コレットラボでは、AIを使った業務のしくみづくりを現場目線で伴走しています。まずは現状を整理するだけでも大丈夫です。お気軽にご相談ください。お話を聞かせていただくところから始めましょう。