プラグインなしで作る自動見積もりフォーム — Claudeで生成、Googleフォームに自動転送

たまに「IT指導の料金っていくら?」と聞かれることがあります。

その都度説明するのも手間なので、ホームページ上で見積もり計算ができて、そのまま問い合わせフォームに内容を引き継げる仕組みを作ってみました。

本格的なビジネスにする気はないのですが、せっかく作ったので共有します。同じようなことをやりたい方の参考になれば幸いです。

▼実際に動いているページはこちら
https://futurama.blog/about/

作ったもの

会社概要ページに、自動見積もりツールを実装しました。

計算できる要素は3つです。

「対面・訪問」と「オンライン」を切り替えられて、対面の場合は距離や運転時間を入力すると交通費まで自動計算されます。電気代については、私のテスラモデルYの実電費を基準にした計算式が組み込まれています。

技術的には、以下の組み合わせで実現しています。

プラグインは一切使っていません。Cocoon テーマのまま、コードを貼るだけで動いています。

最初に Claude に依頼したのは「料金表と見積もり計算機を WordPress に貼れる形で作って」というシンプルなものでした。

そこから対話を重ねて、以下のような機能を追加していきました。

問い合わせフォーム本体は Google フォームを使っています。

最近の Google フォームには Gemini が組み込まれていて、自然言語で「お問い合わせフォームを作って、項目はこれとこれと…」と指示するだけでフォームの雛形が一発で完成します。

そこから細かい調整(メール自動収集、回答控えメール送信、確認メッセージのカスタマイズなど)を加えるだけで、完成度の高いフォームが30分もあればできあがります。

Google フォームには「事前入力URL機能」という便利な機能があります。

これは、特定のフィールドに値を入れた状態のフォームURLを生成できる機能で、URLパラメータに値を含めると、フォームを開いた時点でその値が入力済みになります。

サイトの「この見積もりで問い合わせる」ボタンを押すと、JavaScript が見積もり結果をテキストにまとめて、URLパラメータに埋め込んだ状態で Google フォームを新しいタブで開きます。

ユーザーはお名前等を入力するだけで送信完了。私のスプレッドシートには見積もり番号付きで全情報が記録されます。

実装中に一度だけハマったのが、WordPress(または Cocoon)が JavaScript コード内の「&」を「&」に自動変換してしまう問題です。

これにより、Google フォームに渡すURLが壊れて、最初は備考欄に値が入りませんでした。

解決策は、JavaScript 内で String.fromCharCode(38) を使って「&」を動的に生成すること。これでエスケープ問題を完全に回避できました。

地味なテクニックですが、同じようなことをする方の参考になれば。

今回の作業で改めて感じたのは、AIを活用すればウェブサイト制作のハードルがかなり下がっているということです。

HTML・CSS・JavaScript のコードは Claude が一瞬で生成してくれますし、細かい調整も対話で指示すれば即座に反映されます。Google フォームも Gemini で一発作成。

私はまだ WordPress を使っていますが、いずれ卒業して、静的HTMLでサイトを運用する選択肢も現実味を帯びてきました。そうなれば FTP でファイルをアップロードし直すだけで更新が完結するので、HTMLブロックを一つずつ書き換える手間もなくなります。

冒頭でも書きましたが、本格的にこれをビジネスにする気はありません。

ただ、もし「ちょっと興味がある」「触ってみたい」という方がいたら、ぜひ会社概要ページの自動見積もりツールを動かしてみてください。

「冗談です」と一言添えて問い合わせていただければスルーしますし、本気で検討されている方はどこかに「本気」と入れていただければ真剣に返信させていただきます。

技術的な部分で間違いや補足があれば、ぜひコメントで教えてください。

🎁 Claudeを試してみたい方へ(招待リンク)

記事を読んで「Claudeを使ってみたい」と思った方は、よろしければ下記の私の招待リンクからご登録いただけると嬉しいです。

※登録は無料です。私の招待リンク経由でご登録いただいても、あなたに不利になることは一切ありません。