Как сделать форму обратной связи на wordpress
Обновлено: 07.07.2024
Навигация по странице:
Обратная связь - это функционал сайта, который позволяет пользователям общаться с хозяином ресурса или его представителями. К ней можно отнести:
- разного рода формы;
- онлайн чаты;
- частично комментарии и отзывы.
Для того, чтоб на сайте появилась форма обратной связи надо прилично потрудится, если вы это делаете без плагина или же надо потратить время на то, чтобы найти плагин и разобраться в его работе.
Конечно можно использовать комментарии для общения со своими посетителями, однако это не всегда удобно, как минимум для самих пользователей, которые желают обсудить проблему без лишних читателей. Сейчас, мы будем говорить только о формах обратной связи WordPress, о том как можно их создать на вашем сайте, а также о выборе подходящего плагина обратная связь.
В этом посте я не буду описывать как делается форма обратной связи wordpress и предоставлять код для создания таких форм. Если вы перешли с надеждой скопировать или посмотреть код, то это можно сделать здесь (смотрите таблицу и выберите подходящею вам ссылку для просмотра):
| Нажмите чтобы получить ссылку на пост | Прямая ссылка | Описание поста |
| Получить ссылку на (обратная связь WordPress без плагина) | https://help-wp.ru/obratnaya-svyaz-wordpress-bez-plagina/ | В этой статье описывается механизм создания формы обратной связи на вордпресс без использования плагинов. Здесь вы можете скопировать полностью работающий код и вставить его себе на сайт для того, чтобы проверить как он работает. |
| Получить ссылку на (пошаговая настройка обратной связи на плагине CF7) | https://help-wp.ru/contact-form-7/ | Обратная связь wordpress на базе плагина Contact Form 7. Пошаговая настройка с инструкциями и описанием. Также, вы можете узнать о создании скрытых динамических полей. |
Обратная связь WordPress с плагином
Contact Form 7
Очень популярный плагин для создания обратной связи у wordpress. На сегодня имеет больше 1 миллиона активных инсталов и это число постоянно растет. Новые версии плагина выходят довольно часто, из последних обширных нововведений версия 4.2, которая получила новый дизайн админки, а также дополнительные настройки Contact Form 7.
На этом плагине можно создать обратную связь любой сложности (в плоть до создания калькуляторов) и практически любого дизайна. В платной версии есть защита от спама и множество других примочек.
На всех своих сайтах я использую именно плагин Contact Form 7 для создания форм обратной связи. Благодаря этому плагину (его простым настройкам и их множеству) форма обратной связи получается красивой (если дизайнер сможет ее таковой нарисовать) и отлично работает, так как плагин не один год завоевывает сердца разработчиков и простых пользователей.
Custom Contact Forms
Довольно функциональный плагин, позволяет создавать сложные формы. Благодаря ему обратная связь wordpress приобретает новый окрас. Имеет более 75 000 активных инсталов, а также умеет делать:
- неограниченное число произвольных форм;
- обязательные / необязательные поля;
- редиректы на другие страницы после отправки данных;
- капчу и простую проверку на спам.
Contact Form Plugin by vCita
Очередной плагин для создания контактных форм на Вордпрес. Большим плюсом этого плагина есть автоматическое создание и вывод в один клик popup форм с сохранением возможности вставить обратную связь в виджет или пост. К минусам можно отнести проблемы с русским языком в админке.
Форма обратной связи wordpress на этом плагине делается легко и рассчитанная на пользователей без знаний ПХП.
На сегодняшний день плагин имеет около 10 000 активных установок.
Обратная связь на WordPress без использования плагинов
к менюАльтернативой плагинам для создания обратной связи на WP может быть собственная форма для отправки данных на вашу почту. Вариантов как можно сделать такую форму очень много, для примера приведу краткий список:
- Ajax форма (штатными средствами ВП) с отправкой данных через функцию wp_mail.
- Контактная форма на ajax (без использования обработчика Вордпресс) средствами wp_mail или же функцией PHP mail.
- Форма обратной связи wordpress без использования ajax с перезагрузкой страницы.
На всех этих вариантах создания собственных контактных форм я останавливаться не буду. У меня уже есть пост обратная связь wordpress без плагина и в нем детально с примерами описан один из способов создания собственных форм обратной связи на Вордпресс, прочесть его можно перейдя по ссылке выше.
Большим плюсом собственных форм обратной связи является возможность сделать любой дизайн формы и без проблем вставить в нее нужный код, ведь некоторые плагины ограничивают эту возможность по ряду причин.
Я слышал довольно много аргументов, почему не стоит использовать плагины и что нужно заменять их своей альтернативой. С одной стороны люди, которое это утверждают правы - но, сделать антиспам защиту для своих форм это еще та проблема. Плюс, чем чаще используют плагин тем больше он откатывается на атаках спам ботов и тем более его разработчик защищает. Правда, если его уже взломали то спам посыпется рекой на все сайты WP.
Пробуйте, находите варианты которые устранивают именно вас, пишите отзывы о своем опыте создания обратной связи на wordpress.
Ссылки на статьи, в которых я описывал как делается форма обратная связь wordpress я предоставил в самом верху, также дублирую здесь:
Я пользовалась сначала сервисом stepform, потом создала с помощью кода, без плагинов и сторонних сервисов, но стал приходить спам, думаю вернуться к stepform
Contact Form действительно удобный плагин, с удовольствием использую на своих сайтах уже более 5 лет. Но жаль что там нельзя подключить прием оплат через форму, да и статистику для формы непросто. Стал искать для этих целей плагин, более менее подходящий для меня оказался uCalc. Понравилось, что там интерфейс простой очень и все понятно без заморочек.
Если плагин, то Contact Form 7 это без вопросов, самый простой и хороший. А без плагинов, то я stepFORM использую для всяких формочек.
Здравствуйте! пишу о своём опыте создания формы обратной связи на wordpress. Использую плагин от сервиса formdesigner, всё отлично работает и радует другим функционалом. Могу рекомендовать этот сервис
Спасибо за информацию! Это именно тот сервис, который я так долго искала. Мне нужно было совместить квиз и калькулятор в одной форме и этот конструктор отлично справился с этой задачей! Все супер. Даже настроила интеграцию с гугл таблицей и телеграммом. Стоит своих денег!
Да даже если без плагина, тот тот же Contact Form7 приходится допиливать до использования, когда нужно что-то посложней чем обычные формы. Вот как альтернатива ему, есть плагин Ucalc формы (-url-) Это кто программировать не желает
Ты за чем пишешь что статья называется без плагина, когда у тебя, ни чего об этом ни написано?
Сейчас буду на твою статью Яше жаловаться, помечать как спам, и напишу Платонам, что бы страница в самую ж. опустилось, а то на все готовы что бы лишь бы посетитель пришел, ни стыда ни совести.
Добрый день.
Очень хочется услышать мнение специалиста какая форма обратной связи wordpress лучше: без плагина или с плагином.
У вас на сайте CF7 так понимаю вы ее считаете лучшей? Как насчет самописних форм или вы их не признаете?
Спасибо
Добрый день.
На мой взгляд каждому сайту своя контактная форма, в зависимости от задачи.
У меня на сайте contact form 7 и мне ее хватает. Если бы задача была более специфичной можно было б подумать о самописной форме обратной связи.
Спасибо за статью!
Ребят, попробуйте сервис от (-spam-url-)
Простая установка на любую cms, хорошая поддержка. Не сочтите за рекламу, ссылка не реферальная, просто можно взять и попробовать на тестовый период. А потом уже решить подходит или нет. Цены как у всех, можно пакеты брать, а можно количество клиентов или минут. Лидогенерация очень высокая, а окупаемость быстрая. Может кому пригодиться мой комментарий
Вот еще один неплохой плагин конструктора форм (-spam-url-) от сервиса (-spam-url-). Довольно мощный функционал. Думаю стоит обратить внимание.
Здравствуйте. Было б очень интересно почитать о том как делается выпадающая форма обратной связи wordpress.
Проблема в том что не каждый нормальный плагин умеет это делать. а те что умеют не сильно нормальные. вот и получаются танцы с бубном на ровном месте. постоянные выбор или использовать то что не нравится или использовать то что не умеет.
Мой вам совет: если решили делать на базе плагина - используйте CF7 (на нем тоже можно сделать и выпадающею форму и любую другую); если вам нужна обратная связь wordpress без плагина, то тут все карты вам в руки, делаем механизм на яваскрипте и потом отправляем все на обработку ВП.
С другой стороны, для плагина пожно использовать механизм popup с какого нибудь лайтбокс или фанцибокс.
Вы хотите сказать что выпадающая форма обратная связь wordpress возможна и на плагине contact form 7? Я правильно вас поняла?
Не до конца понимаю тогда как засунуть всю страницу в выпадашку. В сайдбаре шорткод плагина контактной формы не работает.
И НЕ НАДО запихать весь пост в выпадающий блок, чтоб вывести шорткод 🙂 это очень и очень не хорошо.
При создании сайта любого типа важно обеспечить прямой контакт с посетителями. В этом случае удастся наладить с пользователями связь, что заставит их возвращаться на ваш ресурс неоднократно. Сегодня хочу вам рассказать о том, как создать на WordPress форму обратной связи. Мы рассмотрим варианты с использованием плагина и без него, а вы выберете тот, который вам больше подойдет.
В этой статье вы узнаете:
Плагин обратной связи для WordPress
Наиболее простым вариантом использовать обратную связь на сайте, является установка плагина. Лично я выбрала для себя этого вариант, хоть и не приветствую плагины. Для начала нужно скачать плагин Contact Form 7 с официального сайта WordPress. Он достаточно прост в использовании.
В результате появится несколько полей:
Когда вы получите стандартный или более сложный код формы, вставьте его на созданную вами страницу для обратной связи в админке своего сайта.
Как вариант, можете еще испробовать плагин Cforms , он более сложен, но и функций у него больше.
Как создать форму обратной связи WordPress без плагина
Напомню, что каждый новый плагин усложняет работу движка WordPress, что может привести к замедлению его работы. Поэтому покажу вам, как сделать красивую форму обратной связи WordPress без плагина. Не призываю вас выбирать именно этот вариант, это просто альтернатива, и решать вам. Приведенная форма будет достаточно простой, это основной костяк, в который, при желании, вы сможете вносить свои коррективы.
Для начала нужно создать отдельный файл *.php (например, contact.php или mail.php). После создания лучше поместить его в папку с темой шаблона, тогда можно будет его редактировать из админки.
Вот код, который нужно вставить в созданный вами файл php:
После того, как вы создали необходимый файл, его нужно вставить на страницу контактов.
Для этого можно использовать такой код:
Форма обратной связи
Здесь самое важное указать правильный путь к тому файлу php, который вы создали (в нашем случае, это contact.php). В данном коде по своему желанию и вкусу можете менять названия полей, и их ширину.
Если вы захотите придать форме без плагина особый вид, можете использовать разные стили оформления с помощью файла style.css.
Красивая форма обратной связи wordpress
Большой популярностью на моем блоге пользуются статьи, в которых я рассказываю, как сделать оформление элементов блога с помощью css-кода:
Сейчас я покажу, как оформить красиво форму обратной связи для WordPress.
В результате у меня получилось вот так:
Рассмотрим вариант с использованием плагина Contact Form 7. После того, как плагин установлен и настроен, вам потребуется открыть файл style.css вашей активной темы и вставить в конце следующий код:
Как видите, в создании обратной связи на WordPress как с плагином, так и без него, нет ничего сложного.
Если вам нужен более расширенный функционал, и вы не хотите вникать в хитрости кода, используйте для WordPress плагин формы обратной связи. Выберите тот вариант, который вам наиболее подходит для контакта с вашими пользователями.
Добрый день друзья! В этом уроке я научу вас как создать контактную форму на WordPress с помощью плагинов. Форма обратной связи на WordPress служит идеальным решением для тех, кто хочет поддерживать контакт со своей аудиторией или получать заявки на адрес электронной почты на заказ каких-либо услуг. Мы научимся с вами делать всплывающую форму в модальном окне. После прочтения этой статьи вы сможете самостоятельно вставлять форму на свои сайты. Итак, поехали.
Зачем вам нужна контактная форма WordPress?
Вы возможно будете удивлены вопросом почему мне нужна форма обратной связи на сайт вордпресс? Почему бы просто не добавить адрес электронной почты на сайт, чтоб люди просто мне написали?
Это наиболее распространенный вопрос от новичков, которые боятся добавлять код формы на сайт, без знания программирования. По правде сказать вам вообще не нужен код при создании формы обратной связи на WordPress. В этом руководстве мы шаг за шагом создадим контактную форму и сделать ее может даже самый абсолютный новичок.
Ниже приведу 3 главные причины, почему использование формы лучше, чем просто добавить адрес почты на сайт.
Ниже приведен пример контактной формы, которую мы будем создавать в этом пособии.
После создания такой формы мы покажем как ее добавить на страницу с Контактами, а также в сайдбар с помощью произвольного виджета.
Шаг 1: Выбираем лучший плагин формы обратной связи для WordPress
На данном шаге нам необходимо определиться с выбором соответствующего плагина формы. Их существует великое множество как бесплатных, так и платных. В этом уроке я расскажу вам про разные плагины, чтобы у вас богатый был выбор. В первом случае будет задействован плагин WPForms.
Ниже приведены причины по которым WPForms является лучшим плагином обратной связи:
- Во-первых это самый дружелюбный к новичкам плагин. Методом простого перетаскивания нужных блоков вы можете создать контактную форму в несколько кликов.
- WPForms Lite полностью бесплатен.
- Когда же вы будете готовы к более мощному функционалу и если он действительно для вас будет важным, тогда можете перейти на версию Pro.
Отлично, если эти причины оказались достаточными и я вас убедил, тогда движемся вперед.
Шаг 2: Установка плагина контактной формы WordPress
Для этого урока мы используем версию Lite, потому что это бесплатно и удобно в работе. Вы можете установить его войдя в админ панель блога и перейдя в Плагины – Добавить новый.
В строчке поиска набираем название нашего плагина и жмем Install now (Установить сейчас).
После установки плагина убедитесь, что вы его активировали. Это показано здесь:
Если вы вдруг не видите меню плагинов или хотите более детальную инструкции по установке, то переходите на статью – как легко установить плагин в 2 способа
Шаг 3: Создание контактной формы в WordPress
Итак, после успешного завершения активации плагина, самое время создать нашу форму обратной связи. Для этого в панели администратора блога кликните на вкладку WPForms Menu и перейдите в Add New (Добавить новую).
Это позволит открыть вам конструктор Wpforms, где простым перетаскиванием нужных блоков вы можете создать контактную форму обратной связи WordPress. В бесплатной версии Lite доступны два предварительно встроенных шаблона (пустой и простая форма). Вы же можете использовать их вместе, чтобы составить нужную и удобную для вас. В этом примере для вас мы выбрали второй вариант, т.е простой контактной формы. В нее добавим имя, Email и текстовое поле.
Вы можете кликнуть на каждое поле, чтобы отредактировать его. Также с помощью мыши вы можете перетаскивать и менять порядок полей формы.
Если вы хотите добавить новое поле, просто выберите нужно из списка слева и перетащите в рабочую область.
Когда все сделано, просто нажмите кнопку Сохранить (Save).
Шаг 4: Настройка уведомлений и Подтверждений
После того, как вы успешно создали форму обратной связи на WordPress, очень важно правильно настроить формы уведомлений и подтверждений.
Кстати, можете почитать статью на блоге – 301 редирект как настроить. Очень интересная заметка для новичков.
Вы можете настроить оба этих поля, перейдя в Настройки (Setting) внутри плагина конструктора фор WPForms.
Лучшим в этом плагине является то, что настройки, которые идут по умолчанию, просто идеальны для новичков. Им не нужно додумывать, что сделать или что поменять. Все очень интуитивно понятно и просто. Когда вы переходите в настройку уведомлений, все поля будут предзаполнены динамически.
Уведомления по умолчанию отправляются на ту почту, которую в настройках указали вы. Если вы хотите изменить адресат для отправки уведомлений, то его также можно легко изменить. Если хотите указать несколько адресов почты (указываются через запятую), то пожалуйста, карты в руки, как говорится 🙂
Поле Тема email будет автоматически заполнено c вашим именем формы. Поле имя будет браться из имени пользователя (вашего имени). Когда вы будете отвечать на письмо, то оно будет идти на почту с именем пользователя, который заполнил контактную форму.
Шаг 5: Добавление контактной формы WordPress на страницу
Отлично. Теперь сохраняете и страницу и открываете предпросмотр, чтобы увидеть изменения.
Вот как примерно будет выглядеть форма на простой WordPress странице:
Если вы хотите просто добавить форму на страницу, то поздравляю вас. Все шаги сделано успешно. Если вы хотие добавить ее в виде виджета в сайдбар, то продолжение ниже.
Шаг 6: Добавление контактной формы WordPress в сайдбар
Плагин WPForms поставляется с встроенным виджетом формы обратной связи, который вы можете добавить в сайдбар или любую другую область на сайте (например в подвал).
Следующим шагом указываете название виджета и сохраняете. Переходите на сайт и смотрите результат.
На этом обзор нашего плагина формы обратной связи WPForms завершен. Но, специально для вас я подготовил еще обзор одного бесплатного плагина, с помощью которого мы можем сделать всплывающую форму обратной связи и все те же фишки, что и в предыдущем. Называется он Contact Form 7. Он реально очень мощный и козырь его в том, что он полностью БЕСПЛАТЕН!
Его можно также сделать адаптивным, т.е форма обратной связи будет приспосабливаться к размерам экрана вашего устройства.
Так, на всякий случай, чтобы вы знали, что они естьJ
Как сделать контактную форму обратной связи с помощью Contact Form 7
Вкратце расскажу, что нам здесь будет нужно. В первую очередь, нам нужно определиться сколько полей форм мы хотим сделать. Сразу скажу, что 100500 полей делать не нужно и это бессмысленно, по той просто причине, что люди закроют ваш сайт и не оставят заявку. Им нужно упростить этот этап. Т.е если подумать, то нам от человека нужно что:
Это основные данные, другие вы можете уже выяснить в ходе переписки или телефонного разговора. Логично? Я думаю, что да. Движемся дальше.
Создание полей контактной формы в плагине Contact Form 7
Так, с количеством полей определились, теперь нам нужно эти поля создать. Нам доступны следующие табы:
Итак, с полями мы определились, значение каждого вы тоже знаете. Давайте приступим к сборке нашей контактной формы на WordPress.
В примере ниже я использовал 2 поля: Имя, Email. Соответственно вам потребуются эти вкладки:
Нажав на текстовую вкладку (Text) мы попадаем в диалоговое окно:
Здесь нам нужно нажать на галочку Тип Поля – Обязательное. Сделано для того, что если пользователь не введет в него имя, то заявку он вам прислать не сможет, будет ошибка отправки, что не все поля заполнены корректно.
Чтобы вы не запутались я выделил его стилем. Код ниже:
div class = "col-md-4" > label class = "sr-only" > Full Name / label > [ text* text - 658 class : form - control placeholder "Ваше имя" ] / div >
Абсолютно ничем не отличается от предыдущего, просто повторяем наши с вами действия. У меня поле емэйла также имеет стиль. Привожу ниже код:
div class = "col-md-4" > label class = "sr-only" > Full Email / label > [ email* email - 447 class : form - control placeholder "Ваш Email" ] / div >
Важное примечание: Дорогие друзья, в этом примере я использую адаптивные стили для создания контактной формы на WordPress, т. е она может принимать формы любого размера экрана.
Здорово! Теперь нам нужно сохранить нашу новую (в моем примере уже не новую) форму обратной связи.
Кнопку вы увидите в правом верхнем углу. Уж точно не промахнетесь. 🙂
Часть работ мы сделали, теперь переходим к следующему этапу.
Настройка почтового адреса для приема заявок
На этом шаге нам нужно сделать некоторые настройки, чтобы письма уходили именно нам на наш почтовый ящик. Как этого достичь я расскажу ниже.
Первое, что увидите, это ваши теги, которые вы добавили, их нам необходим вставить в тело письма, именно они будут подставлять данные, которые вводит пользователь с формы. Думаю, что объяснил доходчиво.
Теперь по полям:
Теперь нам необходимо настроить уведомления об успешной или неуспешной отправки письма с контактной формы WordPress.
После этого незабываем также сохранить изменения.
Очень хорошо. С настройкой формы мы закончили, теперь необходимо вставить ее на сайт. Для этого по уже известной технологии, зайдем на уже существующую страницу или создадим новую. В своем примере я покажу вам пример существующей формы на странице сайта WordPress.
Так как наша форма собирает заявки на продвижение сайта, то зайдем на аналогичную страницу.
Чтобы вставить нашу контактную форму, нам нужно скопировать, присвоенный ей плагином, шорткод. Он доступен под названием вашей формы.
Копируем и вставляем в нашу страницу, предварительно перейдя в текстовый редактор (не визуальный). Представлено на скриншоте ниже:
Сохраним нашу страницу и посмотрим, что получилось в итоге в браузере:
Произошла ошибка отправки с формы, поскольку пользователь не указал нужные данные в полях. Теперь давайте введем корректные данные и посмотрим, что у нас получится в этом случае.
Теперь посмотрим, как выглядит наша заявка. Они приходят у меня на мэйловскую почту. Проверим доставку:
Зайдем внутрь, чтобы убедиться в корректности кодировки и всех данных.
Все просто отлично. Форма работает исправно и отправляет данные. Теперь мы можем собирать заявки, которые будут приходить вам когда вы займетесь быстрой раскруткой своего сайта, если мы говорим про региональное продвижение.
Итак, мы рассказали как сделать контактную форму на WordPress на странице сайта. Сейчас я расскажу как сделать всплывающую адаптивную форму обратной связи с помощью нашего плагина Contact form 7.
Делаем всплывающую адаптивную контактную форму обратной связи на WordPress
Наша всплывающая форма будет отображаться в модальном диалоговом окне примерно так:
Чтобы достичь этого результата вам понадобится следующий код, я представлю его полностью в сниппете:
Для добавления контактных форм на сайт WordPress нужны плагины . Плагинов для добавления контактных форм для WordPress существует огромное множество, но мы расскажем о самом популярном — плагин Contact Form 7. Его установили уже более трёх миллионов пользователей, и он регулярно обновляется. После установки вы сможете добавлять на сайт формы обратной связи. Если вы хотите добавить на сайт на WordPress форму заказа, плагин Contact Form 7 также отлично подойдёт.
Шаг 1. Установите плагин Contact Form 7
Перейдите на вкладку Плагины — Добавить новый. В поисковой строке введите Contact Form 7 и нажмите Установить:
После установки нажмите Активировать:
Готово, вы установили и активировали плагин.
Шаг 2. Создайте форму обратной связи
Если вы не хотите вносить изменения в шаблон, нажмите Сохранить и переходите к настройкам письма — шагу 4. Если же вы хотите отредактировать её, то переходите на следующий шаг 3.
Шаг 3. Настройте шаблон формы
Для Contact Form 7 настройка шаблона выглядит следующим образом. В редакторе шаблона можно использовать HTML-код и так называемые теги формы. Теги формы — это шорткоды (короткие коды), которые при публикации преобразуются в HTML-код и добавляют поля формы. Также существуют теги почты для настройки электронной почты. Рассмотрим синтаксис тегов формы и тегов почты.
Синтаксис тега формы
Пример тега формы: [text text-name “Enter your name”] . Он состоит из четырёх частей:
Теги формы вы можете выбрать из списка и добавить их в контактную форму:
Рассмотрим поля, которые можно добавить:
Посмотрите, как можно применить все инструменты, на примере. Ниже приведён код с тегами формы и результат — получившаяся форма заказа Вордпресс:
Синтаксис тега почты
Почтовый тег состоит только из одного слова. Это слово обычно соответствует имени тега формы. Например: [your-name] . Используется при настройке шаблона письма (шаг 4).
Шаг 4. Настройте шаблон письма
Шаг 5. Настройте уведомления при отправке формы
Сохраните отредактированную форму.
Готово, вы настроили и сохранили форму.
Шаг 6. Добавьте форму на сайт
Перейдите на вкладку Contact Form 7 — Контактные формы. Рядом с вашей контактной формой находится шорткод. Скопируйте его:
Добавьте шорткод на страницу сайта или запись в редакторе:
Добавленная форма (здесь стандартная) будет выглядеть в режиме предпросмотра и на сайте таким образом:
Готово, вы добавили контактную форму WordPress Contact Form 7 на сайт. Теперь посетители сайта смогут воспользоваться ей, а данные со всех заполненных форм придут на ваш email.
Читайте также: