Ninja Forms:快適なフォームにしてみよう

エラー?フィールド?ユーザーに分かりやすい言葉で!

お問い合わせフォームに多い
「エラーです」
「これは必須フィールドです」
「半角英数字でご入力ください」

など。わかりにくいし、もし実際の接客業ならば、ちょっと失礼ですよね!

以前とっても出来るプログラマーさんとお仕事する機会があって、
「入力ミスはユーザのせいじゃない。
間違えてしまうように設計したプログラマーのせいだ。」
とおっしゃっていたのには
なるほどなぁ~
と思ったことがあります。

エラーメッセージも
「これは必須フィールドです」ではなく
「必須項目です。ご入力をお願いします。」
「半角英数字でご入力ください」は
半角英数字しか入れられないようにする。

とは言え、サイト運営者側も自分で一から設計していない場合は、すべて完璧に作り上げるのは厳しいところがあるので、できる限り「快適なフォーム作り」を目指してみましょう!

Ninja Formsをカスタマイズしてみましょう!

Ninja Formsの設定方法はデジタルマーケッター 松原 潤一さんの記事が分かりやすいです。

デジタルマーケティング専門家/デジタルマーケッター松原潤一のブログ

WordPressのお問合せフォーム、申込みフォーム作成プラグインといえば「Contact Form7」が一番メジャーで…

Ninja Formsは初期状態はこんな感じになると思います。
Ninja Forms初期画面
エラーメッセージがちょっとわかりづらいのと、どこがエラー項目か見つけづらいです。

  1. エラー項目はわかりやすい色にする
    背景色をピンクにして分かりやすくしてみましょう。
    下記ソースコードを「外観」-「カスタマイズ」-「追加CSS」に入力してください。
    (他に何か入っていたら、最後に追加すればOKです)

    ついでにテキストボックスの中の文字と枠に余裕がない感じがするので、余白を設定しています。
    Ninja Formsエラー背景色変更
    パッと見わかりやすくなりましたね。
  2. エラーメッセージを変えてみましょう
    WordPressの左メニューの「Ninja Forms」より「ダッシュボード」を開き、変更したいフォームのタイトル→編集をクリックします。
    Ninja Formsダッシュボード
    高度な設定→表示設定をクリックします。
    Ninja Forms高度な設定
    さらに高度な設定の「ラベルのカスタム」からエラーメッセージを変えられます。
    ラベルのカスタム
    自分のフォームをいじってみて、気なる文言の箇所を直しましょう。
    Ninja Forms高度な設定 エラーメッセージ変更
    ちなみにhtml形式で入力できるので、赤字や太字にすることもできます。
  3. 文字制限もできる
    フォームフィールドメニューのフォームの編集画面から「制限」をクリックすると、文字数が制限できる場合があります。
    Ninja Forms文字制限
    ですがあまり制限については一部のフィールドのみ対応で自由自在にできるわけではないようです。

完成です。

Ninja Formsエラー画面カスタマイズ完了

ご参考

THE THOR:ヘッダーをグラデーションにしたい

お問い合わせ

投稿者プロフィール

つるむらさき
つるむらさき
WordPress、マーケティングを勉強中の事務員&Web担当の保育園児ママです。

SNSやブログで知り合った方とも
情報共有できたり楽しくコミュニケーション取れたりできればうれしいです!!
サーバーはエックスサーバーが速くてお勧めです



Ninja Forms:快適なフォームにしてみよう
最新情報をチェックしよう!