【SPIRAL WebTools】フォームにGoogleカレンダーを埋め込む方法

学生インターンシップです！
スパイラル株式会社の学生インターンとして、SPIRALを学習しながらユーザー目線で質問に答える活動をしています。
補足情報や調査結果を提供を行い、皆様のお役立てができればと思っています！
※学生による調査・補足情報です、参考としてご利用ください。
　正式な仕様や最終的な内容は保証されません。

はじめに

本記事では、SPIRAL WebToolsで作成したフォームに、Googleカレンダーを埋め込んでスケジュールを分かりやすく表示する手順をまとめています。
フォーム上に開催日程が表示されることで、ユーザーがスケジュールを確認しやすくなります。

使用ツール

・SPIRAL WebTools
「イベント参加登録フォーム」を作成します。

・Googleカレンダー
イベントの開催スケジュールを記入しSPIRALで作成したフォームに埋め込みます。

構築方法

①DBの作成
はじめにDBを作成します。
イベントの参加者の管理が目的なので「名前」、「メールアドレス」、「電話番号」、「参加したいイベント」、「参加希望日」フィールドを作成します。
「参加したいイベント」はセレクトフィールド、「参加希望日」には月日フィールドを使用してください。

②フォームの作成
次にイベント参加登録フォームを作成します。
まず登録フォームブロックを作成します。
この時設定方法を「ソース設定」にしてください。
登録フォームブロックが作成できたらページを作成します。
ページの設定方法は「ビジュアル設定」のままで大丈夫です。

③Googleカレンダーの作成
次にGoogleカレンダーでイベントの開催スケジュールを作成します。
Googleカレンダーにログインし、新しいカレンダーを作成します。
カレンダーを作成したらイベントの予定を記入していきます。
イベントごとに色分けすると見やすくなります。

記入が終わったら歯車アイコンをクリックし、「設定」をクリックします。
「マイカレンダーの設定」タブ内にある先ほど作成したカレンダーをクリックし、下にスクロールすると下の画像のような項目が出てきます。
この「埋め込みコード」をコピーしてください。
※「カスタマイズ」をクリックすると表示する項目を変更することができます。