見積もりフォームを作った。入力すると金額が出る。でもその結果、誰も保存していなかった。
依頼があったのは、プロジェクター施工を扱う業者さんのサイトです。ウェブ上に見積もりフォームがあって、縦横のサイズや枚数を入れると台数と金額が自動で出る。計算はちゃんと動いていました。問題は、その先です。フォームに入れた内容も、計算した結果も、どこにも残らない。問い合わせが来るたびに誰かがスクリーンショットを撮るか、手で書き写すか、もしくは「さっきの見積もり、どんな内容でしたっけ」と聞き直すことになっていました。
フォームを作るコストをかけて、一番欲しかった記録が抜けている。よくあるパターンです。
フォームとスプレッドシートをつなぐ部品
やることは一本です。フォームで「見積もり」ボタンを押した瞬間に、入力した内容と計算結果をGoogleスプレッドシートの新しい行に書き込む。人は何もしなくていい。
仕組みとしては、フォーム(HTML)とスプレッドシートの間に通訳を一つ置きます。フォームからデータを受け取って、スプレッドシートに書く処理を動かす。Googleが提供している無料の実行環境(Apps Script)をその通訳役に使います。
AIへの頼み方はこんな感じでした。
フォームで見積もり計算が終わったときに、入力した寸法・枚数・金額の合計をGoogleスプレッドシートに自動で書き込みたい。
- ボタンを押したらスプシに1行追加されるようにして
- 書き込み先のシート名は「見積もり」にして
- どのカラムに何を入れるかは別途指定する
- 見積もりが実行された日時もわかるようにして(Z列にYYYY/MM/DD HH:MM形式で)
これだけです。コードは自分では書いていません。AIが作ってくれたものを貼り、動かして、ズレた所を直す、というやり方でした。
実際にハマったこと
動かしてみると、すんなりはいきませんでした。3回くらい詰まりました。
最初のエラー:JSONPじゃないとだめか
フォームからデータを送る部分で、エラーが出ました。ブラウザのセキュリティの都合で、フォームのあるページと受け取り側のURLが別ドメインになっているとそのまま通らないことがあります。送り方を少し変えてもらって通るようになりました。エラー文だけ読んでいると何のことか分からない系の詰まりです。
「送信されました」と出るのにスプシに入らない
これは原因がシンプルで、URLが間違っていました。GASをウェブアプリとして公開したときのURLを古いものを使っていて、正しいURLに差し替えたらあっさり動きました。自分で「すまん、URLまちがっていただけだ」と気づいたやつです。エラーが出ないのに保存されない、という状況はだいたいここを疑います。
シートが見つからないと言われる
スプレッドシートに書き込む先のシートを「見積もり」という名前にしていたのですが、コードの初期値では別の名前を参照していました。シート名を明示的に指定していなかったことが原因で、シートが見つからず書き込みが静かに失敗していました。エラーログに「Sheet not found」と出て気づきました。
この3つを直したら、フォームに入力して計算ボタンを押すとスプレッドシートに1行追加される、という流れが動き始めました。
気をつけたい点
一つ、運用前に確認しておいてよかったことがあります。入力欄を空白のまま計算した場合の処理です。最初は空白を空白のまま渡していたので、スプレッドシート側で数値として扱えなくなる場面がありました。入力がなかった欄には「0」を入れるように修正して安定しました。
あとは日時の記録。見積もり日時がスプレッドシートに残ると、「あの見積もりいつのやつ?」がすぐ探せます。最初は要件に入っていなかったのですが、途中で追加しました。Z列に YYYY/MM/DD HH:MM の形式で入れています。これがあるとあとで見返すときに助かります。
必要なもの
この仕組みを動かすのに要るのは、だいたい3つです。
- フォームのあるウェブページ(HTML。どこにあっても大丈夫)
- Googleスプレッドシート(記録先)
- GAS(Googleの無料で動く処理環境。通訳役)
特別なサービス契約は不要です。Googleアカウントがあれば使えます。
ただし、GASで作った受け口のURLは「公開設定」にしておかないとフォームから届きません。「全員がアクセスできる」にする設定が必要で、ここを間違えるとエラーになります。初めて使う方が詰まりやすい箇所の一つです。
どんなフォームに使えるか
今回は見積もりフォームでしたが、同じ考え方で対応できる場面はほかにもあります。
問い合わせフォーム(名前・メール・内容)の内容をそのままスプレッドシートに記録する、という使い方は一番シンプルです。WordPressで作ったサイトのContact Form 7などからでも、送信後の処理を足せば同じことができます。
「フォームに入れた内容がメールにしか来ない」という状況で、スプレッドシートにも並行して溜めたい、というケースは多いです。メールはメールで来るのに、一覧で見たい・集計したい・担当を振りたい、となると結局手で転記することになる。そこを省けます。
フォームがすでに動いているなら、受け取り処理を追加するだけです。フォーム自体を作り直す必要はありません。
