Не можете найти лучший способ для посетителей вашего сайта связаться с вами на вашем сайте WordPress?
Плагин WordPress Contact Form 7 может быть именно тем решением, которое вы искали. Являясь одним из наиболее удобных для пользователя инструментов, доступных в наборе инструментов WordPress, он предназначен для того, чтобы без особых усилий устранить разрыв в общении между вами и вашими посетителями.
В этом блоге я проведу вас через процесс установки и настройки контактной формы WordPress 7, включая создание контактной формы, ее оформление и обеспечение ее безопасности.
Давайте начнем!
Contact Form 7 выделяется как бесплатный плагин WordPress, предлагающий вам возможность создавать разнообразные контактные формы для вашего веб-сайта. Он позволяет пользователям легко создавать и управлять несколькими контактными формами и настраивать их с помощью простой разметки по своему вкусу.
Что еще лучше, этот плагин не стоит ни копейки и упрощает процесс добавления ваших контактных форм в любую публикацию, страницу или область виджетов, предоставляя собственные короткие коды для каждой создаваемой вами формы.
Контактная форма 7 выделяется своей простотой среди всех плагинов контактных форм.
Контактная форма предоставляет вашим посетителям понятный, удобный и организованный способ связи с вами, сохраняя при этом ваше общение безопасным и профессиональным.
Контактная форма 7 проделывает огромную работу, предоставляя владельцам веб-сайтов WordPress возможность легко создавать контактную форму.
Вот несколько причин, почему вам следует выбрать контактную форму 7:
Почему стоит выбрать контактную форму 7:
1. Бесплатно: отсутствие премиум-версии означает отсутствие отвлекающих дополнительных элементов на главной панели управления, что обеспечивает удобство работы.
2. Настраиваемость. Легко настраивайте формы, используя доступные параметры или применяя CSS для персонализации.
3. Совместимость тем: наслаждайтесь широкой совместимостью как с бесплатными, так и с премиальными темами, гарантируя, что ваши контактные формы останутся функциональными, даже если вы измените тему своего веб-сайта.
Наличие контактной формы может иметь свои плюсы и минусы. Я опишу их ниже:
Плюсы | Минусы |
Защитите свою электронную почту от спама | Это может показаться менее личным, чем прямые электронные письма. |
Придаёт профессионализм | Возможные технические проблемы или неисправности |
Структурированные сообщения для упрощения обработки | Упущенные возможности или коммуникации |
Уменьшение количества нежелательных сообщений | |
Сосредоточьтесь на искреннем взаимодействии |
Чтобы установить Contact Form 7, вам необходимо выполнить следующие шаги:
Contact Form 7 — это мощный инструмент, когда дело доходит до плагинов форм WordPress, предлагающий пользователям богатый набор настроек для точной настройки их контактных форм. В основе его конфигураций у вас есть возможность создавать собственные формы и интегрировать различные теги форм, такие как текст, электронная почта, URL-адрес и многое другое.
При установке контактной формы 7 вы получаете фиктивную форму. Вы можете получить к этому доступ, выполнив следующие действия:
Теперь опишу каждую настройку отдельно:
Теперь, когда вы изучили возможности контактной формы WordPress, я расскажу вам, как создать свою собственную контактную форму. Для этого:
Теги формы Contact Form 7 являются неотъемлемой частью работы плагина. Эти теги формы действуют как короткие коды и при размещении в редакторе форм генерируют определенные элементы формы для вашей контактной формы.
Пользователи могут выбрать предпочитаемый тип поля формы, настроить его и легко вставить сгенерированный тег формы в свою форму.
Вот краткое объяснение каждого тега формы:
Тип поля формы | Описание |
Текстовые поля | Создает базовое поле ввода текста. |
Поля электронной почты | Создает поле ввода специально для адресов электронной почты, включая проверку правильного формата электронной почты. |
Поля URL-адреса | Поле ввода, предназначенное для URL-адресов веб-сайтов. |
Поля номера телефона | Ввод для телефонных номеров. |
Число | Создает тег формы для числа. |
Поля даты | Предоставляет поле ввода с выбором даты. |
Текстовая область | Создает текстовое поле большего размера, подходящее для более длинных сообщений или комментариев. |
Выпадающее меню | Создает раскрывающийся список для выбора пользователя. |
Флажки | Предоставляет флажки для нескольких вариантов выбора. |
Радио-кнопки | Создает переключатели для выбора одного варианта. |
Принятие | Обычно используется для согласия с положениями и условиями. Это флажок, который пользователи должны установить, чтобы продолжить. |
Поле викторины | Полезно для базовой защиты от спама; пользователи отвечают на викторину. |
реКАПЧА | Расширенный тег формы, улучшающий защиту от спама. Интегрирует контактную форму 7 с reCAPTCHA для защиты от спам-ботов. |
Поле загрузки файла | Позволяет пользователям прикреплять и загружать файлы. |
Кнопка «Отправить» | Добавляет кнопку отправки в вашу форму. |
Теперь, когда мы рассмотрели различные теги форм, я покажу вам, как на самом деле использовать эти теги. В этом блоге я буду демонстрировать использование тегов текстовой формы. Все остальные теги формы будут использоваться аналогично.
Тег текстовой формы в контактной форме 7 создает в вашей форме однострочное поле ввода текста. Этот тег формы идеально подходит, когда вам нужно, чтобы пользователи предоставили краткий текст, например свое имя или тему.
Вот поля, которые вы найдете в теге текстовой формы в контактной форме 7:
Я заполнил эти значения, как показано на скриншоте ниже. После заполнения полей я вижу сгенерированный короткий код.
Точно так же, как мы добавили тег текстовой формы, я буду использовать комбинации этих тегов формы и создам свою настроенную контактную форму Cloudways. Итак, начнем.
Поскольку я уже создал контактную форму Cloudways, теперь я отредактирую ее, чтобы придать ей персонализированный вид.
Вот несколько функций, которые я хочу в своей форме:
Я буду использовать теги формы, как показано ранее:
Иногда вам не нравится размещение тегов в контактной форме. Вот где вы хотели бы реструктурировать свою форму. Это очень просто.
Вам необходимо вставить теги в том порядке, в котором вы хотите. Ниже я поделюсь с вами двумя примерами, чтобы вам было легче понять.
Я хочу, чтобы метки формы отображались в следующем формате:
Для этого я разместим теги формы в том же порядке.
Теперь, для вашего понимания, я перенесу флажки «мужской/женский» под сообщением. Для этого я просто помещу тег флажка под тегом сообщения.
Мы изучили вкладку формы , и теперь вторая вкладка на очереди — это вкладка почты . Эта вкладка позволяет настроить параметры почты. Это поможет вам получать материалы из контактных форм в желаемый почтовый ящик.
Ниже я опишу каждое поле и его назначение:
В поле» относится к адресу электронной почты, на который будут направляться отправленные формы. Обычно это ваш адрес электронной почты или другой подходящий почтовый ящик в вашей организации, куда вы хотите получать отправленные данные формы.
Это обозначает, от кого будет получено электронное письмо. Рекомендуется использовать адрес электронной почты, связанный с вашим доменом, чтобы письма не были помечены как спам. Вы также можете динамически получать введенные данные электронной почты из формы, используя такие теги, как [ваш-адрес электронной почты].
Определите тему электронного письма, которое вы получите. Чтобы упростить сортировку, вы можете использовать четкую строку темы, например «Новое сообщение от [ваше имя]», где [ваше имя] динамически извлекает введенное пользователем имя.
Здесь вы можете добавить дополнительные заголовки писем, если это необходимо. Обычно используется «Ответить: [ваш адрес]», что позволяет вам напрямую ответить на адрес электронной почты, указанный пользователем.
Это основное содержание письма, которое вы получите. По умолчанию контактная форма 7 предоставляет простой шаблон, включающий все поля формы. Однако вы можете настроить это по своему усмотрению.
Это дополнительный шаблон письма. Это может быть полезно, если вы хотите отправить другое или дополнительное электронное письмо, например сообщение с подтверждением пользователю или уведомление другому члену команды.
Если в вашей форме есть поле для загрузки файлов и вы хотите получать загруженные файлы в виде вложений по электронной почте, вы можете указать это здесь, добавив соответствующий тег формы, например, [ваш-файл].
После настройки желаемых параметров почты не забудьте нажать «Сохранить», чтобы убедиться, что все ваши настройки сохранены.
Иногда при использовании контактной формы вы сталкиваетесь с трудностями при доставке почты. Я опишу некоторые распространенные проблемы с доставкой почты, с которыми люди сталкиваются при доставке почты, а также их решения.
Иногда электронные письма, отправленные через контактную форму 7, могут попасть в папку «Спам».
Вы можете вообще не получать электронные письма, даже если пользователи отправляют формы.
Пользователи могут увидеть сообщение об ошибке после отправки формы.
Если форма настроена неправильно, она может не отправлять электронные письма.
Конфигурации веб-хостинга или проблемы с сервером могут блокировать электронную почту.
Контактная форма 7 предоставляет пользователям сообщения обратной связи после отправки формы. Эти сообщения могут информировать пользователей о том, была ли отправка формы успешной или возникли ошибки.
Вот сообщения по умолчанию, которые есть в контактной форме 7:
После того как вы создали и структурировали форму, вам необходимо ее стилизовать. Моя текущая форма выглядит грубо, поэтому я выровняю ее и сделаю кнопку отправки заметной.
Есть разные способы сделать это. Для этого я буду использовать собственный CSS.
Иметь контактную форму недостаточно. Вам также необходимо стилизовать его по эстетическим соображениям. Визуально привлекательная контактная форма повышает удобство использования и убеждает пользователей использовать ее. Хорошо оформленная форма привлекает пользователей и выглядит более профессионально, вызывая доверие у посетителей.
Кроме того, тщательно продуманная форма может повысить удобство использования и доступность, упрощая пользователям взаимодействие и отправку своей информации.
Кроме того, вам не нужно вставлять контактную форму случайным образом. Он должен соответствовать дизайну бренда, чтобы поддерживать единообразие вашего веб-сайта.
После настройки и оформления контактной формы следующим шагом будет ее защита.
Плагин Contact Form 7 включает функцию ввода кода. Пожалуйста, следуйте инструкциям ниже, чтобы добавить reCAPTCHA на свой сайт:
Чтобы начать работу с reCAPTCHA , вам необходимо иметь учетную запись Google и зарегистрировать свой сайт для ключей API:
Да, Contact Form 7 совместим с любой темой WordPress. Однако внешний вид формы может различаться в зависимости от стиля темы, и для соответствия стиля формы вашей теме может потребоваться дополнительный CSS.
Да, контактная форма 7 готова к переводу и поддерживает несколько языков. Плагины, такие как WPML или Polylang, могут создавать формы на разных языках.
Вы можете интегрировать плагины для защиты от спама, такие как Akismet, или добавить поля CAPTCHA в свои формы, чтобы предотвратить спам. Contact Form 7 также предоставляет встроенные функции, такие как Honeypot, для борьбы со спамом.