「フォーム管理」は、エンドユーザーが使用する予約フォームや、エンドユーザーに発行する帳票（明細書）の管理が出来ます。
通常は、運用開始前と、運用開始後、「オプション」が増えたり、無くなったり、表示する情報や文言を変更したい場合に利用します。
フォーム設定一覧
「フォーム設定一覧」は、登録されているフォーム設定の管理（閲覧、編集）をする画面です。
フォーム設定の結果表示
現在登録されているフォーム設定が表示されます。
- 予約情報入力：エンドユーザーが、利用開始日や利用時間、オプションなどを選択する事が出来、料金が表示される画面です。
- 顧客情報入力：エンドユーザーが、名前や住所、電話番号など、顧客情報を入力する画面です。
- 予約確認：予約情報、顧客情報、料金などを確認する画面です。
- 予約完了：予約完了後に表示される完了画面（サンクスページ）です。
- 明細書出力：エンドユーザー向けに明細書を発行するページです。
フォーム設定編集
「フォーム設定編集」は、フォーム設定を編集する画面です。
「必須」のマークが付いている項目は、必須項目の為、漏れなく入力してください。
フォーム名
フォームの管理名称です。予約システム内でこの名前が使用されます。
スラッグ
フォームを管理する為のIDです。
フォームコード
フォームのデザインやレイアウトなどがHTMLベースで記述されています。
原則、HTMLが分からない方は、必要な個所以外触らない事をおすすめします。
フォームコードの詳細は、フォームコード編集をご覧ください。
備考
管理者用のメモや覚書の為の欄です。
フォームコード編集
オプションの反映
オプションを新しく登録した場合や、削除したい場合は、「予約情報入力」のフォームコードを編集します。
①オプションのフィールド名を覚えておきます。
②フォーム管理のフォーム設定一覧から「予約情報入力」編集画面を開きます。
③フォームコード内の「↓↓オプション登録ここから↓↓」のエリアを探します。
④以下のコードが、オプション表示の定型コードです。
<div class="col-md-6 mb-3" data-option="coleman_chair">
<label for="coleman_chair" class="form-label">coleman チェアー</label>
[input coleman_chair]
</div>
<label for="coleman_chair" class="form-label">coleman チェアー</label>
[input coleman_chair]
</div>
⑤定型コードをコピーして、「青色文字」の部分を、「①」で覚えて置いた、フィールド名に変更しいます。また、「オレンジ色文字」の部分を、任意の名称に変更します。
<div class="col-md-6 mb-3" data-option="フィールド名">
<label for="フィールド名" class="form-label">任意の文字列</label>
[input フィールド名]
</div>
<label for="フィールド名" class="form-label">任意の文字列</label>
[input フィールド名]
</div>
⑥「⑤」で作成したコードをフォームコード内の任意の場所に貼り付けます。
貼り付ける際、他のオプションコードの体裁を崩さない様に貼り付けます。
貼り付ける際、他のオプションコードの体裁を崩さない様に貼り付けます。
<div class="col-md-6 mb-3" data-option="coleman_chair">
<label for="coleman_chair" class="form-label">coleman チェアー</label>
[input coleman_chair]
</div>
<div class="col-md-6 mb-3" data-option="フィールド名">
<label for="フィールド名" class="form-label">任意の文字列</label>
[input フィールド名]
</div>
<div class="col-md-6 mb-3" data-option="coleman_table">
<label for="coleman_table" class="form-label">coleman テーブル</label>
[input coleman_table]
</div>
<label for="coleman_chair" class="form-label">coleman チェアー</label>
[input coleman_chair]
</div>
<div class="col-md-6 mb-3" data-option="フィールド名">
<label for="フィールド名" class="form-label">任意の文字列</label>
[input フィールド名]
</div>
<div class="col-md-6 mb-3" data-option="coleman_table">
<label for="coleman_table" class="form-label">coleman テーブル</label>
[input coleman_table]
</div>
NGな例：他のオプションコードの間に、新しいコードを割り込んで挿入してしまっている。
<div class="col-md-6 mb-3" data-option="coleman_chair">
<label for="coleman_chair" class="form-label">coleman チェアー</label>
[input coleman_chair]
<div class="col-md-6 mb-3" data-option="フィールド名">
<label for="フィールド名" class="form-label">任意の文字列</label>
[input フィールド名]
</div>
</div>
<label for="coleman_chair" class="form-label">coleman チェアー</label>
[input coleman_chair]
<div class="col-md-6 mb-3" data-option="フィールド名">
<label for="フィールド名" class="form-label">任意の文字列</label>
[input フィールド名]
</div>
</div>
⑦「更新」をクリックして保存します。
バーチャルフィールドの反映
バーチャルフィールドを新しく登録した場合や、削除したい場合は、「顧客情報入力」のフォームコードを編集します。
フォームコードの編集方法は、上記に記載の「オプションの反映」と同様になります。
「オプションの反映」との違いは、編集するフォームが「顧客情報入力」か「予約情報入力」かの違いです。