フォームのカスタマイズ(カスタムフィールド)

このページでは、予約フォームに独自の入力項目を追加する方法を解説します。

基本項目とカスタムフィールド

予約フォームには次の3つの項目が最初から用意されています。これらは 初期フィールド と呼ばれ、削除できません。

  • 氏名(1行テキスト)
  • メールアドレス(メールアドレス)
  • 電話番号(電話番号)

この3つは予約の受け付けとメールの送信に必要なため、常に必須で、タイプも変更できません。 予約フォームに表示される見出し(ラベル)は変更できます。たとえば「氏名」を「お名前」に書き換えることもできます。 そのため、ラベルを変更したあとは、このページの説明と画面の表記が違って見えることがあります。

それ以外に、業種や運用に応じて自由な項目を追加できます。これを カスタムフィールド と呼びます。

例:

  • ご相談内容(複数行テキスト)
  • ご来店経験(ラジオボタン: 初回/2回目以降)
  • 希望する施術(チェックボックス)
  • ご希望の連絡方法(セレクトボックス: 電話/メール)

フォーム設定画面の見かた

管理画面の Smart Booking → フォーム設定 を開くと、画面の上部に フォーム の選択欄があります。 入力項目は この選択欄で選んでいるフォームに対して 設定します。フォームを切り替えると、表示される入力項目も切り替えたフォームのものに入れ替わります。

はじめて使うときはフォームが1つだけ入っているので、特に意識せずそのまま設定して構いません。 用途別にフォームを増やす方法は 複数フォームの使い分け をご覧ください。

選択欄のすぐ下には、そのフォームをページに貼り付けるための ショートコード が表示され、コピー ボタンでコピーできます。

その下に並んでいるタブは フィールド設定 と メール の2つです。入力項目の設定は フィールド設定 タブで行います。

手順: フィールドを追加する

  1. 管理画面の Smart Booking → フォーム設定 を開きます。
  2. 複数のフォームがある場合は、上部の フォーム の選択欄で対象のフォームを選び、フィールド設定 タブを開きます。
  3. 「フィールドタイプから追加」に、選べるタイプのカードが並んでいます。追加したいタイプのカードの + 追加 をクリックします。

フィールドタイプカード

利用できるフィールドタイプは次の8種類です(カードが並んでいる順に掲載しています)。

タイプ 用途
1行テキスト 短文の自由入力です。会社名や役職などに使います
メールアドレス メールアドレスの入力欄です。形式が正しくないと送信できません
電話番号 数字・ハイフンのみを想定した入力欄です
複数行テキスト 要望や質問などの長文入力に向いています
セレクトボックス 用意した選択肢から1つだけ選びます
ラジオボタン 択一の選択肢を横並びのボタンで表示します
チェックボックス 複数を選べるチェック式です
住所(郵便番号) 郵便番号を入力すると住所を自動補完します。番地は手入力です

画面右上の + フィールドを追加 からも追加できます。この場合は 1行テキスト が選ばれた状態で開きますが、次の画面の フィールドタイプ で変更できます。

  1. フィールドを追加 の画面が開いたら、次の項目を入力します。
入力欄 内容
ラベル 予約フォームで入力欄の見出しとして表示される文言です。入力しないと保存できません
フィールドキー 任意です。空欄のままにすると自動で割り当てられます(後述)
フィールドタイプ カードで選んだタイプが入っています。ここで変更もできます
プレースホルダー 入力欄が空のときに薄く表示される案内文です
選択肢 セレクトボックス・ラジオボタン・チェックボックス のときだけ表示されます。1行に1つずつ入力します
住所の自動入力 住所(郵便番号) のときだけ表示されます。郵便番号から住所を自動入力するかどうかを切り替えます(住所フィールド(郵便番号自動入力))
必須入力 スイッチで 必須にする と 任意入力 を切り替えます
表示条件 ほかの項目で選ばれた内容に応じて、この項目を出し分けます(親にできる選択式の項目が無いときは、スイッチは表示されず案内文だけが表示されます)(条件フィールド(表示条件))
  1. フィールドを追加 をクリックします。
  2. 追加したフィールドは「現在のフィールド一覧」に表示されます。

フィールド一覧

フィールドキーは空欄のままで構いません

フィールドキー は、その項目を見分けるための英数字の名前です。 空欄のまま保存すると自動で割り当てられるので、英語の名前を考える必要はありません。 追加が終わると、割り当てられた名前を知らせるメッセージが表示されます。

新しく追加するときは、ラベル に入力した文字に合わせて フィールドキー の欄に候補が自動で入る場合があります(ラベルに半角の英数字が含まれているときで、たとえば「Zoom用URL」なら zoomurl が入ります。ラベルが日本語だけのときは空欄のままです)。 入った候補はそのまま使っても、消して空欄に戻しても構いません。空欄にすれば、これまでどおり保存時に自動で割り当てられます。

自分で入力する場合は、次の決まりがあります。

  • 英小文字で始まり、英数字とアンダースコア(_)だけが使えます。合わない場合は「英小文字で始まり、英数字とアンダースコアのみ使えます。例: company_name」と表示され、保存できません。
  • メール本文で使う固定の変数名と同じ名前は使えません。その場合は「このキーはメール変数の予約語のため使用できません。別のキー名にしてください。」と表示されるので、別の名前にしてください。
  • 同じフォームの中で同じ名前を重複して使うことはできません。

フィールドキーは、メール本文に回答を差し込むときの名前としても使われます。 「現在のフィールド一覧」では、追加した項目の行にメール本文で使える名前が表示されます(初期フィールドには表示されません)。メール本文の書き方は メール通知の設定 をご覧ください。

住所(郵便番号)の自動入力と外部サービスへの通信

住所(郵便番号) のタイプは、お客さまが入力した郵便番号から住所を自動で補います。 このとき、お客さまのブラウザから、外部の郵便番号検索サービス(zipcloud)へ郵便番号が送られます。 ご自身のサイトから外部のサービスへ通信が発生するため、プライバシーポリシーへの記載が必要かどうかをご確認ください。

通信が発生するのは、次の3つがすべてそろったときだけです。

  1. 予約フォームに 住所(郵便番号) の項目がある
  2. その項目の 住所の自動入力 が 郵便番号から住所を自動入力する(追加したときの初期状態)になっている
  3. お客さまが郵便番号を7桁まで入力した

送られるのは入力された郵便番号だけで、氏名やメールアドレスなどは送られません。

  • 通信をさせたくない場合は、その項目の編集画面で 住所の自動入力 を 自動入力しない(手入力のみ) に切り替えてください。この状態では郵便番号検索サービスへの通信は発生せず、お客さまには郵便番号と住所を手で入力していただく形になります。
  • 郵便番号に該当する住所が見つからなかったときや、通信に失敗したときも、予約フォームは止まりません。エラーは表示されず、住所欄はそのまま手入力できます。

設定手順・必須にしたときの条件・予約データやCSVでの残りかたなど、詳しくは 住所フィールド(郵便番号自動入力) をご覧ください。

編集・並び替え・削除

各フィールドの右側のボタンで操作できます。

  • 編集 — ラベルや選択肢の変更
  • ↑ ↓ — 並び順を変更(予約フォームの表示順に反映されます)
  • 削除 — フィールドを削除

削除 をクリックすると確認のダイアログが開き、削除する をクリックすると削除されます。 すでに送信された予約データには影響しません。

初期フィールド(氏名・メールアドレス・電話番号)は予約システムの基本項目のため、削除できません。 一覧では鍵のアイコンが付き、削除 ボタンも押せません。

ほかの項目の 表示条件 で親フィールドとして使われている項目も、そのままでは削除できません。 先に表示条件を解除する必要があります(条件フィールド(表示条件))。

必須/任意の切り替え

各フィールドの編集画面にある 必須入力 のスイッチで切り替えられます。 必須にする にすると、予約フォームでラベル横に 必須 バッジが表示され、未入力のままでは「この項目は必須です。」と表示されて送信できません。

初期フィールド(氏名・メールアドレス・電話番号)は 必須(初期フィールドは常に必須) と表示され、任意に変更することはできません。

入力のしかたを決める(入力ルール)

追加した項目には 入力ルール を設定できます。 「フリガナはカタカナだけで入力してほしい」「会員番号は半角の数字で8桁」「メールアドレスを2回入力して確認したい」といった指定ができる機能です。

設定できるのは次の4つです。

設定 内容
文字種 入力できる文字の種類を1つに制限します
最小文字数 この文字数未満では送信できません
最大文字数 この文字数を超えると送信できません
一致する項目 ほかの項目と同じ内容が入力されているかを確認します

入力ルール は v0.6.0 で追加された機能です。編集画面に見あたらない場合は、WordPress 管理画面の プラグイン 画面から Smart Booking を最新版に更新してください。

フィールドタイプごとに設定できるルール

入力ルールは、フィールドタイプによって設定できる内容が変わります。設定できないタイプでは、入力ルール の欄そのものが表示されません。

フィールドタイプ 設定できる入力ルール
1行テキスト 文字種・最小文字数・最大文字数・一致する項目
複数行テキスト 文字種・最小文字数・最大文字数
メールアドレス 一致する項目のみ
電話番号 一致する項目のみ
セレクトボックス / ラジオボタン / チェックボックス / 住所(郵便番号) 設定できません

初期フィールド(氏名・メールアドレス・電話番号)には入力ルールを設定できません。 ただし、一致する項目 の比較先としては選べます(「メールアドレス(確認用)」を作る場合など)。

手順: 入力ルールを設定する

  1. 管理画面の Smart Booking → フォーム設定 を開きます。
  2. 複数のフォームがある場合は、上部の フォーム の選択欄で対象のフォームを選び、フィールド設定 タブを開きます。
  3. ルールを設定したい項目の 編集 をクリックします(新しく追加するときは、フィールドを追加 の画面でも同じように設定できます)。
  4. 必須入力 の下にある 入力ルール で、文字種・最小文字数・最大文字数・一致する項目 を設定します。
  5. 変更を保存 をクリックします(新規追加のときは フィールドを追加)。

フィールドの編集画面の入力ルール。文字種にカタカナ、最小文字数に2、最大文字数に30を設定した状態

文字種

文字種 では、その欄に入力できる文字の種類を1つだけ選べます。初期状態は 指定なし(制限なし)です。

選択肢 入力できる文字
指定なし 制限しません(初期状態)
半角数字 半角の数字のみ。空白は使えません
半角英字 半角のアルファベットのみ。空白は使えません
半角英数字 半角のアルファベットと数字のみ。空白は使えません
カタカナ 全角のカタカナ。長音(ー)・中黒(・)・空白を含められます
ひらがな ひらがな。長音(ー)・中黒(・)・空白を含められます
ひらがな または カタカナ ひらがなとカタカナ。1つの欄の中で混ざっていても構いません
  • カタカナ を指定した欄に半角カナ(カタカナ)を入力するとエラーになります。半角カナが全角に変換されることはありません。
  • 漢字やアルファベットを含む氏名を想定する欄に カタカナ や ひらがな を指定すると、お客さまが入力できなくなることがあります。フリガナ欄のように、入力する文字が確実に決まっている項目にだけ指定してください。
  • 複数行テキスト に文字種を指定した場合、改行は入力できる文字に含まれません。改行を入れて入力するとエラーになるため、長文を受け付ける欄には文字種を指定しないことをおすすめします。

全角で入力された英数字は半角に変換されます

文字種 に 半角数字・半角英字・半角英数字 のいずれかを指定した欄では、お客さまが全角で入力した英数字(0〜9、A〜Z、a〜z)が 自動的に半角へ変換されます。記号や空白は変換されません。

  • 変換は、お客さまが 予約内容の確認 ボタンを押したタイミングで行われます。確認画面には変換後の内容が表示されるため、お客さまご自身でも変換結果を確認できます。
  • 保存される回答も変換後の内容です。予約一覧 の予約詳細・CSV・通知メールに差し込まれる内容も、すべて変換後のものになります。
  • 入力ルールを設定した項目では、入力内容の前後にある空白(全角の空白を含む)も取り除かれてから保存されます。

最小文字数・最大文字数

最小文字数 と 最大文字数 には、それぞれ 1〜9999 の数字を入力します。どちらも空欄にできます(空欄なら下限なし・上限なしです)。片方だけの指定も可能です。

  • 文字数は、前後の空白を取り除いたあとの文字数で数えます。複数行テキスト では改行も1文字として数えます。
  • 最小文字数 に 最大文字数 より大きい数字を入れると、「最小文字数は最大文字数以下にしてください。」と表示されて保存できません。

一致する項目

一致する項目 は、その欄に入力された内容が、指定したほかの項目と同じかどうかを確認するルールです。「メールアドレス(確認用)」のような確認欄を作るときに使います。

たとえばメールアドレスの確認欄は、次のように作ります。

  1. フィールドタイプ メールアドレス の項目を追加し、ラベル を「メールアドレス(確認用)」などにします。
  2. その項目の 入力ルール の 一致する項目 で メールアドレス を選びます。
  3. 変更を保存 をクリックします。

1行テキストの項目の編集画面。入力ルールの「一致する項目」でメールアドレスを選んだ状態

上の画面例は 1行テキスト の項目に 一致する項目 を設定したものです。1行テキスト でも確認欄は作れるため、この例では 文字種・最小文字数・最大文字数 も一緒に表示されています。手順のとおり メールアドレス の項目で設定した場合は、入力ルール に 一致する項目 だけが表示されます。

一致する項目 の選択欄に並ぶのは、同じフォームの中にある 1行テキスト・メールアドレス・電話番号の項目 だけです(初期フィールドの氏名・メールアドレス・電話番号も選べます)。自分自身は選べません。複数行テキスト や選択式の項目、住所(郵便番号) は比較先にできません。

比較のしかたには次の決まりがあります。

  • 前後の空白を取り除いたうえで、内容が完全に同じかどうかを見ます。大文字・小文字は区別されます。
  • 比較先が空欄で、確認欄だけが入力されている場合も「一致しない」と判定されます。
  • 比較先が 表示条件 によって隠れているときは、一致の確認を行いません。

比較先に指定されている項目は、そのままでは削除できません。削除しようとすると「このフィールドは他フィールドの入力ルール「一致する項目」の比較先になっています(依存: ○○)。先に一致ルールを解除してください。」と表示されます。先に確認欄側の 一致する項目 を 指定なし に戻してください。

エラーの出かたと、ルールが適用されない場合

予約フォームでの検証は、お客さまが 予約内容の確認 ボタンを押したときにまとめて行われます(入力している最中や、欄から移動したタイミングでは検証されません)。 ルールに合っていない欄は枠が赤くなり、欄の下にメッセージが表示されます。

予約フォームのフリガナ欄が赤く表示され、「カタカナで入力してください。」というメッセージが出ている状態

表示されるメッセージは、設定したルールによって変わります。

ルール メッセージの例
文字種 「カタカナで入力してください。」(選んだ文字種の名前が入ります)
最小・最大の両方 「2〜30文字で入力してください。」
最小のみ 「2文字以上で入力してください。」
最大のみ 「30文字以内で入力してください。」
一致する項目 「メールアドレスと一致しません。」(比較先のラベルが入ります)
  • 文字種 のメッセージに入る名前は設定欄の表記と同じですが、ひらがな または カタカナ を選んだときだけ、メッセージでは「ひらがなまたはカタカナで入力してください。」とスペースの入らない表記になります。
  • 1つの欄に複数のルールを設定していても、一度に表示されるメッセージは最初に見つかった1件だけです(文字種 → 文字数 → 一致 の順に確認されます)。
  • 入力ルールに合っていないときも、画面の下部には「必須項目をすべて入力してください。」というご案内が表示されます。詳しい理由は各欄の下のメッセージをご確認ください。
  • 予約が送信されるときには、プラグイン側でも同じ内容がもう一度確認されます。お客さまが入力している最中に入力ルールを変更した場合など、ここで問題が見つかったときは確認画面にメッセージが表示され、予約は保存されません。このときのメッセージは上の表と違い、先頭に項目名が付きます(例:「フリガナはカタカナで入力してください。」「メールアドレス(確認用)がメールアドレスと一致しません。」)。

次の場合、入力ルールは適用されません。

  • 入力ルールを設定していない項目 — これまでどおりの動作です。更新しただけで検証が増えることはありません。
  • 空欄のまま送信された項目 — 空欄かどうかは 必須入力 の担当です。任意入力の項目は、空欄のままなら入力ルールの確認をしません。必ず入力させたい場合は 必須入力 を 必須にする に切り替えてください。
  • 表示条件で隠れている項目 — 表示されている項目だけが検証されます。
  • 管理画面から手動で作成・編集した予約 — 入力ルールは、お客さまが予約フォームから申し込む場合にだけ適用されます。
  • ルールを設定したあとにフィールドタイプを変更した場合 — 変更後のタイプで設定できないルールは使われません。タイプを変更したときは、入力ルールも設定し直してください。

選んだ内容に応じて項目を出し分ける(表示条件)

追加した項目には 表示条件 を設定できます。 ラジオボタン や セレクトボックス で選ばれた内容に応じて、別の項目を表示したり隠したりする機能です。 たとえば「資料送付」で「希望する」を選んだ人にだけ「送付先住所」を表示する、といった使い方ができます。

設定は、出し分けたい項目の編集画面の 表示条件 で行います。 条件は1つの項目につき1つだけで、入れ子(2段階の出し分け)にはできません。 また、隠れたまま送信された項目の内容は保存されません。

設定手順と注意点は 条件フィールド(表示条件) をご覧ください。

注意点

  • 入力項目はフォームごとの設定です。フォームを複数使っている場合は、フォームごとに設定してください。
  • 初期フィールド(氏名・メールアドレス・電話番号)は、削除・タイプの変更・必須の解除ができません。ラベル・プレースホルダー・並び順は変更できます。
  • 項目が多いほどお客さまの入力の負担は増えます。本当に必要な項目だけを追加してください。

次のステップ

見た目をサイトに合わせて調整するには、デザインの設定 をご覧ください。 「無料体験」「入塾相談」のように用途別のフォームを作って入力項目を分けたい場合は、複数フォームの使い分け をご覧ください。 選んだ答えに応じて入力項目を出し分けたい場合は、条件フィールド(表示条件) をご覧ください。 郵便番号から住所を自動入力する項目については、住所フィールド(郵便番号自動入力) をご覧ください。