フォームフィールドにデフォルト値を追加したいですか?フィールドがすでに入力されているか、関連するオプションがあらかじめ選択されていると、ユーザーがフォームを入力しやすくなります。
このチュートリアルでは、WPFormsのフォームフィールドにデフォルト値を設定する方法を紹介します。
始めるには、WPFormsがあなたのサイトにインストールされ、有効になっていることを確認してください。次に、新しいフォームを作成するか、既存のフォームを編集する必要があります。
入力フィールドのデフォルト値の設定
以下の入力フィールドにデフォルト・テキストを追加できます：
- 単一行テキスト
- 段落テキスト
- 数字
- 名称
- 電子メール
- 電話（基本ライセンス以上）
- 住所（ベーシックライセンス以上）
- ウェブサイト/URL（ベーシックライセンス以上）
- パスワード（ベーシックライセンス以上）
- 隠しフィールド（ベーシックライセンス以上）
まず、上記のフィールドのいずれかをフォームに追加します。次に、フィールドをクリックしてフィールドオプションにアクセスします。次にAdvancedタブを開き、Default Valueフィールドを探します。
デフォルト値フィールドでは、テキストまたはスマートタグを追加して、フォームフィールドを事前に埋めることができます。
テキストを使ったデフォルト値の追加
デフォルト値フィールドに直接テキストを入力することで、デフォルト値を追加することができます。この例では、お問い合わせフォームの件名フィールドのデフォルト値として「一般的なお問い合わせ」を追加します。
あなたのサイトに公開されると、このフィールドには、あなたがフィールドオプションに入力したとおりに追加したテキストがあらかじめ入力されます。
スマートタグを使ったデフォルト値の追加
スマートタグは、ページやユーザーデータなど、特定の情報をフォームに取り込むために使用できるコードの一部です。
この例では、スマートタグを使って隠しフィールドのデフォルト値を設定します。隠しフィールドはフロントエンドのユーザーには見えないので、バックグラウンドで追加入力情報を収集するのに便利です。
デフォルト値」フィールドの横にある「スマートタグ」 アイコンをクリックすると、挿入可能なスマートタグのリストが表示されます。
この例では、フォームが埋め込まれているページのタイトルを知りたい。そのためには、スマートタグのリストを下にスクロールして 埋め込み投稿/ページタイトル.これにより、対応するスマートタグが追加されます。 {page_title} をデフォルト値フィールドに追加する。
フォームが送信されると、フォームエントリーと 通知でページタイトルを見ることができるようになります。
注意:スマートタグの詳細と使用例については、WPFormsでスマートタグを使用する方法についてのチュートリアルをご覧ください。
複数選択肢、チェックボックス、ドロップダウン・フィールドでデフォルト値を使用する
マルチプルチョイス、チェックボックス、ドロップダウンの各フィールドは、サイト上で公開する際にあらかじめ選択されたオプションを持つように設定できます。チェックボックスフィールドでは1つ以上のデフォルト値を設定でき、マルチプルチョイスフィールドとドロップダウンフィールドでは1つのデフォルト値を設定できます。
この例では、サインアップフォームにチェックボックスフィールドを追加して、ユーザーが購読したいメールマガジンを選択できるようにします。フィールドオプションパネルを開くには、フォームビルダーのプレビューエリアでフィールドをクリックします。
次に、各選択肢の横にあるチェックボックスをクリックして、このフィールドのオプションをあらかじめ選択しておきます。
フロントエンドで公開されると、これらのオプションはデフォルトで選択されます。ユーザーはチェックボックスをクリックすることで、項目の選択を解除することができます。
数値スライダーフィールドにデフォルト値を追加する
数値スライダーフィールドにデフォルト値を追加して、セレクタをスケール上の特定のポイントに設定することができます。
ナンバー・スライダーのデフォルト値を設定する前に、フィールド・オプション・パネルでその範囲を設定してください。
次に「詳細設定」タブをクリックし、デフォルト値を設定します。設定した範囲内の数値でなければなりません。
フロントエンドでは、セレクタはユーザーが動かすまで、あなたが指定した番号に設定されます。
以上です！これで、フォームフィールドにデフォルト値を設定する方法がわかりました。
次に、フォームフィールドに特定の入力フォーマットを要求したいですか？カスタム入力マスクを使用して、ユーザーがフィールドに入力できる値のルールを設定する方法についてのチュートリアルをご覧ください。