Контактная форма для wordpress contact form 7: Как добавить контактную форму в WordPress

Как добавить контактную форму в WordPress

Чтобы посетители вашего сайта могли с вами связаться, можно добавить на сайт свой номер телефона или адрес электронной почты. Пользователю придётся совершить несколько действий: набрать ваш номер или адрес, позвонить и оформить сообщение. Однако этот процесс можно упростить — добавить на сайт контактную форму обратной связи.

Обычно контактная форма состоит из нескольких полей, которые нужно заполнить. Например: «Имя», «Адрес электронной почты», «Текст сообщения». Через контактную форму пользователям будет удобнее с вами связаться: они заполнят необходимые поля и отправят форму в один клик, не нужно звонить или отправлять сообщение на email. Кроме того, посетители смогут подписаться на рассылку вашего сайта, оставить отзыв, заказать товар или услугу.

Для добавления контактных форм на сайт WordPress нужны плагины. Плагинов для добавления контактных форм для WordPress существует огромное множество, но мы расскажем о самом популярном — плагин Contact Form 7. Его установили уже более трёх миллионов пользователей, и он регулярно обновляется. После установки вы сможете добавлять на сайт формы обратной связи. Если вы хотите добавить на сайт на WordPress форму заказа, плагин Contact Form 7 также отлично подойдёт.

Шаг 1. Установите плагин Contact Form 7

1. 1.

   Войдите в панель управления WordPress.

2. 2.

   Перейдите на вкладку Плагины — Добавить новый. В поисковой строке введите Contact Form 7 и нажмите Установить:

3. 3.

   После установки нажмите Активировать:

Готово, вы установили и активировали плагин.

Шаг 2. Создайте форму обратной связи

1. org/HowToStep»> 1.

   Перейдите на появившуюся после установки вкладку Contact Form 7 — Добавить новую. На вкладке «Шаблон формы» откроется редактор формы с уже готовым стандартным шаблоном:

2. 2.

   Введите имя новой формы в поле «Введите заголовок».

3. 3.

   Если вы не хотите вносить изменения в шаблон, нажмите Сохранить и переходите к настройкам письма — шагу 4. Если же вы хотите отредактировать её, то переходите на следующий шаг 3.

Шаг 3. Настройте шаблон формы

В стандартном шаблоне в форму добавлены поля «Ваше имя», «Ваш e-mail», «Тема», «Сообщение» и кнопка Отправить.

Для Contact Form 7 настройка шаблона выглядит следующим образом. В редакторе шаблона можно использовать HTML-код и так называемые теги формы. Теги формы — это шорткоды (короткие коды), которые при публикации преобразуются в HTML-код и добавляют поля формы. Также существуют теги почты для настройки электронной почты. Рассмотрим синтаксис тегов формы и тегов почты.

Синтаксис тега формы

Пример тега формы: [text text-name “Enter your name”]. Он состоит из четырёх частей:

• Тип (в примере — text) — определяет тип элемента. Если поставить звёздочку после типа, то поле будет обязательным к заполнению: [text* ].
• Имя (text-name) — название поля ввода.
• Значение («Enter your name») — необязательно для добавления. Используется для значений по умолчанию, которые находятся в поле (подсказка, что вводить в поле пользователю).

Теги формы вы можете выбрать из списка и добавить их в контактную форму:

Рассмотрим поля, которые можно добавить:

1. текст — текстовое поле для ввода текста только в одну строку, Например: имя, тема сообщения.
2. email – адрес электронной почты.
3. URL — адрес сайта или страницы.
4. телефон — числовое поле для ввода номера телефона.
5. номер — числовое поле для ввода (например, количества заказываемого товара).
6. дата — дата в формате дд.мм.гггг.
7. текстовая область — поле для ввода текста в несколько строк. Например, отзыв или сообщение от посетителя.
8. в раскрывающемся меню — выпадающее меню, здесь можно добавить несколько пунктов меню для выбора. Пользователь может выбрать только один пункт.
9. чекбоксы – чекбоксы, в которых можно выбрать один пункт, несколько или ни одного.
10. радио кнопка – она похожа на чекбокс — предоставляются варианты для выбора. Пользователь обязательно должен выбрать один вариант из предложенных.
11. принятие – чекбокс. Пока пользователь не поставит галочку (например, о том, что он согласен с правилами обработки персональных данных), кнопка отправки сообщения будет неактивна.
12. опрос — CAPTCHA, чтобы убедиться, что форму отправил человек, а не робот. Вы можете задать здесь контрольный вопрос, на который нужно ответить перед отправкой формы. Только когда будет введён правильный ответ, кнопка отправки активируется.
13. файл — создание кнопки для выбора файла, который можно прикрепить к письму.
14. отправить — кнопка, при нажатии на которую отправляется форма.

Посмотрите, как можно применить все инструменты, на примере. Ниже приведён код с тегами формы и результат — получившаяся форма заказа Вордпресс:

Синтаксис тега почты

Почтовый тег состоит только из одного слова. Это слово обычно соответствует имени тега формы. Например: [your-name]. Используется при настройке шаблона письма (шаг 4).

Шаг 4. Настройте шаблон письма

Если посетитель вашего сайта заполнит форму и отправит её, то на ваш электронный адрес придёт сообщение с этой формы.

Вы можете настроить это сообщение на вкладке «Письмо». При редактировании используйте почтовые теги:

• Кому — введите здесь свой адрес электронной почты, на который будут отправляться все отправленные формы.
• От кого — введите адрес электронной почты, который принадлежит тому же домену, что и ваш сайт.
• Тема — тема сообщения, которую вводит пользователь.
• Additional headers — по желанию добавьте дополнительные заголовки. Например: Reply-To: [your-email] — тогда письмо будет отправляться вам и дублироваться отправителю.
• Тело письма  — то, как будет выглядеть отправленное письмо, которое придёт на ваш почтовый ящик. Прикреплённые файлы — если в шаблоне формы вы добавили кнопку для прикрепления файлов, добавьте здесь почтовые теги типа [file], чтобы получить эти файлы.

Шаг 5. Настройте уведомления при отправке формы

На вкладке «Уведомления при отправке формы» вы можете настроить уведомления, которые видит посетитель в различных ситуациях.

Некоторые сообщения — это уведомления о состоянии отправки контактной формы. Например, при успешной отправке пользователь получит сообщение «Спасибо за ваше сообщение. Оно успешно отправлено», а при ошибке отправки — «При отправке сообщения произошла ошибка. Пожалуйста, попробуйте ещё раз позже». Другие сообщения — это уведомления об ошибках заполнения формы «Поле слишком короткое» или «Введён некорректный URL-адрес».

В уведомлениях можно использовать только текст. Но также можно добавить почтовые теги. Например, настройте уведомление «Спасибо, [your-name], вы отправили форму!» Когда пользователь при заполнении формы введёт своё имя [your-name], то в сообщении при отправке тег заменится на его имя.

Сохраните отредактированную форму.

Готово, вы настроили и сохранили форму.

Шаг 6. Добавьте форму на сайт

1. 1.

   Перейдите на вкладку Contact Form 7 — Контактные формы. Рядом с вашей контактной формой находится шорткод. Скопируйте его:

2. 2.

   Добавьте шорткод на страницу сайта или запись в редакторе:

3. 3.

   Добавленная форма (здесь стандартная) будет выглядеть в режиме предпросмотра и на сайте таким образом:

Готово, вы добавили контактную форму WordPress Contact Form 7 на сайт. Теперь посетители сайта смогут воспользоваться ей, а данные со всех заполненных форм придут на ваш email.

Помогла ли вам статья?

Да

6 раз уже помогла

Contact Form 7 — Плагин для WordPress

• Детали
• Отзывы
• Установка
• Поддержка
• Разработка

Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.

Документация и поддержка

Документация, ЧаВо и подробная информация о Contact Form 7 расположена на contactform7.com. Если вам не удаётся найти ответ на ваш вопрос в разделе FAQ или в документации, вам стоит проверить форум поддержки на WordPress.org. Если на форуме также ничего не нашлось, создайте там новый запрос.

Contact Form 7 нужна Ваша поддержка

Если вам нравится использовать Contact Form 7, и вы находите его полезным, пожалуйста, рассмотрите возможность сделать пожержтвование. Пожертвования стимулируют развитие проекта и помогают предоставлять пользовательскую поддержку на более высоком уровне.

Уведомление о конфиденциальности

В стандартной конфигурации, данный плагин сам не будет:

• следить тайно за пользователями;
• записывать любые персональные данные пользователей в базу данных;
• отправлять никакие данные на внешние серверы;
• использовать куки.

При активации некоторых функций данного плагина, персональные данные пользователей, заполняющих контактные формы, включая их IP адреса, могут быть отправлены провайдеру услуг. Поэтому рекомендуется принятие политики обработки персональных данных провайдера. Список таких функций включает в себя:

• reCAPTCHA (Google)
• Akismet (Automattic)
• Постоянный контакт: Endurance International Group
• SendinBlue
• Stripe

Рекомендуемые плагины

Следующие плагины рекомендуются для пользователей Contact Form 7:

• Flamingo от Takayuki Miyoshi — С Flamingo, вы можете сохранить в базе данных сообщения, отправленные через контактные формы.
• Bogo от Takayuki Miyoshi — это самый настоящий плагин мультиязычности, который не добавляет головной боли.

Переводы

Перевод Contact Form 7 осуществлён на translate.wordpress.org.

• Настройки ‘Contact Form 7’ в консоли WordPress.

Этот плагин предоставляет 1 блок.

• Contact Form 7

1. Загрузите всю папку contact-form-7 в директорию /wp-content/plugins/.
2. Активируйте плагин в меню Плагины (Плагины и Установленные плагины).

Вы найдете меню Contact в вашей панели администрирования WordPress.

Чтобы узнать как правильно пользоваться плагином вы можете посетить его домашнюю страницу.

У Вас есть какие-либо вопросы или проблемы с Contact Form 7? Используйте эти каналы поддержки.

1. Документация
2. FAQ
3. Форум поддержки

Поддержка

Franchement j’ai testé plein de plugin divers et varié pour des formulaires, mais je reviens souvent sur CF7 car il met permet vraiment de faire un form très personnalisé.

Good functionality

Wide variety of useful functions, installing other additional plugins, design, fields, rules, function… Create forms through code.

Wha haji tu akhri hn. kya kmal plugin banna deti.

It’s probably the best free plugin for simple contact forms. I’m using it on every website where contact forms with few fields need to be implemented. However, I don’t recommend the plugin if you have more complex scenarios, because can be easily non-compatible with third-party plugins. For instance, in a work application with tens of fields, the CF7 and the signature plugin were could not work together, so I switched to a premium plugin. Luckily, I found Forminator plugin, and for a less than $100 yearly, I have a fully functional job application form that works perfectly with my current WordPress version, and on every device. Like I said, CF7 is great for simple forms, but for more complex ones, I don’t recommend it.

I have used this plugin by its number of download, but after configuration it messup with error message for require fields, and its difficult to manage it style, i will not use this plugin again for any of my websitess. there is no option to upload screen here..

Посмотреть все 1 980 отзывов

«Contact Form 7» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

• Takayuki Miyoshi

«Contact Form 7» переведён на 64 языка. Благодарим переводчиков за их работу.

Перевести «Contact Form 7» на ваш язык.

Заинтересованы в разработке?

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

Для получения дополнительной информации смотрите Релизы.

5.6.4

https://contactform7.com/contact-form-7-564/

5.6.3

https://contactform7.com/contact-form-7-563/

5.6.2

https://contactform7.com/contact-form-7-562/

5.6.1

https://contactform7.com/contact-form-7-561/

5.6

https://contactform7.com/contact-form-7-56/

5.5.6

https://contactform7.com/contact-form-7-556/

5.5.5

https://contactform7.com/contact-form-7-555/

5.5.4

https://contactform7.com/contact-form-7-554/

5.

5.3

https://contactform7.com/contact-form-7-553/

5.5.2

• REST API: Удалена ссылка на схему аргументов, вызывающая ошибку, когда форма имеет поле ‘id’.
• Изменяет имена методов, которые зарезервированы в PHP 5.6.

5.5.1

• Исправлено: В имени константы класса PHP использовалось зарезервированное ключевое слово.
• Исправлено: Uncaught TypeError при вызове <code>in_array()</code>.

5.5

https://contactform7.com/contact-form-7-55/

Мета

• Версия: 5.6.4
• Обновление: 2 недели назад
• Активных установок: 5+ млн
• Версия WordPress: 5.9 или выше
• Совместим вплоть до: 6.1
• Языки:

  Albanian, Arabic, Azerbaijani, Belarusian, Bosnian, Bulgarian, Catalan, Chinese (China), Chinese (Taiwan), Croatian, Czech, Danish, Dutch, Dutch (Belgium), English (Australia), English (Canada), English (New Zealand), English (South Africa), English (UK), English (US), Estonian, Finnish, French (Belgium), French (Canada), French (France), Galician, German, German (Switzerland), Greek, Gujarati, Hebrew, Hungarian, Indonesian, Italian, Japanese, Korean, Kurdish (Sorani), Lithuanian, Norwegian (Bokmål), Norwegian (Nynorsk), Occitan, Persian, Polish, Portuguese (Angola), Portuguese (Brazil), Portuguese (Portugal), Romanian, Russian, Serbian, Slovak, Slovenian, Spanish (Argentina), Spanish (Chile), Spanish (Colombia), Spanish (Costa Rica), Spanish (Ecuador), Spanish (Mexico), Spanish (Peru), Spanish (Spain), Spanish (Venezuela), Swedish, Turkish, Ukrainian, Vietnamese и Welsh.

  Перевести на ваш язык

• Метки:

  contactcontact formemailfeedbackform

• Дополнительно

Оценки

Посмотреть все

• 5 звёзд 1 372
• 4 звезды 136
• 3 звезды 64
• 2 звезды 55
• 1 звезда 354

Войдите, чтобы оставить отзыв.

Участники

• Takayuki Miyoshi

Поддержка

Решено проблем за последние 2 месяца:

118 из 387

Перейти в форум поддержки

Пожертвование

Would you like to support the advancement of this plugin?

Пожертвовать на развитие плагина

Контактная форма 7 | Просто еще один плагин контактной формы для WordPress.

Простой, но гибкий.

Релизы

19 октября 2022 г. Такаюки Миёси

Контактная форма 7 5.6.4 теперь доступна. Это отладочная версия, которая включает в себя несколько улучшений и исправлений ошибок.

Продолжить чтение Контактная форма 7 5.6.4 →

Релизы

1 сентября 2022 г. Такаюки Миёси

Контактная форма 7 5.6.3 теперь доступна. Это отладочная версия, которая включает в себя несколько улучшений.

Продолжить чтение Контактная форма 7 5.6.3 →

Безопасность

16 августа 2022 г. Такаюки Миёси

В Интернете можно найти множество дополнительных модулей для Contact Form 7. Вы также можете предположить, что они связаны или сертифицированы разработчиками контактной формы 7, но это не так. Это сторонние продукты, которые не имеют ничего общего с проектом Contact Form 7.

Мы не рекомендуем ни один из них. На самом деле известно, что некоторые из них имеют серьезные уязвимости в системе безопасности, поэтому мы настоятельно рекомендуем вам избегать их использования.

Читать далее Предупреждение об использовании уязвимых надстроек →

Релизы

10 августа 2022 г. Такаюки Миёси

Контактная форма 7 5.6.2 теперь доступна. Это отладочная версия, которая включает в себя несколько улучшений и исправлений ошибок.

Продолжить чтение Контактная форма 7 5.6.2 →

Релизы

19 июля 2022 г. Такаюки Миёси

Контактная форма 7 5.6.1 теперь доступна. Это отладочный выпуск, который включает в себя несколько улучшений, исправлений ошибок и новое правило config-validator.

Продолжить чтение Контактная форма 7 5. 6.1 →

Релизы

17 июня 2022 г. Такаюки Миёси

Контактная форма 7 версии 5.6 теперь доступна. Большое разнообразие новых изменений и улучшений было объяснено в объявлении о выпуске контактной формы 7 5.6-Beta. Вы также можете просмотреть полный список изменений на GitHub.

Продолжить чтение Контактная форма 7 5.6 →

Релизы

20 мая 2022 г. Такаюки Миёси

Contact Form 7 Выпуск версии 5.6 запланирован на 17 июня. Поскольку версия 5.6 содержит большие изменения, мы выпускаем бета-версию 5.6 для тестирования.

Продолжить чтение Контактная форма 7 5.6 Бета →

Релизы

23 февраля 2022 г. Такаюки Миёси

Контактная форма 7 5.5.6 теперь доступна. Это отладочная версия, которая включает в себя несколько улучшений и исправлений ошибок.

Предупреждение. Пользователям Constant Contact требуется действие

Этот выпуск также включает некоторые важные изменения в модуль интеграции Constant Contact, необходимые для работы с новым API авторизации Constant Contact. Если вы используете постоянный контакт, имейте в виду, что вам необходимо обновить свои приложения на панели управления постоянным контактом и повторно создать подключения к новым приложениям из этого плагина.0087 Интеграция экран. Рекомендуется внимательно проверять объявление от Constant Contact.

Продолжить чтение Контактная форма 7 5.5.6 →

Релизы

13 февраля 2022 г. Такаюки Миёси

Контактная форма 7 5.5.5 теперь доступна. Это отладочный выпуск, в основном решающий несколько проблем, о которых сообщили некоторые пользователи.

Продолжить чтение Контактная форма 7 5.5.5 →

Релизы

20 января 2022 г. Такаюки Миёси

Контактная форма 7 5.5.4 теперь доступна. Улучшение модулей интеграции продолжается. В этом релизе в модулях интеграции Sendinblue и Constant Contact появилась функция двойной подписки.

Продолжить чтение Контактная форма 7 5.5.4 →

Начало работы с контактной формой 7

Такаюки Миёси

Это руководство представляет собой введение в плагин Contact Form 7 для WordPress. Необходимы базовые знания администрирования WordPress. В этом руководстве на различных примерах объясняется, как отобразить форму на странице и как настроить формы и почту.

Отображение формы

Начнем с отображения формы на вашей странице. Сначала откройте меню Contact > Contact Forms на экране администратора WordPress. Там вы можете управлять несколькими контактными формами.

Сразу после установки плагина Contact Form 7 вы увидите форму по умолчанию с именем «Контактная форма 1» и такой код:

 [contact-form-7 title="Контактная форма 1"] 

Копировать этот код. Затем откройте меню редактирования страницы ( Страницы > Все страницы ), в который вы хотите поместить контактную форму. Популярной практикой является создание страницы с именем «Контакты» для страницы контактной формы. Вставьте скопированный код в содержимое страницы.

Контактная форма 7 5.3 и более поздние версии поддерживают блок выбора контактной формы для редактора блоков. Этот блок позволяет вам просто выбрать контактную форму из списка определенных вами контактных форм, вместо того, чтобы копировать и вставлять шорткоды.

Скриншот блока селектора контактных форм

Шорткоды контактных форм по-прежнему доступны, и вы найдете их весьма полезными, когда хотите добавить настраиваемые атрибуты или когда у вас слишком много контактных форм для отображения в одном списке.

Теперь настройка вашей контактной формы завершена. Теперь посетители вашего сайта могут найти форму и начать отправлять вам сообщения.

Теперь давайте посмотрим, как вы можете настроить форму и содержимое почты.

Настройка формы

Вам может показаться, что форма по умолчанию слишком проста для вас, и вы хотите добавить в нее больше полей. Вы можете редактировать шаблон формы на экране администратора.

Чтобы добавить поля в форму, сделайте для них теги и вставьте их в шаблон формы в 9Панель вкладок формы 0087 . В шаблоне формы вы найдете незнакомые коды, например, [текст* ваше имя] . Эти коды называются «тегами» в словаре контактной формы 7.

Тег имеет довольно сложный синтаксис, но не беспокойтесь! Вам не нужно этому учиться. Вы можете использовать инструменты генератора тегов, чтобы сгенерировать столько тегов, сколько хотите.

Второе слово в теге — это его имя. Например, имя [текст* ваше имя] — это «ваше имя». Это имя важно, поскольку оно используется позже в вашем почтовом шаблоне.

Настройка почты

Вы можете редактировать почтовые шаблоны на панели вкладок Почта так же, как вы делали это с шаблоном формы.