Bootstrap3 tooltips для Contact Form 7

  • 398
  • 5
  • 02 февраля 2018

Доброго времени суток, товарищи девелоперы. Сегодня мы с Вами поговорим о том
Как добавить подсказки (bootstrap tooltips) к невалидным полям при отправке формы Contact Form 7.

Все мы любим использовать плагин Contact Form 7 (далее  CF7) для построения контактных форм, так как он значительно ускоряет этот процесс и избавляет нас от кучи рутинной работы, такой как верстка самой формы, настройка валидации на стороне клиента и сервера, написание скрипта отправки письма на почту и так далее.  Однако не все так просто, и в частности речь пойдет о том, как же красиво сообщить пользователю о том, что поля в форме, которую он отправил не прошли валидацию. По-умолчанию мы видим не очень красивую картину: В нашу верстку добавляются теги, в которых содержатся сообщения об ошибках, которые в свою очередь не очень красиво выглядят + к тому же ломают нашу верстку.

Выход есть:

  1. Сначала скроем все поля с сообщениями об ошибках еще до того как они появятся на странице
  2. Добавим красный цвет к бордеру невалидных полей input и textarea, что бы они сразу были заметны:
  3. Добавим в файл со скриптами следующий кусочек javascript кода:
  4. Не забываем перед данным скриптом подключить библиотеку jQuery
  5. Готово!
Как это выглядит в деле:

Комментарии - 5

  • Олег Б:

    Отличная тема. Однако не совсем работает, есть две проблемы.
    1) Дело в том что в бутстрапе 4 в tooltip.js нет метода ‘destroy’, он выдаёт в консоль ошибку. Нужно заменить ‘destroy’ на ‘dispose’ в 16 и 39 строках js кода, тогда будет показывать тултипы.
    2) Вот мы скрыли .wpcf7-response-output, а это в том числе и сообщение “спасибо вам, ваша заявка отправлена!” и другие важные сообщения. Вот их бы тоже как-то показывать тултипом над кнопкой отправки.

    • Спасибо за Ваш комментарий!
      Дело в том, что при написании статьи использовался Bootstrap v3, а на 4-м скрипт не был проверен. В будущем сделаю дополнение по версии 4.
      А к вопросу о выводе важной информации: в данном скрипте обрабатываются все варианты ошибок валидации полей, предусмотренные событием “wpcf7invalid”. Есть еще два события, которые могут произойти: wpcf7spam (отправлен спам) и wpcf7mailfailed (когда дынные ушли на обработку, но не были отправлены на почту). Для этих событий по аналогии можно сделать обработчики, только tooltips в этом случае инициализировать не к конкретным полям формы, а например к самой форме или кнопке отправки. Вот полный список событий: ContactForm7 DOM events
      Так же можно использовать не только tooltips а любые кастомные сообщения.
      Вот пример реализации сообщения об успешной отправки : https://devhelper.com.ua/#modal_form. Отправьте сообщение с любым текстом, просто что бы посмотреть на результат.

  • Владимир:

    Просто огромное человеческое СПАСИБО!

  • Кстати, ребята, в бутстрапе версии 4 не используйте tooltips в качестве сообщений об ошибках. В новой версии видимо изменили принцип работы tooltips. При скролле страницы они остаются на месте, возникает такое чувство будто они позиционируются не относительно родительского блока, а относительно body (похоже на position: fixed;).

Прокомментировать

×
Ваш комментарий успешно отправлен
и будет опубликован после модерации
× Превышен лимит отправки комментариев за период времени.
Пожалуйста, отправьте комментарий позже.