Приветствую вас, уважаемые читатели! Сегодня я хочу поделиться с вами одной небольшой хитростью, которая может значительно улучшить пользовательский опыт на вашем сайте, если вы используете прекрасный плагин для создания контактных форм — Contact Form 7. Ведь как часто случается, что посетитель вашего сайта, будучи нетерпеливым или не уверенным в успешной отправке формы, нажимает кнопку отправки несколько раз подряд? Признаюсь, сам сталкивался с такой ситуацией, и это может привести к дублированию заявок, что в свою очередь вызывает путаницу и лишние трудности.
Как же решить эту проблему? Ответ прост — можно временно скрыть или деактивировать кнопку отправки после того, как пользователь нажал на неё один раз. Это можно сделать с помощью небольшого кода JavaScript и специфичной интеграции с Contact Form 7.
Так, ниже я подробно расскажу, как написать функцию, которая изменит свойство видимости кнопки отправки, и как затем, с помощью наблюдателя за изменением, в автоматическом режиме применять эту функцию в нужный момент.
Первым делом создаем функцию setSubmitButtonVisibility, которая принимает в качестве аргументов элемент формы и желаемую видимость. Элемент формы мы будем искать по классу, который присваивается всем кнопкам отправки в Contact Form 7 — .wpcf7-submit. Едва наша функция обнаруживает указанную кнопку, она изменяет стиль ‘visibility’ в зависимости от переданного вторым аргументом соответствующего значения.
Далее идет самое интересное: инициализация MutationObserver – это специальный класс в JavaScript, который позволяет нам отслеживать изменения в DOM. В нашем случае мы будем отслеживать изменение атрибутов. В частности, нас интересует атрибут data-status, который Contact Form 7 использует для управления статусами формы: отправляется ли форма (‘submitting’) или например, найдена ошибка (‘invalid’). Есть и другие значения как init, sent.
Когда происходит изменение статуса, наш наблюдатель вызывает функцию setSubmitButtonVisibility и изменяет видимость кнопки в зависимости от текущего статуса. Если форма отправляется — кнопка становится невидимой (‘hidden’). Если же в форме нет статуса отправки, то кнопка снова становится видимой (‘visible’).
Последний этап — это нам необходимо прикрепить нашего наблюдателя к каждой форме на странице. Это делается путем перебора всех элементов формы и использования метода observe на каждом из них. Таким образом, наблюдатель будет отслеживать изменения атрибутов в реальном времени.
Эта незначительная на первый взгляд модификация улучшает пользование формой на вашем сайте, способствуя уменьшению недопонимания и ошибок со стороны пользователей. Стоит отметить, что использование JavaScript — это всегда чуть большая ответственность за конечный результат, так что всё тестирование кода лучше проводить на этапе разработки. Убедитесь, что скрипт работает корректно во всех основных браузерах и на всех устройствах, с которых могут ваши посетители заходить на сайт.
Я надеюсь, что этот маленький урок будет вам полезен и поможет сделать интерактивность на вашем сайте более дружелюбной и менее стрессовой для посетителей. Это важно, потому что каждый аспект пользовательского опыта влияет на общее впечатление о вашем веб-ресурсе, и, следовательно, на успешность вашего онлайн-представительства. Удачи в кодировании и не забывайте тестировать каждое нововведение!
А вот и сам js код:
<script>
// Функция для установки стиля видимости для кнопки отправки для Contact Form 7
function setSubmitButtonVisibility(formElement, visibility) {
const submitButton = formElement.querySelector('.wpcf7-submit');
if (submitButton) {
submitButton.style.visibility = visibility;
}
}
// Инициализация MutationObserver
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName === 'data-status') {
const form = mutation.target;
const status = form.getAttribute('data-status');
switch (status) {
case 'submitting':
// Когда форма отправляется, скрыть кнопку отправки
setSubmitButtonVisibility(form, 'hidden');
break;
// Добавить другие случаи, если необходимо (известны init, sent, invalid)
default:
// По умолчанию показать кнопку отправки
setSubmitButtonVisibility(form, 'visible');
break;
}
}
});
});
// Наблюдение за изменениями атрибутов для всех форм
const forms = document.querySelectorAll('form');
forms.forEach(form => {
observer.observe(form, {
attributes: true // настройка, чтобы отслеживать только изменения атрибутов
});
});
</script>Куда его добавить? Самый простой способ (для тех кто не умеет программировать) это в конец файла footer.php вашей темы (или дочерней темы). Кто знает немного как программировать может, добавить в functions.php или в шаблон самой формы, если форма будет вызываться один раз на странице.
Не стесняйтесь комментировать и делиться опытом, если у вас есть свои проверенные способы улучшения взаимодействия с контактными формами или вы уже применяли подобное решение на практике. Мне всегда интересен фидбек, ведь в мире веб-разработки обучение через обмен опытом — бесценно. Желаю вам максимально эффективных и приятных взаимодействий с пользователями на вашем сайте!