第4回：gusuku Everysiteでイベント申込みサイトを作る話

こんにちは！あかねです！
gusuku Everysiteのプレビュー版を使って、イベント申込みサイトを作る話、第4回です。

前回はイベント詳細ページを作りました。
今回はイベントへ申し込みを行うためのページ「申込みフォーム」を作っていきます。

この申込みフォームは、申し込まれたらkintoneにレコードを追加する、という動きをします。ただ、今回ですべてをご紹介すると、とても長くなってしまうので、今日はページ作成にとどまり、kintoneへのレコード追加操作は次回ご紹介します。

ということで、今日は第2回・第3回の情報をふんだんに使っていく、おさらい会となります。
（でも新しくデータ入力アイテムを使うよ！）

それでは、やっていきましょう！

　第1回：構成編 >> リンク
　第2回：トップページ編 >> リンク
　第3回：イベント詳細ページ編 >> リンク

構成とkintoneアプリのおさらい

イベント申込サイトは、エブリサイトで作成する4つのページと、2つのkintoneアプリで構成をしていきます。

イベント管理アプリ｜kintone

今回は、申し込んでくれた方の情報を表示するために、関連レコードフィールドを2つ設置しました！
参照先は次にご紹介する「参加者管理アプリ」です。
※実は「イベントタイトル」フィールドのフィールド名、フィールドコードを変更しました。もとは「セミナータイトル」でした。全然セミナーじゃないのに…

参加者管理アプリ｜kintone

今回新しく登場したアプリです。申込みフォームを送信したら、このアプリにレコードとして追加されます。

実際に作成する申込みフォームのイメージ

今回作るのはこんな感じのページ。
ボタンを押したらページ内の表示が切り替わったり、ダイアログが出るように設定していきます。

掲載している内容

• ヘッダー
  • マイページボタン
• メインコンテンツ
  • 上部
    • キービジュアル
    • 開催概要
  • 下部
    • 申込みフォーム
    • イベント詳細ページに戻るリンク

申込みフォームを作成する

まずは、画面デザインタブで設定するタイルの全容を確認しましょう。今回も実際の画面と比べ易いように横に並べています。

いつも通り、左右の余白幅は自動バランス設定、中央のコンテンツは幅1,000pxで統一です。（第2回該当内容はこちら）

今回はボタンの表示非表示を切り替えていますが、この画像では、すべてのボタンを表示しています。

ちなみにみなさん、エブリサイトのアップデート情報はキャッチしていただいていますでしょうか？
先日「空白パネル」ウィジェットなるものが登場しました！エブリサイト上でスペースを確保するときに使用できるウィジェットです。
これまでは、シンプルパネルウィジェットに、何の設定もしないテキストアイテムを設置して調整していたスペースですが、新しい空白パネルを使うことで、テキストアイテムを設置する手間が省けます！ウレシイ！

それではこれから、主な設定をピックアップしていきます！

申し込みをするイベントを特定する

今回作成する申込フォームは単独ページです。イベントごとにURL展開をしてもいいかな～と最初は思ったのですが、単独ページにして、必要に応じて表示内容を切り替える運用にしていきます。

申込みページに遷移するリンクへ#ハッシュをつける

申し込みをさせたいイベントは、URLの#ハッシュ機能で特定をしていきます。
この#ハッシュは、イベントページ→イベント詳細ページへ遷移するときにも使いました。（第3回該当の内容はこちら）

イベント詳細ページから、この申込みページへ遷移するためのボタンのリンク先URLを修正していきます。
この申込みページのリンクは「https://～～～.everysite.net/everysite-mokumoku-form.html」です。このリンクの最後に「#YYYY-MM-DD」の形式でイベントの開催日を付けたリンクにします。

もともと、イベント詳細ページはURL展開機能でkintoneのレコードをもとに作成されたページのため、#${開催日}と追記すれば該当イベントの開催日が自動的に入力されます。(URL展開機能についてはこちら)

#ハッシュからイベント情報を特定する

「もくもく会に申し込む」ボタンを押下して遷移してきたら、#ハッシュの値をもとに該当イベントのkintoneレコードを取得します。
この時、処理に少し時間がかかる場合があるのでアクション番号1で「処理中表示を行う」を設定しておきます。

開催概要の内容を該当イベントの内容に切り替える

前回、定員情報を表示した方法と同じ方法で、開催情報の内容を表示していきます。

ちなみに、${$3.開催日} の意味は、アクション番号3で取得してきたレコード内の「開催日フィールド」の内容を表示してね　です。

入力フォームを作成する

初めて文字入力ができるアイテムの登場です！

まず、使用しているウィジェットは「垂直2列フォーム」ウィジェットです。このフォームカテゴリにあるウィジェットは、1つのタイルで複数のアイテムを配置したいときに有用なウィジェットです。

縦にアイテムを並べられるウィジェットは、ほかに「シンプル縦フォーム」ウィジェットもあります。どんな違いがあるか見てみましょう。今回作るフォームように、データ入力アイテムを複数設定して比べてみました。

ご覧の通り、項目名となる「アイテム名」が、入力枠の左にあるのか、上にあるのか、の違いがありました。幅に余裕のある設置個所には「垂直2列フォーム」、スマホ表示や設置個所に幅を持てないときは「シンプル縦フォーム」がよさそうな感じです！

ということで、今回は「垂直2列フォーム」ウィジェットに、データ入力アイテムを設置し、申込みフォームを作成しました。

初期表示しないボタンを非表示にする

さて、今回フォーム下に3つのボタンを用意しました。このうち、2・3番目のボタンは1番目のボタンを押下したときに出現させたいので、最初は非表示にしておきます。（ちなみにこの3つのボタンは、「シンプル縦フォーム」ウィジェットで設定しています。）

#ハッシュからレコードを特定てから非表示設定までで、ひとまずページを開いた時に行う初期設定は終了です。「処理中表示を終了する」でグルグル表示を終了させておきましょう。

入力画面⇔確認画面を切り替える

次に、確認／修正ボタンを押したときの表示切替を設定していきます。

確認画面ではデータ入力アイテムを無効化する方法ではなく、テキストアイテムに入力内容を表示させてデータ入力アイテムは非表示にする、とかの方が絶対に見栄えはいいのですが、今回は省エネ設定にさせていただきます(笑)

あともう少しで申込みページが完成です！

ここまでできれば、ほぼほぼデザインは完成です。
次回は9月17日！申込み → kintoneへレコード追加 → 予約人数の集計 の流れをご紹介します。

gusuku Everysite まだ試してないんだよな～というそこのあなた！プレビュー版登録、ぜひお待ちしています！

投稿者プロフィール

akane

サイボウズのパートナーさん担当です！
gusuku Customine大好きで転職しました！

最新の投稿

この投稿者のすべての記事

• gusuku2025年8月27日第4回：gusuku Everysiteでイベント申込みサイトを作る話
• gusuku2025年8月1日第3回：gusuku Everysiteでイベント申込みサイトを作る話
• gusuku2025年7月2日第2回：gusuku Everysiteでイベント申込みサイトを作る話
• gusuku2025年6月13日第1回：gusuku Everysiteでイベント申込みサイトを作る話