【SPIRAL®ver.1】複数イベント申込フォーム作成覚書

WEB / アプリ
WEB / アプリ
この記事は約9分で読めます。

とっちゃん@nyanco! です。

今回はSPIRAL®(スパイラル)バージョン1複数イベント申込フォーム作成時の自分用覚え書きです。

肉玉にゃんこ

今回は超個人的なメモとなりますにゃ〜
SPIRAL®バージョン1を使ってる人には参考になるかも?ですにゃ〜

SPIRAL®バージョン1とは?
株式会社パイプドビッツが運営する『顧客接点強化』と『業務効率化』に必要な業務アプリを構築・運用できるローコード開発プラットフォームです。
かなり色々なことができますが、本記事ではイベント・セミナーなどの申込みフォームについての内容となります。

スポンサーリンク

イベント想定

本記事では以下のようなイベントを想定しています。

  • 大イベント名:にゃんこフェス
    • 小イベント名:カリカリ探しゲーム(申込時間 10:00〜/11:00〜/12:00〜)
    • 小イベント名:肉球スタンプラリー(申込時間 10:30〜)
    • 小イベント名:またたびワークショップ(申込時間 11:00〜/13:00〜)
肉玉にゃんこ

大イベントという大きなくくりの中で開催される小イベントの申込みフォームを各申込時間帯ごとに作成していきますにゃ〜
カリカリ探しゲームなら申込時間が3つあるから3種類フォームを作成するという感じですにゃ〜

申込時間帯ごとにフォームを作成する理由は、各時間帯ごとに定員を設定したいがためです。サポートに確認しての結論がこの方法でした。
もっと良い方法があるよ!という方がもしいらっしゃったら是非コメントでご教授くださいませ〜

DB(データベース)の設定

まずはDB(データベース)の設定をしていきます。

DBは1つでOKですが、レコード数は小イベント × 申込時間数 の小イベントの数の合算分必要となります。

フィールド名:小イベント名

フィールドタイプ:【セレクト】

開催する数分、小イベントの名前を正式名称で登録しておきます。

こちらのフィールド内容はフォームサンクスメール登録通知メールで使用するのでそのイメージで!

肉玉にゃんこ

「固定表示」にするのでHTML表示形式は「プルダウン」のままでOKですにゃ〜

フィールド名:希望申込時間_小イベント略称

フィールドタイプ:【セレクト】

複数の申込時間帯がある場合、フォームを複製して小イベント毎に設定します。

申込時間帯が1つしかない場合でも便宜上設定しておくと、複数の申込時間帯がある小イベントと同等の扱いができるので設定推奨です。

フィールド名の小イベント名称は表には出ないので管理者が分かる範囲での略称でOK。

肉玉にゃんこ

こちらも「固定表示」にするのでHTML表示形式はそのままでOKですにゃ〜

①などの機種依存文字は文字化けするので、番号を振りたい場合は(1)などに置き換える。

他、以下のベーシックなフィールドは必要であれば追加しておきます。

  • 【登録日時】
  • 【ユーザーエージェント】 ※必要であれば
  • 【テキストフィールド(32 bytes)】名前
  • 【テキストフィールド(32 bytes)カナ】名前(フリガナ)
  • 【整数】年齢 ※必要であれば
  • 【電話番号】
  • 【メールアドレス(大・小文字無視)】
  • 【マルチセレクト】個人情報の取り扱いについて
  • 【マルチセレクト】メルマガ登録

フォームについて

続いてフォームの設定をしていきます。

基本的に小イベント毎 × 申込時間の数だけ作成していき、以下のような流れとなります。

  • 【0】大元になるフォームを作成
  • 【1】【0】で作成したフォームを複製して小イベント毎にフォームを作成
  • (申込時間が複数ある場合)【2】【1】で作成したフォームを複製して2箇所訂正する

【0】大元になるフォームを作成

まずは全ての小イベントの大元になるフォームを作成します。

以下、設定内容ごとに注意するポイントも含めて解説。

【名前】・【タイトル】

どちらも同名で良いかと(個人的判断です)。

肉玉にゃんこ

【タイトル】半角英数、ハイフン、アンダースコアと文字数制限が少ないので先に【タイトル】を設定して【名前】にコピペしますにゃ〜

イメージ的には以下のような法則です。

【大イベント正式名称】にゃんこフェス 【小イベント正式名称】カリカリ探しゲーム

【名前】・【タイトル】nyan-kari-1

枝番は複数申込時間があるフォーム用です。申込時間帯の数だけ枝番を増やしていきます。

使用フィールド

  • 小イベント名:特殊入力「固定値(hidden)」
  • 希望申込時間_小イベント略称:特殊入力「固定値(hidden)」 ※該当するフィールド以外は「使用しない」に設定

キモになるのが希望申込時間_小イベント略称です。

肉玉にゃんこ

このフィールドは小イベント毎のフォームを複製する度に上記設定をする必要がありますにゃ〜

フィールド別チェック

  • 小イベント名:「固定値」を該当する小イベント名に変更
  • 希望申込時間_小イベント略称:「項目タイトル」を希望申込時間などの任意のテキストに変更し、「固定値」を該当する申込時間帯を変更

他のフィールドは必須項目にするなり注意事項を入れるなり任意でOK!

締め切り

「(2) このページからの登録者数が以下の値を超えた場合に締め切る」に申込時間毎の定員数を設定します。

入力ページ

全体 > HTMLのタイトル

例:にゃんこフェス お申し込みフォーム

小イベントの名称にすると都度変更する必要があるので大イベント名称にしておく。

ヘッダ > 見出し

例:にゃんこフェス お申し込みフォーム

全体 > HTMLのタイトル」と同じで良いかと(個人的判断)。

ヘッダ > 見出しの補足説明、入力時の説明 etc

必要であれば任意で設定しておく。

フォーム > 項目の表示順

基本、DB作成時のフィールド順に並ぶので、必要であれば表示順を入れ替えておく。

フォーム > 入力必須文字のスタイル

デフォルトだと「*」で少しユーザビリティが低いので「【必須】」と明示するようにしています。

確認ページ

全体 > HTMLのタイトル

例:にゃんこフェス お申し込み内容のご確認

ヘッダ > 見出し

例:にゃんこフェス お申し込み内容のご確認

ヘッダ > 見出しの補足説明

例:お申込み内容をご確認いただき、問題なければ「送信」ボタンを押してください。

デフォルトだと何も表示なしなので決り文句でも入れておくのがベターかと。

サンキューページ

全体 > HTMLのタイトル

例:お申込みありがとうございました!

ヘッダ > 見出し

例:空白

こちら個人的判断ですが、見出しはない方が見た目スッキリなのでなしにしてます。

サンキューメッセージ

<p style="font-size:1.7em;">お申し込みいただきましてありがとうございました!</p>
入力内容を自動返信メールにて<br>ご入力頂きましたメールアドレスにお送りいたしましたのでご確認下さい。<br>
お問い合わせ、またはお申し込みのキャンセルは下記電話番号までご連絡下さい。<br>
にゃんこワールド<br>
<span style="font-size:1.4em;">電話番号:00-0000-0000</span>
<p><a href="https://xxxx.xxx">< にゃんこフェス 詳細ページに戻る</a></p>

HTMLが使えるので、上記のような感じである程度体裁を整えて出力しています。

締め切りページ

全体 > HTMLのタイトル

例:お申込みの受付を締め切りました

ヘッダ > 見出し

例:空白

こちらも個人的判断ですが、見出しはない方が見た目スッキリなのでなしにしてます。

締め切りメッセージ

<p style="border:1px red solid;padding:15px;color:red;line-height:1em;">大変申し訳ございません。<br>
こちらのイベントは参加定員に達したため、応募を締め切りました。</p>
<a href="https://xxxx.xxx">< にゃんこフェス 詳細ページに戻る</a>

HTMLが使えるので、上記のような感じである程度体裁を整えて出力しています。

サンクスメール

DB、リスト、封筒を設定していきます。

DB、リストは全ての小イベント共通で使えますが、封筒は小イベントの数だけ必要となります。

封筒を設定後、「追加」スタンバイ「OK」にチェックを忘れがちなので忘れずに!

登録通知メール

登録通知メール設定 > 通知メール使用

使用する ※忘れがちなので注意!

宛先設定 > TO

メールアドレスを設定 ※忘れがちなので注意!

メール設定 > 件名

例:にゃんこフェスにお申し込みがありました

メール設定 > ヘッダ

例:にゃんこフェスにお申し込みがありました。

メール設定 > 表示項目

小イベント名希望申込時間_小イベント略称は必須で入れて、他は任意で。

肉玉にゃんこ

個人的判断ですが、個人情報となるフィールドは避けてますにゃ〜

締め切り件数通知メール

必要であれば設定しておく。

「通知する」のチェックを忘れがちなので注意!

肉玉にゃんこ

以上で大元になるフォームは完成ですにゃ〜
なかなか面倒ですが、ここをしっかりやっておかないと複製してからだと二度手間三度手間になりますにゃ〜

【1】【0】を複製して小イベント毎にフォームを作成

あとは作成したフォームを小イベントごとに複製して作成していきます。

変更する箇所は以下の通り。

  • フォーム複製時に「名前」と「タイトル」

使用フィールド

希望申込時間_小イベント略称

  • 複製元のフィールドを「使用しない」に変更
  • 該当するフィールドを「特殊入力 固定値(hidden)」に変更

フィールド別チェック

  • 小イベント名:「固定値」を該当する小イベント名に変更
  • 希望申込時間_小イベント略称:「項目タイトル」を希望申込時間などの任意のテキストに変更し、「固定値」を該当する申込時間帯を変更

締め切り

必要であれば、「(2) このページからの登録者数が以下の値を超えた場合に締め切る」の件数を変更する。

肉玉にゃんこ

小イベント毎に定員が異なる場合は変更しますにゃ〜

入力ページ

必要であれば、「項目の表示順」「申込希望時間」を移動する。

サンクスメール

「封筒」の以下を変更して新規作成をします。

  • 封筒名 例:nyan-kari
  • メール本文内の「希望申込時間」[差替えキーワード] を該当する小イベントに変更
  • 「新規に作成」→「追加」→「スタンバイ:OK」を忘れずに!
肉玉にゃんこ

「希望申込時間」をメール本文内に記載する場合は、「封筒」を小イベントごとに作成しますにゃ〜

複製元のサンクスメール設定の削除も忘れずに!

(申込時間が複数ある場合)【2】【1】で作成したフォームを複製して2箇所訂正する

申込時間が複数ある小イベントの場合は【1】で作成したフォームを複製していきます。

まず、複製時に「名前」・「タイトル」の枝番を下記のように+1します。

nyan-kari-1 → nyan-kari-2

あとは以下の2箇所を訂正するのみでOKです!

フィールド別チェック

  • 希望申込時間_小イベント略称:「固定値」を該当する申込時間帯を変更

サンクスメール

  • フォームを複製するとスタンバイがなぜか「STOP」になるので「OK」にする

おわりに

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント

タイトルとURLをコピーしました