Ошибки  

Форма обратной связи wordpress без плагина. Формы для Вордпресс — быстро, просто, эффективно! Панель обратной связи ManageWP

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

Форма обратной связи WordPress плагином Contact Form 7

Разберу бесплатный Contact Form 7, который переведен на русский язык. В стандартном исполнении она включает в себя:

  • Адрес почты
  • По желанию телефон
  • Текст сообщения
  • Капча
Добавить капчу reCaptcha

Устанавливаем плагин стандартно через админку WordPress, так выглядит в панели.

CF7 в поиске

Настроим reCaptcha от гугла, заходим в раздел интеграция, и нажимаем на ссылку google.com/recaptcha. Должны иметь аккаунт в Google.

Ссылка на рекапчу

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

Привязка captcha к сайту

Копируем данные для капчи, оба ключа.

Ключи доступа

Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.

Интеграция

Вводим ключи скопированные на сервисе reCaptcha, записываем в соответствующие разделы и сохраняем.

Сохранение настроек

Создание формы

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

Стираем стандартные надписи

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

Поле текст

Появиться всплывающее окно, настраиваем по потребностям.


Генератор тегов
  • Тип определяет обязательно ли посетителю заполнять поле, я поставил да
  • Имя не меняем это уникальный идентификатор
  • Значение по умолчанию, ввел фразу, которую увижу внутри
  • Использовать вместо заполнителя, то есть пока ничего не будет введено надпись будет отображаться
  • Не советую пользоваться полем Akismet
  • Для добавления стилей вводим class или id, сделал pole-imya
  • Вставляем тег в общее поле

    • Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.

    Генератор почты

    Ввод почты можно сделать через текст, но тогда потеряете функцию проверки правильности. Плагин проверит есть ли знак @.

    Добавляем раздел текстовой области и телефона (по желанию), принцип одинаковый.

    Кнопки телефон и текстовая область

    Ранее настраивали интеграцию капчи в WordPress, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод помещаем под остальными элементами.

    Осталось добавить кнопку отправки, выбираем из списка и настраиваем ее вывод.

    Кнопка отправить

    В результате получился такой код.

    Финальный код CF7

    Настройка отправки письма

    Изменение параметров письма

  • Теги полей созданные ранее
  • Адрес почты куда будут приходить письма
  • От кого и тема, заполняйте по желанию
  • Дополнительные заголовки, полностью очищаем
  • Прописываем в теле письма, что желаем получать на почту после отправки. Например, набрал Почта и вставил, соответствующий тег напротив этого слова.
  • Внизу нажимаем Сохранить

    • Сохранение

    Протестируйте остальные вкладки уведомлений и настроек, можно поменять текст, выводящийся в разных ситуациях.

    Вставка формы на сайт

    Вверху страницы сформировался шорт код, копируем его.

    Шорткод

    Идем в любую запись и вставляем.

    Помещаем shortecode в страницу

    После нажатия кнопки Посмотреть, перекинет на сайт с отображением проделанной работы.

    Финальный вариант

    Хорошая черта у разработчиков тем на WordPress – заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне красивую картинку. Если не устраивает, то к каждому полю прописывали class, используйте его для изменения оформления. Проверил работу темы, письма приходят быстро. Про остальные способы , читайте по ссылке.

    Ко всему материалу приложу видео инструкцию, показываю не только процесс создания, но и как сделать красивое оформление формы , потому что текстом весь процесс не описать.

    Сделать поля горизонтально в строчку

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

    Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.

    Оборачиваем в div

    Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.

    Flex-form{display:flex;} @media only screen and (max-width: 655px){.flex-form{display:block;}}

    Прописываем стили

    Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

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

    Всплывающая форма обратной связи

    Положительно на приеме заявок действуют от CF7. Плагин для вывода всплывающего окна будет Popup Maker. Описывать не буду, ссылка на материал расположена в этом абзаце. В дополнение из той статьи.

    Как добавить в elementor

    Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.

    Поиск элемента в elementor

    Элементор обработал запрос

    Используем настройку темы

    В большинстве шаблонов WordPress нет инструментов для создания в автоматическом режиме обратной связи. Но наши темплейты от WPShop имеют встроенную функцию, которая выводится с помощью шорткода. Разберем на примере Root . Перехожу в создание страницы, далее смотрим на снимок.

    Надстройка в ROOT

    • Прописываем текст [ contactform ] (без пробелов внутри скобок)
    • Жмем предпросмотр

    Откроется страница с уже адаптированной, размеченной и сверстанной формой, по которой посетитель может получить обратную связь с администратором.

    ROOT работа встроенной функции

    Feedback через виджеты

    Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.

    Используем виджет текст

    Задаем заголовок, заносим конфигурацию в текстовую область, переходим на блог и смотрим, как обрабатывается обратная связь.

    Форма в виджете

    Обратная связь без плагина

    Если предпочитаете способы без плагина, то есть отличная инструкция, нашел на просторах интернета, если хозяин кода объявится, то с удовольствием поставлю ссылку.

    Открываем файл function.php для редактирования, прописываем в самый низ код, как пользоваться .

    /*код обратной связи*/ add_shortcode("art_feedback", "art_feedback"); function art_feedback() { ob_start(); ?>