Возникла необходимость сделать форму связи с поддержкой инвалидности (accessibility) — для слабовидящих.
У нас есть замечательный плагин Contact Form 7.
По умолчанию, если включить скрин-ридер, после отправки формы, ридер не зачитывает ошибки и вообще никак не реагирует. Он говорит Alert — и на этом сообщение заканчивается.
Итак, к нашему плагину Contact Form 7 нужно добавить еще два (бесплатных):
Contact Form 7: Accessible Defaults
Contact form 7 Custom validation
Первый добавляет поддержку инвалидности. После его установки уже готовые формы Контакт Форм 7 не изменятся, вам нужно будет создать новые. В новых добавятся изменения, вот такие:
Изменение дефолтной формы:
<p>Your Name (required)<br />
[text* your-name] </p>
><p>Your Email (required)<br />
[email* your-email] </p>
<p>Subject<br />
[text your-subject] </p>
<p>Your Message<br />
[textarea your-message] </p>
<p>[submit "Send"]</p>
на такую:
[response]
<fieldset>
<label for="name">Name (required)</label>
[text* your-name id:name]
<label for="e-mail">Email address (required)</label>
[email* your-email id:e-mail]
</fieldset>
[submit "I want your newsletter"]
Хорошо еще добавить небольшие изменения. В папке с главным плагином Contact Form 7 найдите основной файл плагина wp-contact-form-7.php, откройте его и измените строки (с true на flase):
define( 'WPCF7_AUTOP', false ); // no extra <p>
define( 'WPCF7_LOAD_JS', false ); // disables JavaScript
define( 'WPCF7_LOAD_CSS', false ); // disables the default CSS
Эти изменения позволят обновлять страницу и выставлять фокус наверху — чтобы ридер сразу начал читать ошибки.
Переходим ко второму плагину.
Дело в том, что по требованиям инвалидности каждое сообщение об ошибке должно иметь свой собственный текст. По умолчанию Контакт Форм 7 для незаполненных полей выдает «The field is required». Выходит, что человек получает от скрин-ридера несколько одинаковых сообщений — «поле пустое», но не знает — какое именно?
Для этого нам и нужен плагин кастомных сообщений об ошибке. Их несколько, но все объединяет одно — они устарели. «Вылечить» я смогла только один — Contact form 7 Custom validation.
Он сразу же начинает выдавать ошибки, еще на стадии сохранения формы в админке. Пока что (на май 2017) мне понадобилось внести следующие изменения:
Вордпресс начинает ругаться на строки с определением ключа, например, строки 23 и 43 в файле cf7-custom-validation.php:
$vals = sanitize_text_field($_POST[$key]); $vals = sanitize_text_field($_POST[$key]);
Замените sanitize_text_field на isset. У вас получится:
$vals = isset($_POST[$key]);
и
$vals = isset($_POST[$key]);
Далее. Наверху будет сообщение об ошибке:
wpcf7_add_shortcode is deprecated
И совет использовать вместо него scan_form_tags.
В том же файле плагина cf7-custom-validation.php запустите поиск по слову wpcf7_add_shortcode.
И просто замените его на scan_form_tags.
Сохраните файлы и загрузите на сервер в соответствующие папки плагинов.
Должно заработать!
Небольшая добавка — как найти поля для кастомных сообщений. Если у вас форма стандартная, на поля: your-name и e-mail, то вам нужно заменить их имена. Хотя бы даже и так: your-name2 и e-mail2. Потом пройдите на дефолтную вкладку сообщений (Messages) и запустите там поиск через Ctrl+F, введите имя вашего нового поля. Оно подсветится, и вы сможете вбить туда свое сообщение!
Подробнее почитать и посмотреть видео можно здесь: https://wp-kama.ru/id_8362/contact-form-7-custom-validation.html.
Да, кстати — для быстрого тестирования сайта со скрин-ридером советую ChromeVox — это расширение на Google Chrome, то есть — не требует устанавливать никаких программ. Быстро и сердито.
You must be logged in to post a comment.