検証エラーメッセージを無効にする方法

概要

検証エラーメッセージを無効にしますが、エラーの視覚的な表現は保持しますか？

デフォルトでは、フォームでフィールドの検証に失敗すると、フィールドの周りに境界線が表示され、検証の失敗を説明するアイコン付きのテキストも表示されます。WPFormsの設定で、これらの検証チェックのテキストを簡単に変更できます。このテキストの変更方法については、こちらの役立つガイドをご覧ください。

簡単なCSSスニペットを使用すると、必須フィールドが入力されていない場合に表示されるテキストとアイコンを簡単に非表示にできますが、フィールドが赤くハイライトされてエラーの視覚的な表現が維持されます。このチュートリアルでは、これらのメッセージを無効にするために必要なCSSを示します。

スニペットの追加

このエラーテキストを無効にするには、このCSSスニペットをサイトにコピーして貼り付けるだけです。

CSSスニペットをサイトに追加する方法と場所についてサポートが必要な場合は、こちらの役立つガイドをご覧ください。

/* Disable form validation error messages */
/* @link https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ */
.wpforms-field-required ~ em, input.wpforms-error ~ em {
  display: none !important;
}
.wpforms-field-required ~ em, input.wpforms-error ~ em {
  display: none !important;
}

このCSSは、すべてのフォームのWPForms内のすべての検証エラーメッセージを無効にします。フォームが送信されなかった理由を示す視覚的なガイドとして、フィールドの周りに赤い境界線が表示されますが、エラーメッセージとアイコンは表示されなくなります。

1つのフォームのみを対象としたい場合は、このCSSを使用します。

/* Disable form validation error messages */
/* @link https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ */
.wpforms-field-required ~ em, input.wpforms-error ~ em {
  display: none !important;
}
form#wpforms-form-3602 .wpforms-field-required ~ em, form#wpforms-form-3602 input.wpforms-error ~ em {
    display: none;
}

CSSの-3602を自分のフォームIDに合わせて変更するだけです。フォームIDの見つけ方がわからない場合は、こちらのチュートリアルをご覧ください。

これで、検証エラーメッセージを無効にするために必要なすべてが完了しました！フォームに表示される必須フィールドアイコンも変更したいですか？必須フィールドインジケーターの変更方法のチュートリアルをご覧ください。