エグウェブ.JP@福岡/WEBセミナー・分析・WEBサイト制作

福岡でWEB分析・ホームページ・WEBサイト作成・WordPress、Googleアナリティクス、LINEスタンプ、Photshop・illustrator、Excelの講座やセミナーを開催

【GAS】Googleフォームを利用して独自お問い合わせフォームのデータを送信する方法

time 2019/10/15

お問い合わせフォーム作成

通常、お問い合わせフォームを作成しようとする場合は

1.サーバーを立てる
2.PHPでお問い合わせフォームを組む

という感じになるかと思います。

それをGoogleフォームをハブにして、お問い合わせフォームを作るという方法です。

Googleフォーム作成

まずは、受け皿となるGoogleフォームを作ります。

そして、全く同じ項目のWEBお問い合わせフォームを準備します。

フォームaction

フォームのactionにGoogleフォームのURL
action=”https://docs.google.com/forms/d/e/XXXXXXXXXXXXXXXXXXXXXXXXXXXX(フォームID)/formResponse”
を入れてあげます。

name=XXXXXXXXXXXXXXXXXXX
のところには、各フォームのname=”entry.XXXXXXXXXXXX”と一致させます。
このXXXXXXX部分は実際のGoogleフォームのソースコードを見ると収集することができます。

※※※ 値が入っていないので実際にメールは送信されません ※※※

このままですと、「送信を押した瞬間に、ページが遷移してGoogleフォームの送信完了画面に移動」します。

※※※ 値が入っていないので実際にメールは送信されません ※※※

送信ボタンを押した時には、画面は遷移せずに、同じページ上に「送信ありがとうございました」と表示させたいと思います。

dummyIframe

submit(送信)があったタイミングで、target=”dummyIframe” 、onSubmit=”showThxMessage();”とします。

送信のタイミングで、formWrapperをdisplay:none、thxMessageの部分をdisplay:blockに変えてあげます。

これで、送信ボタンを押した時は、画面が遷移せずに、フォームがあった場所に「お問い合わせありがとうございました」という画面が表示されます。

このWEBフォームからGoogleフォームへデータを送信する、という方法を使うと、GoogleフォームやGoogleスプレッドシートに自動でデータを収集することができて便利です。

さらに、GASを組み込めば、メールアドレスの相手に自動返信メールをお送りしたり、その他にも様々なシーンで使うことが出来るようになるかと思います。

わざわざWEBサーバーとPHPを準備しなくても良い、という点もGoodなところですね!!

かなり便利な方法ですので、ぜひお試し下さい!
\(^o^)/

download

プロフィール

EGUWEB

EGUWEB

【皆さまの人生に最良のファーストステップを】WEBサイトを作りたい!WEB分析を学びたいけど分からない。とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります。 [詳細]

カテゴリー