как сделать форму обратной связи в вордпресс
Как создать форму обратной связи в WordPress
Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи, или как еще говорят в народе «контактной формы».
Сегодня мы разберем с вами как можно создать за несколько минут легкую, красивую и функциональную форму обратной связи с помощью моего любимого плагина Contact Form 7.
Я постараюсь максимально подробно объяснить все этапы установки контактной формы, и в связи с этим урок получится достаточно длинным 🙂
Создание контактной формы в WordPress
В самом начале хочу заметить, что плагин Contact Form 7 русифицирован, и никаких проблем с ним у вас не будет. Как доказательство моих слов может выступать тот факт, что данный плагин скачали БОЛЕЕ 25 МИЛЛИОНОВ РАЗ.
И так, давайте приступим. Для создания формы обратной связи нужно сделать следующее:
1. Установите и активируйте плагин Contact Form 7. Как устанавливать плагины вы можете почитать в специальном уроке.
3. В открывшемся окне копируем строчку с кодом вставки.
4. Скопированный код вставляем на ту страницу, на которую мы хотим добавить форму обратной связи. После того как вставили код, не забудьте сохраните изменения нажав кнопку «Обновить».
Вот такой результат добавления контактной формы по получим:
Готово! Вы установили рабочую форму обратной связи на свой сайт!
Как видите, всего за несколько минут можно с легкостью установить на сайт форму обратной связи. На этом можно и поставить точку, но тем, кого не устраивает стандартная форма и кто хочет создать полностью новую контактную форму с другими полями и возможностями — рекомендую читать урок до конца.
Создание новой контактной формы в Contact Form 7
Для того, чтобы создать новую форму нужно для начала определиться какие поля в ней нам необходимы. В этом уроке в качестве примера мы будем создавать простенькую форму заказа обратного звонка.
Для этого нам нужно чтобы в форме были такие поля для заполнения:
После того как мы определились с полями, переходим к созданию формы:
2. В открывшемся окне нажимаем кнопку «Добавить новую». Если необходимо, выберите язык в выпадающем списке ниже. По умолчанию язык будет русским.
3. После нажатия кнопки вы перейдете на страницу, на которой находится редактор формы.
В самом верху страницу поле, в которое пишем название новой формы. В Шаблоне формы мы видим стандартные поля формы, которые создаются по умолчанию.
Ниже мы видим настройки письма, которое приходит на вашу почту после того, как кто-то отправил заказ с формы на сайте. В этих настройках, к примеру, можно изменить или добавить e-mail на который будут приходить запросы с формы на вашем сайте. В шаблоне письма настраивается информация, которая будет отображаться внутри письма.
4. После того, как мы поверхностно ознакомились с структурой редактора, переходим к созданию нашей новой формы. Для этого нам нужно УДАЛИТЬ из шаблона формы все строчки кроме кнопки «Отправить», а в шаблоне письма удалить все полностью. После удаления у вас должно получится так:
5. Теперь нам нужно создать новые поля: Имя (обязательное), Фамилия, Телефон (обязательное), Удобное время звонка.
Начинаем с создания поля для ввода имени, которое должно быть обязательное для заполнения. Для этого нажимаем кнопку «Сгенерировать тег» и выбираем Текстовое поле.
В настройках нового поля ставим галочку, которая необходима только в том случае, если поле должно быть обязательным для заполнения. Далее копируем сгенерированный код в шаблон формы справа, а следующий код копируем в шаблон письма. Комментарии и стрелки для лучшего понимания смотрите на изображении ниже.
После добавления полей Имя, Фамилия и Телефон редактор формы будет выглядеть так:
7. Теперь создаем поле Удобное время звонка. Для этого нажимаем «Сгенерировать тег» и выбираем «Выпадающее меню».
В поле Выбор пишем в строчку по одному варианту, в нашем случае это время с 8-00 до 18-00 с промежутками в два часа. После заполнения копируем соответствующие строчки кода в шаблон формы и шаблон письма.
В итоге у вас должно получиться вот так:
8. Сохраняем форму нажав кнопку «Сохранить».
9. Скопируйте код формы и вставьте его на страницу, на которой вам нужна форма. Если вы все сделали правильно, у вас должна получится такая форма заказа обратного звонка:
После того как пользователь сделает заказ обратного звонка с вашего сайта, на вашу почту придет письмо с таким наполнением:
ГОТОВО! Вот мы с создали с вами форму заказа обратного звонка с нуля.
Согласен, что для некоторых все может показаться очень сложным и страшным, но такое ощущение будет только до первого создания контактной формы с нуля 😉
В большинстве случаев вполне достаточно и стандартной формы обратной связи, которая создается плагином по умолчанию сразу после его установки и активации.
Надеюсь этот урок был вам полезен, и вы разобрались с плагином Contact Form 7.
Если у вас будут возникать по ходу создания формы вопросы или что-то будет не получаться — пишите и задавайте вопросы в комментариях.
И помните, что форма обратной связи на сайте — обязательный атрибут на странице контактов.
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Делаем форму обратной связи WordPress: плагин Contact Form 7, функции в темах и самописный код
По умолчанию в WP нет такого функционала, но на помощь приходят плагины и специально разработанные конфигурации для движка.
Форма обратной связи WordPress плагином Contact Form 7
Разберу бесплатный Contact Form 7, который переведен на русский язык. В стандартном исполнении она включает в себя:
Не люблю капчу, но добавил ее после того, как на один из клиентских сайтов начал сыпаться спам.
Добавить капчу reCaptcha
Устанавливаем плагин стандартно через админку WordPress, так выглядит в панели.
Настроим reCaptcha от гугла, заходим в раздел интеграция, и нажимаем на ссылку google.com/recaptcha. Должны иметь аккаунт в Google.
Перебросит в сервис, настраиваем пункты как на скриншоте, правильно вводим домен, внизу нажимаем отправить.
Копируем данные для капчи, оба ключа.
Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.
Вводим ключи скопированные на сервисе reCaptcha, записываем в соответствующие разделы и сохраняем.
Создание формы
Заходим в настройки и создаем новую форму. Стираем стандартную разметку.
Вводим название нового проекта и нажимаем кнопку Текст, потому что имя будут вводить текстом без правил.
Появиться всплывающее окно, настраиваем по потребностям.
Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.
Ввод почты можно сделать через текст, но тогда потеряете функцию проверки правильности. Плагин проверит есть ли знак @.
Добавляем раздел текстовой области и телефона (по желанию), принцип одинаковый.
Ранее настраивали интеграцию капчи в WordPress, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод [recaptcha] помещаем под остальными элементами.
Осталось добавить кнопку отправки, выбираем из списка и настраиваем ее вывод.
В результате получился такой код.
Настройка отправки письма
Нажимаем сохранить, переходим во вкладку Письмо, теперь настраиваем отправку на почту.
Протестируйте остальные вкладки уведомлений и настроек, можно поменять текст, выводящийся в разных ситуациях.
Вставка формы на сайт
Вверху страницы сформировался шорт код, копируем его.
Идем в любую запись и вставляем.
После нажатия кнопки Посмотреть, перекинет на сайт с отображением проделанной работы.
Хорошая черта у разработчиков тем на WordPress – заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне красивую картинку. Если не устраивает, то к каждому полю прописывали class, используйте его для изменения оформления. Проверил работу темы, письма приходят быстро. Про остальные способы вставить шорткод в WordPress, читайте по ссылке.
Ко всему материалу приложу видео инструкцию, показываю не только процесс создания, но и как сделать красивое оформление формы, потому что текстом весь процесс не описать.
Сделать поля горизонтально в строчку
Посмотрел в интернет и ужаснулся, сколько манипуляций делают. Настроить полностью оформление не покажу, это тема ни одного большого мануала. Заходим в редактирование формы и оборачиваем поля, которые хотим выстроить горизонтально в div с классом, смотрим код.
Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.
Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.
Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.
Вторая запись показывает когда разрешение экрана достигло 655 пикселей, форма меняет свойство с flex на block и форма начнет отображаться как раньше с полями друг под другом. Этот предел в 655 меняется индивидуально, стиль сделан чтобы на мобильных устройствах обратная связь выглядела нормально.
Всплывающая форма обратной связи
Положительно на приеме заявок действуют всплывающие окна с обратной связью от CF7. Плагин для вывода всплывающего окна будет Popup Maker. Описывать не буду, ссылка на материал расположена в этом абзаце. В дополнение приложу видео из той статьи.
Как добавить в elementor
Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.
Далее перетаскиваем модуль в активную область, в параметрах блока вставляем код формы. Функция сработала и вывела на экран результат в виде формы обратной связи.
Используем настройку темы
Откроется страница с уже адаптированной, размеченной и сверстанной формой, по которой посетитель может получить обратную связь с администратором.
Feedback через виджеты
Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.
Задаем заголовок, заносим конфигурацию в текстовую область, переходим на блог и смотрим, как обрабатывается обратная связь.
Обратная связь без плагина
Если предпочитаете способы без плагина, то есть отличная инструкция, нашел на просторах интернета, если хозяин кода объявится, то с удовольствием поставлю ссылку.
Открываем файл function.php для редактирования, прописываем в самый низ код, как пользоваться FTP и изменять PHP разбирали тут.
Создали форму в HTML разметке WordPress и подвязываем ее на шорткод. Думаю такой подход будет удобен, потому что вывести блок можно будет в любом месте.
В гутенберге в любой текстовый блок вставляете строку.
Перейдя на сайт увидим не сформированную форму, поля работают, но письмо отправляться не будет, потому что не привязан PHP обработчик.
Теперь настроим внешний вид, вставляем данный код в файл style.css активной темы.
Обновляем style.css на сервере и смотрим как преобразилась обратная связь на странице.
Создаем файл feedback.js и помещаем в него код. Загружаем на хостинг в папку js активной темы.
Теперь загружаем вторую часть кода в function.php.
Проверяем форму на работоспособность. Проблема может возникнуть если вы не правильно загрузили файл js в тему WordPress, и путь до него прописан не корректно, а именно во втором коде в разделе // Подключаем файл скрипта.
Такое письмо приходит на почту с обратной связи.
Отлично, справились, смогли сделать форму обратной связи в WordPress, тремя разными методами, если будут вопросы то задавайте, будем разбираться. Успехов!
Как сделать формы на WordPress без программиста
Данная инструкция написана по стопам исследования, ранее проведенного и выложенного в статье на VC.
Благодаря этому, начинающие бизнесмены, малый и средний бизнес могут сэкономить на разработке своих сайтов приличные суммы денег, ведь уже не нужно оплачивать человеко-часы за те огромные куски программного кода, которые уже написаны и готовы к использованию в виде плагинов. Эти плагины осталось только выбрать и собрать, как конструктор в единое целое под названием «Веб-сайт».
Ну, а для тех сайтовладельцев, кто еще не переехал на WordPress и сомневается в вышесказанном, я подготовил небольшую пошаговую инструкцию, как сделать свой сайт на WordPress более интерактивным с помощью форм и без привлечения программиста.
Для выполнения данной инструкции потребуется:
1) Хостинг с поддержкой свежих версий PHP и MariaDB. Вы можете даже не вникать в технические детали хостинга и просто выбрать хостинг для WordPress.
Если у Вас Интернет-магазин или просто сайт с большим количеством ежедневных посетителей, то вместо хостинга лучше использовать VPS, VDS или облачные серверы. Облачные серверы намного удобнее масштабировать, если ожидает серьезный прирост в нагрузке на веб-сайт.
2) Доменное имя для сайта (которое скорее всего у Вас уже зарегистрировано).
3) Доступ в панель управления доменом (для изменения DNS-записей).
4) Почтовый аккаунт, с которого будут приходить уведомления с запросами от пользователей сайта (пойдет даже бесплатная почта).
5) Небольшие знания в английском языке (или Google Translate).
6) Владение ПК на уровне пользователя.
По завершению данной инструкции у Вас будет сайт на WordPress с формой (а быть может даже и несколькими формами).
Данный шаг индивидуален для подавляющего большинства случаев т.к. абсолютно одинаковых сайтов практически не бывает (если их специально не делать), поэтому давать какие-либо советы по данному шагу, я считаю, бессмысленно.
На этом шаге мы лишь фиксируем, что локация для размещения сайта уже выбрана, домен для сайта верно нацелен на локацию с помощью панели управления DNS у регистратора, а факт перехода на CMS WordPress уже свершился.
В этой инструкции, это, пожалуй, самый важный шаг, потому что плагинов с формами в WordPress достаточно много (их легко найти через поиск по слову «Forms»).
В основном плагины с формами отличаются функциональностью, дизайном, скоростью работы, качеством кода. Тут, как говориться, на вкус и цвет, каждый выбирает сам, что ему или ей удобнее. Я остановлю свой выбор на Forminator и дальнейшие шаги буду описывать применительно именно к этому плагину.
Ниже на скриншоте показано, как в разделе плагинов найти Forminator и установить его. После установки плагина его необходимо активировать.
После активации плагина в WordPress появляется новый раздел Forminator, где у Вас есть возможность создать свою первую форму с помощью кнопки «Create».
Разработчики заранее подготовили несколько шаблонов форм, которые можно брать «из коробки» практически готовыми к использованию. Для нашей инструкции необходимо выбрать «Contact Form» и нажать кнопку «Continue».
Блоки » Блок формы
Следующие инструкции относятся к нашему классическому редактору. Если вы применяете наш новый редактор блоков, используйте эти инструкции.
Этот метод не обеспечивает безопасность при получении персональной информации, в частности номеров кредитных карт и банковских счетов, имен и паролей пользователей. Используйте для получения платежей PayPal или аналогичную службу обработки платежей, которая надежным образом обрабатывает финансовые транзакции.
Обучающее видео
Посмотрите видеоролик с кратким обзором алгоритма работы и прочтите ниже информацию с дополнительными примерами и настройками.
Как добавить контактную форму в ваши записи или на страницы
Поля контактной формы
Для каждого поля требуется ярлык и тип поля. Вы можете выбирать один из следующих типов:
Настройки уведомлений
Выберите вверху опцию «Настройки», чтобы отредактировать настройки уведомлений.
Добавив поля и задав настройки уведомления, нажмите кнопку «Вставить», чтобы добавить эту информацию в запись или на страницу.
Редактирование контактной формы
Создав контактную форму, вы можете добавлять и редактировать поля и использовать вкладку «Настройки». Для этого откройте форму щелчком мыши, а затем нажмите значок карандаша. Внеся желаемые изменения, нажмите «Обновить».
Автоматическое заполнение формы вашей собственной контактной информацией
Если вы заходите на свой работающий веб-сайт, чтобы посмотреть, как выглядит контактная форма, возможно, вы увидите в ней свою собственную контактную информацию. Эту информацию видите только вы, поскольку вы просматриваете свой веб-сайт, войдя в свою учетную запись WordPress.com.
Добавление контактной формы с шорткодами
Для добавления обычной контактной формы можно использовать специальный код WordPress, так называемый шорткод. Подробнее о шорткодах рассказано здесь.
Чтобы добавить контактную форму, используя шорткод, скопируйте и вставьте следующий текст на любую страницу, в любую запись или текстовый виджет:
[contact-form]
[contact-field label=»Name» type=»name» required=»true» /]
[contact-field label=»Email» type=»email» placeholder=»Your Email Address» required=»true» /]
[contact-field label=»Website» type=»url» /]
[contact-field label=»Comment» type=»textarea» required=»true» /]
[/contact-form]
[[contact-form]
[contact-field label=»Name» type=»name» required=»true» /]
[contact-field label=»Email» type=»email» placeholder=»ваш адрес эл. почты» required=»true» /]
[contact-field label=»Comment» type=»textarea» required=»true» /]
[/contact-form]
Доступные атрибуты полей шорткода
Доступны следующие атрибуты полей:
label:присваивает полю описательный ярлык.
type: определяет характер добавляемого поля. Доступны следующие опции:
placeholder: Задает внутри поля ввода заполнитель или описательный текст, который удаляется после заполнения поля. Текст исчезает, когда начинается ввод данных в поле. Недоступно для полей переключателя, выбора и флажка.
required: Если вы хотите, чтобы поле было обязательным, добавьте required=»true» или required =»1″. Если нет, пропустите этот шаг.
options: В полях выбора и переключателя есть четвертая опция под названием «options». Это перечень всех вариантов, которые доступы в поле раскрывающегося списка или переключателя. Пример:
[contact-field label=»Do you have a blog?» type=»radio» options=»Yes,No» /]
Также вы можете изменить для встроенной контактной формы настройки уведомлений, добавив в стартовый тег контактной формы следующие параметры:
[contact-form to=’email@yourgroovydomain.com’ subject=’Form Submitted’]
Этот код задает отправку уведомления со строкой темы «Отправлена форма» на адрес электронной почты email@yourgroovydomain.com.
Изменение текста на кнопке отправки
[contact-form submit_button_text=’Contact me!’][contact-field label=’Name’ type=’name’/][/contact-form]
Управление обратной связью
Инструкции в этих пунктах относятся к консоли администратора. Для доступа к этой консоли добавьте /wp-admin в конец URL-адреса вашего веб-сайта (например, example.wordpress.com/wp-admin)
Вы можете прочитать всю информацию, отправленную через вашу контактную форму, в разделе управления обратной связью. Откройте вкладку «Обратная связь» в левом меню консоли.
Полезные советы
Разнообразие тарифных планов и ценовых предложений
Бесплатно
Оптимальный вариант для студентов
Personal
Оптимальный вариант для представления своего хобби