一時保存して後から編集できる！エブリサイトでセミナー申込サイトを作ってみた

公開日：

注意

本記事は情報提供を目的としており、本記事の内容は無保証、サポートの対象外です。
サポート窓口、問合せ窓口にご質問をいただいても対応いたしかねますのでご了承ください。

こんにちは、カスタマーリレーションチームのおおのです。

さっそくですが、日頃Webフォームから申し込みをしている途中で、
「この項目、今すぐには分からないな……」となった経験はありませんか？

そんなとき、分かっている情報だけでいったん申し込みを進め、必要な情報が揃ったら後から続きを入力できれば便利ですよね。 
申込者にとって使いやすくなるのはもちろん、サイトを運営する側にとってもメリットがあります。
「必要な情報を確認してから、後で申し込もう」とフォームを離れてしまうと、そのまま申し込みを忘れられてしまうかもしれないからです。

そこで今回は、参加者情報が揃っていなくても申し込みを開始でき、マイページから情報を追加・編集して本確定できるセミナー申込サイトを、gusuku Everysite（以下、エブリサイト）で作ってみました。

一時保存から本確定までの申込状態を管理するほか、1申込あたりの参加人数上限もチェックできるようにしています。

目次

今回想定したセミナー申込業務

今回作るのは、複数名分の参加者情報をまとめて登録できる法人向けセミナー申込サイトです。
サイトを利用するには、まずアカウント登録を行います。
登録後にマイページへサインインすると、セミナーへの申し込みや、自分の申込内容の確認・編集ができるようになります。 

申し込みの流れ

  1. アカウント登録（初回）
  2. マイページにサインイン
  3. セミナーを申し込む
  4. マイページから参加者情報を追加・編集
  5. 必要に応じて入力内容を一時保存
  6. 必要な情報が揃ったら申し込みを本確定


今回はこの中でも、参加者情報が揃っていなくても申し込みを開始し、マイページから情報を追加して本確定できる流れを中心にご紹介します。

今回のkintoneアプリ構成

今回のサイトでは、「ユーザー情報」「セミナー情報」「申込情報」をkintoneで管理します。 
用意したのは、次の3つのアプリです。 

ユーザー管理アプリ

マイページを利用するユーザーの情報を管理します。サイト上でアカウント登録が行われると、レコードが追加されます。  

セミナー情報管理アプリ

開催するセミナーの情報を管理します。 kintone上で事前にレコードを作成しておきます。

セミナー申込管理アプリ

誰がどのセミナーに申し込んだのか、申込内容を管理します。 サイトから申し込みがあるとレコードが追加されます。
マイページ上で参加者情報等が更新されると、レコードの内容も更新されます。

サイトから登録・更新された情報はこれらのkintoneアプリで管理し、運営担当者はkintoneで申込状況を確認します。 

特に今回のポイントになるのが、セミナー申込管理アプリの「提出状況」フィールドです。
入力・調整中の申し込みと正式に確定した申し込みを区別するため、

  • 申請中（未申請項目あり）
  • 確定

の状態を持たせています。初期値は「申請中（未申請項目あり）」としています。

このフィールドは、後ほどご紹介するエブリサイト側の表示・操作の切り替えにも使用します。

まずはアカウント登録

それでは、サイトを見ていきます。
マイページから自分の申込情報を確認・編集できるよう、初回利用時にはアカウント登録を行います。
メールアドレスを入力し、アカウント登録がない場合は会社情報などを入力します。

登録したユーザー情報は、ユーザー管理アプリに登録されます。
その後、登録したメールアドレスに届くワンタイムパスワードを入力して認証します。
認証が完了すると、マイページを利用できるようになります。 

サインイン後の画面（マイページ）です。ユーザーと申込情報を紐づけることで、マイページにはそのユーザー自身の申込情報を表示します。

マイページの作成方法については、以下のページで詳しくご説明していますので、あわせてご覧ください。
▼エブリサイトで実現するログイン処理・ログインに伴って使えるようになる接続設定(認証が必要／ユ－ザー指定なしorあり)の例

参加者が未確定でもセミナーを申し込めるようにする 

ここで今回のポイントです。
申し込みの時点で、参加者全員の情報が揃っている必要はありません。
セミナーの申し込みを行うと、セミナー申込管理アプリにレコードとして登録されます。この時点では、提出状況は「申請中（未申請項目あり）」として管理されます。 


これによって、まずセミナーの申し込みをして、参加者情報は後から登録するという流れにできます。

「一時保存」はどうやって実現している？

今回は、最初にセミナーを申し込んだ時点で、セミナー申込管理アプリに申込レコードを登録します。
このとき、アプリの「提出状況」は初期値の「申請中（未申請項目あり）」となります。
その後、マイページではこの申込レコードを呼び出し、参加者情報を追加・更新できるようにしています。
申込情報をkintoneに保存し、その内容をマイページから再編集できるようにすることで「一時保存」を実現しています。 

マイページから申込内容を確認・編集する

一時保存した申し込みはマイページの「申請中セミナー一覧」に表示され、参加者が決まったタイミングで続きを入力できます。 

参加者はセミナーごとの「お申込み詳細」ページで登録します。

一度登録した参加者情報に変更があった場合も、本確定前であれば何度でもマイページから更新（保存）できます。 

従来、変更内容をメールで受け付けて運営担当者がkintoneへ反映していたとすると、その作業を申込者自身で完結できるようになります。
これは申込者の使いやすさだけでなく、運営側のメール確認や転記作業を減らすことにもつながります。

必要な情報が揃ったら申し込みを本確定する 

必要な情報が揃ったら、申込者が申し込みを本確定します。

本確定すると、kintone側の提出状況も「確定」に更新されます。

これによって運営担当者は、kintone上で、

  • まだ参加者情報を入力・調整している申し込み
  • 正式に確定した申し込み

を区別して確認できます。

1申込あたりの参加人数上限もチェックする

もうひとつ、今回のセミナー申込サイトに設定したのが、参加人数の上限チェックです。 
例えば「1回の申し込みにつき5名まで」というルールがある場合、6名以上を登録しようとするとエラーを表示します。 

今回は、参加者情報に登録されている人数をチェックし、1申込あたり5名を超えた場合はエラーを表示して、本確定できないようにしています。 

申し込み後に運営担当者が確認して、「参加人数の上限を超えているので修正してください」と連絡するよりも、入力している段階で申込者自身に気付いてもらった方がスムーズです。

では、本確定時の処理をエブリサイトでどのように設定しているのか見ていきます。

「お申込み詳細」ページのURLの「#」の後ろには、表示しているセミナーの、セミナー申込管理アプリのレコード番号を表示するよう、先行のアクションで設定しています。以下のページで詳しくご説明していますので、あわせてご覧ください。
▼【ページ内処理】一覧画面から詳細画面へ遷移するページの作り方

編集テーブルウィジェット（参加者情報を入力するウィジェット）の内容を取得します。

参加人数の計算の際に空の行がカウントされないよう、値の入っている行を絞り込みます。

参加人数が上限（この場合は5名）以内の場合、申し込みを確定します。 提出状況フィールドを「確定」に更新します。

上限を超過している場合は、エラーダイアログを表示します。

申込状態に応じて、マイページの操作を切り替える 

本確定するまでは、申込者がマイページから参加者情報を追加・編集できます。 一方、セミナー申込管理アプリの「提出状況」が「確定」になった場合は、マイページから編集できないようにしています。 

また、編集可否だけでなく、「提出状況」に応じて説明文や表示するボタンも切り替えています。 「マイページから申込内容を確認・編集する」の章の画面と比較すると、違いが分かりやすいと思います。 

まとめ

今回は、1回の申し込みで複数名を登録できるセミナー申込サイトを、エブリサイトで作ってみました。
サイト上では、アカウント登録 → セミナー申込 → 一時保存 → マイページから編集 → 本確定 → 内容確認　までを行えるようにしています。

今回特に意識したのは、申込者がその場ですべての情報を揃えられなくても、申し込みを進められるようにすることです。
「参加者を確認してから、後で申し込もう」とフォームを離れてしまう場面を減らし、申込者にとって使いやすいサイトを目指しました。 
また、マイページから申込者自身で内容を更新できるため、運営側がメールで変更を受け付け、kintoneへ転記するといった作業も減らせます。

エブリサイトは、kintoneにデータを登録するためのフォームを作るだけではありません。
その後の確認や変更対応まで仕組みにすることで、申込者の使いやすさを高めながら、運営側の業務改善にもつなげることができます。

今回ご紹介した内容が、エブリサイトを活用したサイトづくりのご参考になれば幸いです！

なお、今回作成したサイトは、実際に触っていただけるよう現在準備中です！
「活用の泉」では、このほかにもエブリサイトのさまざまな活用例をご紹介しています。「こんな使い方もできそう！」というアイデア探しに、ぜひ訪れてみてください。 

社外もチームだ！
エブリサイトで社外DXを！

gusuku Everysite（グスク エブリサイト）は、kintoneをはじめとした複数のサービスと連携し、そのデータを自由なレイアウト・挙動でWebサイトとして入出力できるフロントエンド開発サービスです。

gusuku Everysiteをチェック

投稿者プロフィール

大野あずさ
大野あずさ
カスタマーリレーションチームで活動しています！

関連投稿:

「recordsでWebhook通知」を検知してみよう！ デプロイット実践編６「関連レコードとルックアップの配布　相互参照編」 kintoneと、カスタマインと、デプロイット