学生インターンシップです！
スパイラル株式会社の学生インターンとして、SPIRALを学習しながらユーザー目線で質問に答える活動をしています。
補足情報や調査結果を提供を行い、皆様のお役立てができればと思っています！
※学生による調査・補足情報です、参考としてご利用ください。
正式な仕様や最終的な内容は保証されません。
はじめに
本記事では、SPIRAL ver.1で作成したフォームに、Googleカレンダーを埋め込んでスケジュールを分かりやすく表示する手順をまとめています。
「フォーム上で日程を見せたい」「参加者に最新の予定を案内したい」という方にピッタリの内容です！
「フォーム上で日程を見せたい」「参加者に最新の予定を案内したい」という方にピッタリの内容です！
使用ツール
・SPIRAL ver.1
「イベント参加登録フォーム」を作成します。
・Googleカレンダー
イベントの開催スケジュールを記入しSPIRALで作成したフォームに埋め込みます。
「イベント参加登録フォーム」を作成します。
・Googleカレンダー
イベントの開催スケジュールを記入しSPIRALで作成したフォームに埋め込みます。
構築方法
①DBの作成
はじめにDBを作成します。
イベントの参加者の管理が目的なので「名前」、「メールアドレス」、「電話番号」、「参加したいイベント」、「参加希望日」フィールドを作成します。
「参加したいイベント」はセレクトフィールドを使用してください。
②フォームの作成
次にイベント参加登録フォームを作成します。
文字の色などのデザインを変更したい場合は入力ページのデザインを「ソースデザイン」に変更し、ソースコードを編集してください。
③Googleカレンダーの作成
次にGoogleカレンダーでイベントの開催スケジュールを作成します。
Googleカレンダーにログインし、新しいカレンダーを作成します。
カレンダーを作成したらイベントの予定を記入していきます。
イベントごとに色分けすると見やすくなります。
記入が終わったら歯車アイコンをクリックし、「設定」をクリックします。
「マイカレンダーの設定」タブ内にある先ほど作成したカレンダーをクリックし、下にスクロールすると下の画像のような項目が出てきます。
④カレンダーをフォームに埋め込む
この「埋め込みコード」を先ほど作成したフォームに挿入します。
「カスタマイズ」をクリックすると表示する項目を変更することができます。
フォームの入力ページ設定に移り、デザインをソースデザインに変更します。
そしてHTMLに埋め込みコードを挿入してください。
これで設定は完了です。
プレビュー画面は下の画像になります。
はじめにDBを作成します。
イベントの参加者の管理が目的なので「名前」、「メールアドレス」、「電話番号」、「参加したいイベント」、「参加希望日」フィールドを作成します。
「参加したいイベント」はセレクトフィールドを使用してください。
次にイベント参加登録フォームを作成します。
文字の色などのデザインを変更したい場合は入力ページのデザインを「ソースデザイン」に変更し、ソースコードを編集してください。
次にGoogleカレンダーでイベントの開催スケジュールを作成します。
Googleカレンダーにログインし、新しいカレンダーを作成します。
カレンダーを作成したらイベントの予定を記入していきます。
イベントごとに色分けすると見やすくなります。
「マイカレンダーの設定」タブ内にある先ほど作成したカレンダーをクリックし、下にスクロールすると下の画像のような項目が出てきます。
この「埋め込みコード」を先ほど作成したフォームに挿入します。
「カスタマイズ」をクリックすると表示する項目を変更することができます。
フォームの入力ページ設定に移り、デザインをソースデザインに変更します。
そしてHTMLに埋め込みコードを挿入してください。
プレビュー画面は下の画像になります。
まとめ
本記事では、SPIRAL ver.1で作成したフォームにGoogleカレンダーを埋め込んで表示する手順を紹介しました。
埋め込みコードを取得して入力ページに挿入するだけで反映できるため、簡単に設定できます！
表示項目はカレンダー側の「カスタマイズ」から調整できるので、用途に合わせて見やすい形に整えてみてください。
この記事が皆様のお役に立てば幸いです！
埋め込みコードを取得して入力ページに挿入するだけで反映できるため、簡単に設定できます！
表示項目はカレンダー側の「カスタマイズ」から調整できるので、用途に合わせて見やすい形に整えてみてください。
この記事が皆様のお役に立てば幸いです！
