06.02. 参加申し込みフォームについて - plasma-fusion-youth-forum/pfyss GitHub Wiki
ここでは参加申し込みフォームを作成してホームページに埋め込むまでの手順を説明します。 参加申し込みフォームはGoogleフォームで作成されています。GoogleフォームはFormfacadeというアドオンで装飾された後、ホームページに埋め込まれます。フォームの回答はGoogleスプレッドシート(以下スプシ)に集約されるようになっています。スプシにはプログラムが設定されており、新規回答が送られてくると自動で参加者に受付完了などのメールを送信します。
1. Googleフォームとスプシのリンクを切り、今年度の設問を設定する
- 若手フォーラムのGoogleアカウントでドライブを開き、「夏学 参加申し込みフォーム」(Googleフォーム)を開く
- 回答タブ内の「︙」(縦三点リーダー)をクリック→「フォームのリンクを解除」
- 回答タブ内の「︙」(縦三点リーダー)をクリック→「すべての回答を削除」 ※去年までの回答は例のスプシに記録されているため、Googleフォーム内の回答を削除しても問題ありません。
- 設問を今年度の夏学の内容に合わせて適宜変更
- 「スプレッドシートにリンク」→「既存のスプレッドシートを選択」→「夏学 参加申し込みフォーム(回答)」(Googleスプシ)を選択→回答先のシート名を「20✗✗」(今年の西暦)に変更 ※これで新規回答が新しいシート「20✗✗」に集められるようになります。
2. 自動返信メールの内容をスプシにて設定
- 「夏学 参加申し込みフォーム(回答)」(スプシ)を開く
- 拡張機能→Apps Script→「回答数に基づき自動返信.gs」を開く
- その年の申込数上限、第何回目の夏の学校か、参加費はいくらかなど定数を設定する
- 1.の5.で作成した、参加申し込みフォームの回答先のシートのIDを取得し、入力する
- 各設問の応えを格納する変数を宣言する
- 各メールのタイトルと内容を設定する
- 左のメニューから「トリガー」を選択
- 「トリガーを追加」→関数は「回答数に基づき自動返信.gs」で定義されている「autoReplyBasedOnCount」、イベントのソースは「スプレッドシートから」、イベントの種類は「フォーム送信時」とし、保存 ※トリガーを保存すると、次回のフォーム送信時から自動返信などが行われるようになります。フォームが送信されない期間が続くと、エラーが起こるため、参加申し込み期間が終了したらトリガーを削除するとよいです。
3. 作成した参加申し込みフォームをFormfacadeで装飾し、ホームページに埋め込む
- 「夏学 参加申し込みフォーム」(Googleフォーム)を開く
- 一番右上の「︙」(縦三点リーダー)をクリック→「アドオンを取得」→「Formfacade - Embed in website」を検索し、インストール→アドオンからFormfacadeを選択→「Embed in a webpage」→「Embed in my site with Bootstrap CSS」を選択し、「Next」→出てきたコードの中で、src="URL"があるので、URLだけをコピー
- VScodeで
/pfyss/layouts/_default/application.html
を開き、60行目付近のsrc="URL"のURL部分にコピーしたURLをペーストし、保存する ※申し込みフォームは_index.md
の夏学の参加申し込み概要のstartline
(参加申し込み開始日)から公開されます。
注意事項
- 2.の7.まで終えた後で設問を入れ替え・削除・追加したとき、スプシのプログラムもそれに合わせて変更すれば対応できると思われるのですが、実はできません。一度、フォームとスプシのリンクを切って、シートを削除し、再び新しいシートにリンクさせた後にプログラムを変更する必要があります。
- Formfacadeで装飾されたフォームのレスポンス上限は月100件です。上限を超えてしまいそうであれば、通常のGoogleフォームの埋め込みリンクを作成し、それを3.の3.のURLに挿入しましょう。
- いたずらで参加申し込みが送られてくるときがあります。名前がおかしかったり、メールアドレスのドメインが不審だったり明らかにスパムだと分かる回答はスプシの行ごと削除しましょう。
- 回答が集約されたスプシの、回答よりも下の行に何かをメモしたり、入力したりするとそれをスプシのプログラムが回答だと勘違いして誤作動するため気をつけましょう。 もし誤作動して、参加申し込みが上限に達していないのに新規申し込み者に「キャンセル待ち」メールなどが送られてしまったら、回答よりも下の行を全て削除して新たに1000行追加するなどしましょう。