форма обратной связи wordpress без плагинов

Создание формы обратной связи без плагинов

В этом уроке я покажу вам как работать с формами в WordPress, и на примере мы подключим форму обратной связи, которая у нас с вами есть в вёрстке, на странице «Контакты».

Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.

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

Запомните навсегда – мы никогда не можем полагаться на валидацию атрибутами required или через JavaScript.

Валидация на JS формы обратной связи – это классно, но валидация на PHP всё равно должна у вас быть.

Сообщение об ошибке, если одно из обязательных полей не заполнено!

Почему плагины – плохо?

Фраза «плагины – плохо» это конечно преувеличение, однако устанавливая любой плагин на свой сайт, вам следует помнить о двух вещах:

Я не отговариваю вас использовать Contact Form 7 для создания форм обратной связи (это самый популярный плагин для этих целей), я лишь прошу подходить осознанно к выбору и решению о необходимости использования плагинов на своём сайте.

Создание формы обратной связи по шагам

1. Код формы

Тут по сути мы будем использовать HTML из нашей вёрстки, главная задача – в параметре action указать URL файла обработчика формы, можем ссылаться и на ту же самую страницу, на которой находимся при помощи функции get_permalink().

Также в одном из следующих уроков я покажу, как добавить антиспам на эту форму без использования каких-либо плагинов.

Сам код мы можем вставить либо в шаблон страницы, либо в шорткод – тут нет какого-либо правила, зависит только от ваших задач и от вёрстки.

2. Обработка формы

Тут такой момент – если в качестве файла-обработчика вы используете отдельный файл, то вам также нужно подключить среду WordPress (хотя конечно можно отправлять форму на чистом PHP, нам это никто делать не мешает, разница лишь в том, что мало ли вам захочется сохранять лиды в базу данных тоже).

Дальше – уже непосредственно обработка формы.

Подробно объясняю этот код на видео.

3. Вывод сообщений успешной/неуспешной отправки

Это можно вставить где-то перед самой формы.

Источник

Дмитрий Амоти

Блог обо мне для меня

Форма обратной связи без плагинов

Здравствуйте! Сегодня я поделюсь с Вами как можно легко и быстро создать простую в установке и удобную в использовании форму обратной связи на WordPress без плагинов, используя простые средствами HTML, CSS и PHP.

Преимущества такой формы очевидны — она универсальна и может быть установлена на любой сайт, включая популярные CMS, такие как WordPress, Joomla и даже на простые HTML сайты. Если в качестве примера рассматривать ВордПресс, то отсутствие дополнительных плагинов снизит потенциальную нагрузку сервер.

Отправка сообщений происходит без перезагрузки страницы! По порядку следуя инструкции в итоге мы должны получить такой результат:

Что для этого требуется? Чуточку внимания, чтобы дочитать статью до конца и немного свободного времени для воплощения идеи в жизнь) В конце статьи есть ссылки на онлайн-демонстрацию и загрузку архива с исходниками.

Вставка формы обратной связи на блог

Для размещения формы обратной связи можно выбрать как отдельную запись, так и статическую страницу. Целесообразно ее использовать на специально отведенной странице для контактов. Итак, предлагаю использовать вот такой код, которой необходимо вставить в HTML-режиме редактора:

Источник

WordPress. Форма обратной связи без плагинов и без перезагрузки

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

Для тех кто хочет разобраться или по какой-то причине не любит плагины.

Хотя плагином сделать подобную форму можно без проблем — это будет быстрее, проще и удобнее. Например, плагином Simple Basic Contact Form.

Итак, создаем форму обратной связи без плагина. Алгоритм простой

Внимание! Код добавлять в файл functions.php дочерней темы или пустой плагин.

1. Создаем и выводим форму

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

Теперь создаем страницу и выводим на ней шорткод.

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

2. Внешний вид формы

Добавим красоты нашей форме.

Вот так теперь выглядит форма.

3. Работа формы

Теперь заставим форму работать.

Создание и подключение нужных файлов

Теперь через файл functions.php подключаем нужное.

После подключения в исходном коде должно быть видно подключение и вывод скрипта.

Отправка данных формы через ajax

В подключенный файл feedback.js добавляем отправку данных формы.

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

Обработка Ajax

Заключение

Вот и все. Если все сделано правильно, то при отправке пустой формы будут такие сообщения.

Если отправка прошла успешно, то появится соответствующее сообщение

На этом все. Если есть вопросы и предложения пишите в комментариях. Удачи!

Источник

Форма обратная связь WordPress без плагина

Продолжаем серию постов посвященных обратной связи в системе управления WordPress. Сегодня я попробую расказать вам как делается обратная связь wordpress без плагина на базе штатной функции wp_mail с помощью технологии программирования ajax.

Преимущества обратной связи wordpress без плагина

Для того, чтоб создать форму обратная связь WordPress, без использования плагинов нам потребуется минимум знаний пхп, просто скопируйте код в нужное место.

Код для создания обратная связь WordPress без плагина

Открываем файл functions.php вашей темы и забрасываем туда вот такой код:

В директорию «js» закидываем файл «scriptform.js» и туда записываем вот такой простой код:

Не забываем закачать эти файлы к себе на сервер.

Если нужно вызвать форму из пхп, например в низу страницы воспользуйтесь вызовом шорткодов:

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

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

Описание обратной связи для wordpress без плагина

Последняя строчка функций: add_shortcode( ‘formZak’, ‘formZak’ ); регистрирует шорткод, чтоб нам было удобно работать с нашей формой обратной связи для wordpress без плагина.

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

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

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

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

Возникает вот такая ошибка ошибка «POST admin-ajax.php 500» когда отправляю форму. Подскажите как исправить

admin: 02.07.2019 в 16:19
Добрый день.
Какая-то проблема с аяксом или нет обработчика: прописали разные имена вместо myform_send_action или в пхп коде ошибка

Проверьте пожалуйста еще раз наличие файла, он должен быть в каталоге wp-admin, если файла admin-ajax.php все таки нет нужно обновить ВП должно помочь.

Возникает вот такая ошибка ошибка «POST admin-ajax.php 500» когда отправляю форму. Подскажите как исправить

Добрый день.
Какая-то проблема с аяксом или нет обработчика: прописали разные имена вместо myform_send_action или в пхп коде ошибка

Добрый вечер!
Вас спрашивал Yuriy: 31.12.2016 в 17:51
Здравствуйте, я установил плагин Google Captcha (reCAPTCHA) by BestWebSoft и тепер хочу передать вот такой код в форму после textarea: как мне это сделать.

И у меня вопрос тоже про Google reCAPTCHA, только не по плагину, а именно просто по интеграции её в вашу форму, после её создания на сайте (-url-).

У них такое описание на странице:
https://developers.google.com/recaptcha/docs/display

А как это сделать к вашей форме?
Спасибо!

Добрый день.
Я как-то капчей не заморачивался использую самописные проверки.
Если смотреть документацию, то в самом конце есть код:
grecaptcha.render(‘example3’, <
‘sitekey’ : ‘your_site_key’,
‘callback’ : verifyCallback,
‘theme’ : ‘dark’
>);

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

Добрый день! Подскажите а можно как-то вывести настройки такой формы в админ-панель? Чтобы емейл-адрес куда будут отправляться данные с формы можно было ввести в админке?

Добрый день.
Страницу с опциями можно сделать с помощью add_options_page. Потом запрограммировать поле, довольно много кода, ради того чтоб заменить одно поле получится. Хотя сделать можно.

Добрый день! Игорь, с помощью шорткода прикрутил форму к попап меню, которое генерится с помощью плагина Popoup Maker. Выдается диагностика «Ошибка соединения». Если выводим форму на обычной странице (как и описано здесь), то все норм. В чем может быть проблема?

Добрый день. Какая то ошибка в ответе аякс запроса, или он вообще не возвращается. Можно посмотреть на ошибку в действии? или сайт на локальном хосте?

Источник

Контактная форма на WordPress без плагинов

Обновл. 16 Сен 2021 |

Сегодня поговорим о создании контактной формы на WordPress без плагинов. Контактная форма улучшает юзабилити сайта и позволяет вашим читателям связаться с вами или задать вам вопрос.

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

Весь процесс создания контактной формы делится на:

создание и подключение js-скрипта;

создание и подключение файла-обработчика mail.php;

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

Шаг №1: Создание html-формы

Выбираете любое место в файле (в page.php или любом другом файле), где хотите разместить форму (у меня после строки ) и вставляете следующий код:

Здесь мы создали простую форму. Атрибут required означает, что поле является обязательным для заполнения.

Примечание: Читайте внимательно комментарии к коду, всё важное я подписываю.

Шаг №2: Создание и подключение js-скрипта

Чтобы сообщение отправлялось без перезагрузки страницы, используется технология AJAX (сокр. от «Asynchronous Javascript and XML»). Для её применения нужно подключить библиотеку Jquery. В файле header.php перед закрывающим тегом добавляем следующую строку:

Дальше нужно вставить сам скрипт. Сразу после строки или после тега в том файле, в котором создавали форму, вставляем следующий код:

Шаг №3: Создание и подключение файла-обработчика mail.php

Теперь нужно создать файл обработчика, чтобы всё заработало, и сообщения приходили к нам на почту. Для этого создаем новый файл, вставляем следующий код:

Примечание: Обратите внимание на строку №14 — там нужно указать свой электронный адрес.

Сохраняем как mail.php и закидываем в корневую папку шаблона (в WordPress это: wp-content > themes > название_вашего_шаблона) к файлу с формой.

Шаг №4: Оформление стилей

Последний штрих! Сделаем нашу форму красивой и лаконичной, добавив немного стилей в style.css:

Теперь наша форма полностью готова к использованию. Оформление можете изменить под себя.

Создание отдельной страницы для контактной формы

Этот пункт для тех, кто хочет создать форму на отдельной странице! Чтобы создать отдельную страницу для контактной формы вам нужно зайти в админку WordPress > Внешний вид > Редактор. Справа ищите «Шаблон страницы» (page.php). Открываете этот файл, копируете содержимое. Создаете на своем компьютере новый текстовый файл и вставляете всё скопированное туда. В самом верху добавляете следующие строки:

Сохраняете этот файл под именем contact.php, а дальше всё, как было указано выше в этой статье (вставляете html-форму, подключаете js-скрипт, создаете файл mail.php, задаете стили).

Эти два файла (contact.php и mail.php) нужно будет закинуть в корневую папку вашего шаблона (wp-content > themes > название_вашего_шаблона). После этого заходите в админку WordPress > Страницы > Добавить новую. И в атрибутах страницы выбираете шаблон «Contact», дальше «Опубликовать», и всё!

Поделиться в социальных сетях:

Вывод похожих записей на WordPress без плагинов

Комментариев: 15

Источник