Как добавить контактную форму в WordPress
Чтобы посетители вашего сайта могли с вами связаться, можно добавить на сайт свой номер телефона или адрес электронной почты. Пользователю придётся совершить несколько действий: набрать ваш номер или адрес, позвонить и оформить сообщение. Однако этот процесс можно упростить — добавить на сайт контактную форму обратной связи.
Обычно контактная форма состоит из нескольких полей, которые нужно заполнить. Например: «Имя», «Адрес электронной почты», «Текст сообщения». Через контактную форму пользователям будет удобнее с вами связаться: они заполнят необходимые поля и отправят форму в один клик, не нужно звонить или отправлять сообщение на email. Кроме того, посетители смогут подписаться на рассылку вашего сайта, оставить отзыв, заказать товар или услугу.
Для добавления контактных форм на сайт WordPress нужны плагины. Плагинов для добавления контактных форм для WordPress существует огромное множество, но мы расскажем о самом популярном — плагин Contact Form 7.
Его установили уже более трёх миллионов пользователей, и он регулярно обновляется. После установки вы сможете добавлять на сайт формы обратной связи. Если вы хотите добавить на сайт на WordPress форму заказа, плагин Contact Form 7 также отлично подойдёт.
Шаг 1. Установите плагин Contact Form 7
- 1.
Войдите в панель управления WordPress.
- 2.
Перейдите на вкладку Плагины — Добавить новый. В поисковой строке введите Contact Form 7 и нажмите Установить:
- 3.
После установки нажмите Активировать:
Готово, вы установили и активировали плагин.
Шаг 2. Создайте форму обратной связи
- 2.
Введите имя новой формы в поле «Введите заголовок».
- 3.
Если вы не хотите вносить изменения в шаблон, нажмите Сохранить и переходите к настройкам письма — шагу 4. Если же вы хотите отредактировать её, то переходите на следующий шаг 3.
org/HowToStep»>
1.Перейдите на появившуюся после установки вкладку Contact Form 7 — Добавить новую. На вкладке «Шаблон формы» откроется редактор формы с уже готовым стандартным шаблоном:
Шаг 3. Настройте шаблон формы
В стандартном шаблоне в форму добавлены поля «Ваше имя», «Ваш e-mail», «Тема», «Сообщение» и кнопка Отправить.
Для Contact Form 7 настройка шаблона выглядит следующим образом. В редакторе шаблона можно использовать HTML-код и так называемые теги формы. Теги формы — это шорткоды (короткие коды), которые при публикации преобразуются в HTML-код и добавляют поля формы.
Также существуют теги почты для настройки электронной почты. Рассмотрим синтаксис тегов формы и тегов почты.
Синтаксис тега формы
Пример тега формы: [text text-name “Enter your name”].
Он состоит из четырёх частей:
- Тип (в примере — text) — определяет тип элемента. Если поставить звёздочку после типа, то поле будет обязательным к заполнению: [text* ].
- Имя (text-name) — название поля ввода.
- Значение («Enter your name») — необязательно для добавления. Используется для значений по умолчанию, которые находятся в поле (подсказка, что вводить в поле пользователю).
Теги формы вы можете выбрать из списка и добавить их в контактную форму:
Рассмотрим поля, которые можно добавить:
- текст — текстовое поле для ввода текста только в одну строку, Например: имя, тема сообщения.
- email – адрес электронной почты.
- URL — адрес сайта или страницы.
- телефон — числовое поле для ввода номера телефона.
- номер — числовое поле для ввода (например, количества заказываемого товара).
- дата — дата в формате дд.мм.гггг.
- текстовая область — поле для ввода текста в несколько строк. Например, отзыв или сообщение от посетителя.
- в раскрывающемся меню — выпадающее меню, здесь можно добавить несколько пунктов меню для выбора. Пользователь может выбрать только один пункт.
- чекбоксы – чекбоксы, в которых можно выбрать один пункт, несколько или ни одного.
- радио кнопка – она похожа на чекбокс — предоставляются варианты для выбора. Пользователь обязательно должен выбрать один вариант из предложенных.
- принятие – чекбокс. Пока пользователь не поставит галочку (например, о том, что он согласен с правилами обработки персональных данных), кнопка отправки сообщения будет неактивна.
- опрос — CAPTCHA, чтобы убедиться, что форму отправил человек, а не робот. Вы можете задать здесь контрольный вопрос, на который нужно ответить перед отправкой формы. Только когда будет введён правильный ответ, кнопка отправки активируется.
- файл — создание кнопки для выбора файла, который можно прикрепить к письму.
- отправить — кнопка, при нажатии на которую отправляется форма.
Только когда будет введён правильный ответ, кнопка отправки активируется.Посмотрите, как можно применить все инструменты, на примере. Ниже приведён код с тегами формы и результат — получившаяся форма заказа Вордпресс:
Синтаксис тега почты
Почтовый тег состоит только из одного слова. Это слово обычно соответствует имени тега формы. Например: [your-name]. Используется при настройке шаблона письма (шаг 4).
Шаг 4. Настройте шаблон письма
Если посетитель вашего сайта заполнит форму и отправит её, то на ваш электронный адрес придёт сообщение с этой формы.
Вы можете настроить это сообщение на вкладке «Письмо». При редактировании используйте почтовые теги:
- Кому — введите здесь свой адрес электронной почты, на который будут отправляться все отправленные формы.
- Тема — тема сообщения, которую вводит пользователь.
- Additional headers — по желанию добавьте дополнительные заголовки. Например:
Reply-To: [your-email]— тогда письмо будет отправляться вам и дублироваться отправителю. - Тело письма — то, как будет выглядеть отправленное письмо, которое придёт на ваш почтовый ящик.
Прикреплённые файлы — если в шаблоне формы вы добавили кнопку для прикрепления файлов, добавьте здесь почтовые теги типа
[file], чтобы получить эти файлы.
Шаг 5. Настройте уведомления при отправке формы
На вкладке «Уведомления при отправке формы» вы можете настроить уведомления, которые видит посетитель в различных ситуациях.
Некоторые сообщения — это уведомления о состоянии отправки контактной формы. Например, при успешной отправке пользователь получит сообщение «Спасибо за ваше сообщение.
Оно успешно отправлено», а при ошибке отправки — «При отправке сообщения произошла ошибка. Пожалуйста, попробуйте ещё раз позже». Другие сообщения — это уведомления об ошибках заполнения формы «Поле слишком короткое» или «Введён некорректный URL-адрес».
В уведомлениях можно использовать только текст. Но также можно добавить почтовые теги. Например, настройте уведомление «Спасибо, [your-name], вы отправили форму!» Когда пользователь при заполнении формы введёт своё имя [your-name], то в сообщении при отправке тег заменится на его имя.
Сохраните отредактированную форму.
Готово, вы настроили и сохранили форму.
Шаг 6. Добавьте форму на сайт
- 1.
Перейдите на вкладку Contact Form 7 — Контактные формы. Рядом с вашей контактной формой находится шорткод. Скопируйте его:
- 2.
Добавьте шорткод на страницу сайта или запись в редакторе:
- 3.
Добавленная форма (здесь стандартная) будет выглядеть в режиме предпросмотра и на сайте таким образом:
Готово, вы добавили контактную форму WordPress Contact Form 7 на сайт. Теперь посетители сайта смогут воспользоваться ей, а данные со всех заполненных форм придут на ваш email.
Помогла ли вам статья?
Да
6 раз уже помогла
Топ плагинов WordPress для создания онлайн форм
Онлайн форма незаменимый инструмент абсолютно любого сайта. Это самый главный источник связи с посетителями вашего сайта. Формы позволяют собирать обратную связь, проводить опросы, делать email подписки, собирать платежи клиентов и многое другое. Если вы знаете программирование, то без труда можете создать форму для сайта. В остальных случаях есть множество хороших плагинов, которые могут быть легко установлены на сайт и использоваться для создания форм.
stepFORM
stepFORM — WordPress плагин для создания форм любой сложности на базе визуального конструктора. В нем есть встроенная защита от спама, сбор ответов на email и CRM, интеграция с Google Analytics и Яндекс.Метрика, расчет стоимости по формулам, прием оплат на PayPal, Wallet One, Яндекс.Деньги и Яндекс.Касса, использование формы по ссылке в соцсетях и многое другое.
Установить плагин
uCalc
uCalc — популярный плагин WordPress для создания форм расчетов различной степени сложности. Плагин отлично подойдет для форм, в которых необходимо не только получать информацию от посетителей сайта, но и производить автоматические расчеты по формулам или принимать оплаты клиентов за продажу товаров или услуг. Плагин подключается в несколько кликов и не требует знаний программирования. Добавление формы расчета происходит при редактировании страницы или публикации.
Установить плагин
Contact Form 7
Contact Form 7 — один из самых популярных плагинов для создания форм на WordPress.
С помощью этого плагина вы можете очень гибко настраивать содержимое форм и настраивать отправку данных на почту. Формы включают в себя ajax отправку, а также Captcha и Akismet против спама.
Установить плагин
WPForms
WPForms позволяет создавать красивые формы обратной связи, формы подписки, формы оплаты и другие формы для вашего сайта в считанные минуты. WPForms будут отлично смотреться на всех устройствах (мобильных, планшетных, портативных и настольных).
Установить плагин
Ninja Forms
Ninja Forms помогает создавать онлайн формы для WordPress за считаные минуты с помощью простого перемещения полей формы используя мышь. Для разработчиков можно использовать встроенные хуки, фильтры и пользовательские шаблоны полей, чтобы делать все, что нужно, на любом этапе создания или отправки формы с использованием форм Ninja в качестве основы.
Установить плагин
Form Maker
Form Maker создает адаптивные формы для WordPress через простой и понятный интерфейс.
Установить плагин
Caldera Form
Caldera Form — это бесплатный и мощный плагин для WordPress, который создает адаптивные формы с помощью простого визуального редактора. Плагин имеет множество бесплатных удобных дополнений как для начинающих, так и для веб-разработчиков. Антиспам, AJAX, электронные письма с уведомлениями и отслеживание записей в базе данных включены по умолчанию.
Установить плагин
Visual Form Builder
Visual Form Builder — это плагин, который позволяет вам создавать и управлять всеми видами форм для вашего сайта в одном месте. Создание полнофункциональной контактной формы занимает всего несколько минут, и вам не нужно писать ни капли PHP, CSS или HTML.
Установить плагин
В этот список вошли самые популярные плагины WordPress для создания онлайн форм. Если вы используете другие интересные плагины, которых нет в данном списке, то пишите в комментариях.
форм WordPress для некоммерческих организаций
Мы с гордостью предлагаем некоммерческим организациям специальные лицензии со скидкой.
Если вы некоммерческая организация, мы хотим помочь вашей миссии.
Мы знаем, что тысячи организаций неустанно работают над тем, чтобы сделать мир лучше. И мы благодарим вас за то, что вы являетесь чемпионами своих индивидуальных миссий.
Мы хотели бы предложить вам значительную скидку на два самых мощных плана, чтобы у вас были все инструменты для достижения успеха и успешного выполнения вашего дела.
WPForms Pro за 99 долларов в год — 75% от обычной цены
WPForms Elite за 199 долларов в год — 66% от обычной цены .
Для нас важно, чтобы самые мощные и простые в использовании формы WordPress для некоммерческих организаций были доступны каждому.
Для начала заполните короткую заявку ниже, чтобы мы могли убедиться, что ваша некоммерческая организация соответствует требованиям.
Часто задаваемые вопросы
Чтобы помочь ответить на ваши вопросы, связанные со скидкой WPForms для некоммерческих организаций, мы составили удобный FAQ.
В чем разница между некоммерческой лицензией и обычной лицензией?
Все некоммерческие лицензии имеют ограничение на 5 сайтов. Функции, надстройки и поля, которые вы можете использовать, такие же, как и у обычной лицензии WPForms. Вы можете увидеть разбивку всех наших функций и лицензий на нашей странице с ценами.
Как создать форму пожертвования в WordPress?
Формы для пожертвований WordPress легко создавать с помощью WPForms.
У нас есть более 300 шаблонов форм WordPress, которые помогут вам начать работу, в том числе:
- Шаблон простой формы пожертвования
- Шаблон формы пожертвования, который позволяет вашему посетителю выбрать разовые или регулярные платежи
- Шаблон формы запроса на пожертвование
- Шаблон формы краудфандинга
- Шаблон регистрационной формы для сбора средств
Вы можете легко настроить любой из этих шаблонов с помощью нашего простого конструктора перетаскивания.
После того, как форма настроена так, как вы хотите, вы можете подключить ее к платежному дополнению по вашему выбору.
Если вы хотите создать свою собственную форму пожертвования в WordPress, ознакомьтесь с этим пошаговым руководством о том, как создать форму для некоммерческого пожертвования.
Какие платежные системы поддерживает WPForms?
Наша лицензия Pro позволяет принимать платежи в любой форме, используя 3 платежных модуля:
- Stripe
- Площадь
- Стандарт PayPal
Если вы выберете лицензию Elite, вы также сможете принимать платежи с помощью Authorize.Net.
Взимают ли поставщики платежей комиссию с некоммерческих организаций?
Да, платежные системы обычно взимают комиссию за обработку пожертвований. Однако некоторые поставщики платежей предлагают специальные тарифы для некоммерческих организаций.
- Stripe и PayPal имеют одинаковую некоммерческую ставку 2,2% + 0,30 доллара США за транзакцию. Они не берут ежемесячную плату. Для получения более подробной информации о различиях между этими двумя поставщиками платежей прочитайте наш пост о Stripe и PayPal.
- Square взимает 2,6% + 0,10 доллара США за транзакцию для платежей, сделанных основными кредитными картами.
Они не берут ежемесячную плату. Для получения более подробной информации о различиях между этими двумя поставщиками платежей прочитайте наш пост о Stripe и PayPal.Более подробную информацию можно найти на веб-сайте провайдера. Обратите внимание, что вам, возможно, придется подтвердить свой некоммерческий статус у выбранного вами поставщика услуг.
Как настроить страницу пожертвований в WordPress?
Создать новую страницу пожертвований в WordPress очень просто. WPForms позволяет публиковать формы на любой странице без написания кода.
Мы также упрощаем создание форм и их публикацию в Elementor.
Кроме того, мы составили список примеров страниц пожертвований, которые помогут вам вдохновить вашу онлайн-страницу по сбору средств. У вас есть это!
Могу ли я делать пожертвования по желанию?
Да, вы можете сделать платежи необязательными в своей форме, если хотите.
Если вы хотите использовать несколько поставщиков платежных услуг, вы также можете позволить своему посетителю выбрать предпочтительный способ оплаты при совершении пожертвования.
Что делать, если у меня остались вопросы?
Хотите узнать больше о ценах на WPForms для некоммерческих организаций? Будем рады помочь. Свяжитесь с нами.
плагинов, отнесенных к категории форм | WordPress.org
Contact Form от WPForms – конструктор форм перетаскивания для WordPress
Лучший плагин контактной формы WordPress. Конструктор онлайн-форм перетаскивания, который поможет вам…
WPForms 5+ миллионов активных установок Протестировано с 6.1.1 Обновлено 1 неделю назад
Контактная форма Ninja Forms – Конструктор форм перетаскивания для WordPress
На 100 % удобный для начинающих конструктор форм WordPress. Перетаскивайте поля форм, чтобы создавать красивые,…
Субботний проезд 900 000+ активных установок Протестировано с 6.
0.3 Обновлено 2 месяца назадFormidable Forms — контактная форма, опрос, викторина, калькулятор и конструктор пользовательских форм
Самый продвинутый плагин форм WordPress. Выйдите за рамки контактных форм с помощью перетаскивания…
Команда разработчиков форм Strategy11 300 000+ активных установок Протестировано с 6.1.1 Обновлено 2 недели назад
Forminator — контактная форма, форма оплаты и конструктор пользовательских форм
Лучший плагин для создания форм WordPress. Создавайте контактные формы, платежные формы и формы заказов с 1000+…
РАЗРАБОТКА WPMU 300 000+ активных установок Протестировано с 6.1.1 Обновлено 2 дня назад
CMB2
CMB2 — это библиотека метабоксов, настраиваемых полей и форм для WordPress, которая поразит вас…
Команда CMB2 300 000+ активных установок Протестировано с 5.9.5 Обновлено 9 месяцев назад
Плагин контактной формы — самый быстрый плагин для создания контактных форм для WordPress от Fluent Forms
Самый быстрый плагин для создания контактных форм для WordPress.
Перетащите плагин конструктора контактных форм…
Контактная форма — WPManageNinja LLC 200 000+ активных установок Протестировано с 6.1.1 Обновлено 5 дней назад
Условные поля для контактной формы 7
Добавляет условную логику в контактную форму 7.
Жюль Колле Более 100 000 активных установок Протестировано с 6.0.3 Обновлено 1 месяц назад
Плагин контактной формы — простой конструктор форм перетаскивания для WordPress — Everest Forms
Быстрый, легкий и безопасный плагин контактной формы. Красивые и отзывчивые готовые шаблоны. Создать контакт, бронирование,…
WPЭверест Более 100 000 активных установок Протестировано с 6.1.1 Обновлено 2 дня назад
Crowdsignal Формы
Плагин Crowdsignal Forms позволяет создавать опросы и управлять ими прямо из…
Автоматический Более 100 000 активных установок Протестировано с 5.8.6 Обновлено 3 месяца назад
Информационный бюллетень, SMTP, электронный маркетинг и формы подписки от Sendinblue
Управляйте своими списками контактов, формами подписки и всеми темами, связанными с электронной почтой и маркетингом, из вашего wp…
Сендинблю Более 100 000 активных установок Протестировано с 6.
1.1 Обновлено 1 неделю назадКонтактная форма и плагин SMTP для WordPress от PirateForms
Простая и эффективная контактная форма WordPress и плагин SMTP. Совместимость с лучшими темами…
WPForms 80 000+ активных установок Протестировано с 4.9.22 Обновлено 3 года назад
Form Maker от 10Web – удобный для мобильных устройств конструктор контактных форм с перетаскиванием
Form Maker — это удобный конструктор контактных форм, который позволяет создавать формы для любых…
10Команда разработчиков веб-форм 70 000+ активных установок Протестировано с 6.1.1 Обновлено 2 недели назад
Gravity PDF
Автоматически создавайте, отправляйте по электронной почте и загружайте PDF-документы с помощью Gravity Forms и Gravity PDF.
Синий жидкий дизайн 50 000+ активных установок Протестировано с 6.1.1 Обновлено 1 неделю назад
Visual Form Builder
Создавайте красивые, полнофункциональные контактные формы всего за несколько минут без написания PHP, CSS,…
Мэтью Муро 50 000+ активных установок Протестировано с 6.
0.3 Обновлено 6 месяцев назадGoDaddy Email Marketing
Добавьте плагин GoDaddy Email Marketing на свой сайт WordPress! Простота настройки,…
GoDaddy 50 000+ активных установок Протестировано с 5.7.8 Обновлено 1 год назад
Конструктор форм для связи с посетителями, расширения списка адресов электронной почты и сбора платежей — Happyforms
Контактная форма, форма новостной рассылки и конструктор платежных форм без лишних вещей — потерянные электронные письма,…
Хэппиформс 40 000+ активных установок Протестировано с 6.1.1 Обновлено 2 недели назад
Конструктор контактных форм с функцией перетаскивания для WordPress – Kali Forms
Создайте идеальную контактную форму для своего веб-сайта WordPress за считанные минуты с помощью Drag &…
Формы Кали 30 000+ активных установок Протестировано с 6.0.3 Обновлено 2 недели назад
WP User Frontend — Плагин членства, профиля, регистрации и отправки сообщений для WordPress
Отправка сообщений внешнего интерфейса, гостевой пост, членство, вход в систему, регистрация и создание профиля.