どうも、カメ助(@kamesuke_blog)です。
Webアプリを作成しているときにこんな疑問ってありませんか？
カメ助問い合わせフォームってどうやって実装すればいいのかな。。
今回、Webアプリの問い合わせフォームをGoogleフォームで作成したので、作成方法を共有します。
カメ助この記事はこんな人にオススメ
・Webアプリの問い合わせフォームの実現方法を知りたい
・Googleフォームの使い方を知りたい
Webアプリの問い合わせフォームを作成する方の参考になあれば幸いです。
問い合わせフォームの概要
今回作成する問い合わせフォームの概要は以下の通りです。
- 問い合わせフォームは、Googleフォームで作成する
- Webアプリから問い合わせフォームへ画面遷移する
- 問い合わせ送信後は、「問い合わせ者」と「Webアプリの管理者(カメ助)」へメール送信を行う
問い合わせフォームの作成
Googleフォームの作成手順は以下の通りです。
- Googleにログインし、メニューからGoogleFormsを選択
- 空白のフォームを新規作成し、必要な項目を入力
- メール送信設定を行う
- 質問内容を記録するためのSpreadsheetの設定を行う
- GoogleフォームのＵＲＬを取得する
順番に見ていきましょう。
1：Googleにログインし、メニューから【Forms】を選択
まず、Googleにログインし、メニューからFormsを選択します。
カメ助Formsはメニューの下の方にあるので、下にスクロールしてください
2：空白のフォームを新規作成し、必要な項目を入力
新しいフォーム作成画面が表示されますので、空白を押して空のフォームを作成しましょう。
問い合わせフォームに必要な内容を設定していきます。
カメ助必ず入力が必要な項目は、必須入力の設定をしましょう！
3：メール送信設定を行う
続いて、メールの送信設定を行いましょう。設定タブに切り替えます。
回答項目の詳細を開き、以下のように変更。
- メールアドレスを収集するを「ON」に変更
- 回答のコピーを送信者に送信を「常に表示」に変更
カメ助質問者が質問内容を、返信メールで確認できるようにしています。
プレゼンテーション項目の詳細を開き、確認メッセージの内容を設定します。
カメ助問い合わせの回答に時間がかかる場合があることを、予め質問者に伝えておくために、設定しています。
4：質問内容を記録するためのSpreadsheetの設定を行う
質問内容を記録するために、質問内容を保存するSpreadsheetの設定を行います。回答タブに切り替えます。
その後、Spreadsheetのアイコンを押します。
以下のダイアログが表示されるので、作成を選択します。
GoogleドライブにSpreadsheetファイルが作成され、質問内容が記録されていきます。
カメ助Spreadsheetは、Googleフォームと同じ階層に作成されます。
5：GoogleフォームのＵＲＬを取得する
最後に、Webアプリに設定するGoogleフォームへのリンクを取得します。画面上部の送信ボタンを押します。
Googleフォームのリンクをコピーします。
Webアプリにコピーしたリンクを設定すれば、問い合わせフォーム実装は完了です。
最後に
今回は、GoogleフォームでWebアプリの問い合わせ機能を実装する方法を紹介しました。
Googleフォームを使うメリットは以下の通りです。
- GoogleアカウントがあればOK
- 様々なサービスを利用しなくてもよい
- 費用がかからない
- プログラミング不要(画面上の設定のみ)
Googleフォームは、メリットも多く非常に簡単にできますので、Webアプリを作成している方は一度検討してみてはいかがでしょうか。
最後までご覧いただきありがとうございました。
コメント