Ajax форма для WordPress
Использование ajax при отправке формы позволяет отправить форму без перезагрузки страницы. В WordPress это достаточно просто реализовать. Допустим, у нас есть следующая форма заказа звонка:
Теперь напишем скрипт, обрабатывающий событие нажатия на кнопку «Отправить»:
Скрипт отменяет отправку данных на сервер, затем записывает значения полей формы и отправляет их через ajax. Получив результат обработки запроса, скрипт выводит в блоке с id = submit-ajax сообщение, полученное от сервера.
Улучшенный вариант скрипта, который обрабатывает поля формы автоматически:
Осталось написать функцию, которая будет обрабатывать отправленные на сервер данные (её можно поместить в файл темы functions.php):
Вам помогла эта статья? Оцените!
Комментариев: 11
Привет! Спасибо за материал!
Если не ошибаюсь, во втором фрагменте кода, последняя строка лишняя.
Привет! Пожалуйста! Да, вы правы, поправил.
Вставил код так, как Вы написали, у меня не заработала отправка. (email доставки прописал)
Какие могут быть основные ошибки-косяки?
Вставил пример формы в статью, код рабочий. Может быть jquery не подключена, также могут быть проблемы с хостингом.
iQuery подключена, хостинг достойный))У меня подозрение, что скрипт не подключается к форме. При нажатии на кнопку «отправить» выскакиевает сообщение «такой страницы не существует».
Попробовал пример с другого сайта, получилось. Спасибо за ответы!
Отправка формы работать не будет, если вы не напишете этот url.
Спасибо за код! Сейчас попробую для формы комментариев на своем сайте
Как создать AJAX-форму для сайта на WordPress
Технология AJAX позволяет данные без перезагрузки страницы. В этой статье мы расскажем, как создать AJAX-форму для WordPress.
Что такое Ajax и зачем его использовать для форм?
Ajax (Asynchronous Javascript and XML) – это метод JavaScript- программирования, который позволяет передавать данные без перезагрузки страницы.
Чаще всего он используется в формах. Ajax делает отправку формы простой и быстрой. Эту технологию используют такие платформы, как Gmail и Facebook.
Вы также можете использовать Ajax для форм на WordPress. Это избавит пользователей от перезагрузки страницы.
Рассмотрим, как можно создать AJAX-форму для WordPress.
1. Установите плагин WPForms
После активации в административной панели WordPress перейдите в меню « WPForms» — «Настройки», чтобы ввести приобретенный лицензионный ключ.
После ввода ключа вы будете получать автоматические обновления и сможете устанавливать необходимые дополнения.
2. Создайте свою первую форму
Затем WPForms загрузит форму с уже добавленными базовыми полями. Кликните по любому полю формы, чтобы отредактировать его.
Также можно добавить любое новое поле из левого столбца, кликнув по нему. После этого оно появится в нижней части формы.
Вы можете перемещать поля формы, перетаскивая их курсором.
3. Активируйте режим отправки данных формы с помощью AJAX
Это действие подключит Ajax для созданной формы. Затем перейдите на вкладку « Подтверждение» в разделе настроек. Здесь можно управлять информированием пользователей о получении отправленных ими данные.
Плагин WPForms позволяет делать это различными способами: перенаправлением на другой URL-адрес, отображением определенной страницы или сообщения.
В работе формы используется Ajax, поэтому перенаправление пользователей на другую страницу не имеет смысла.
Выберите вариант отображения сообщения. После этого можно настроить то, как вы хотите получать уведомления об отправке данных через форму. Для этого перейдите на вкладку « Уведомления» и настройте параметры сообщений, отправляемых по электронной почте.
4. Добавление Ajax-формы в WordPress
Плагин WPForms упрощает добавление форм в записи, на страницы и боковые панели WordPress. Отредактируйте страницу, на которой хотите разместить форму, и вставьте блок WPForms в область содержимого.
После этого выберите созданную форму в настройках блока. Затем WPForms загрузит предварительный просмотр выбранной формы в визуальном редакторе.
Пожалуйста, опубликуйте ваши мнения по текущей теме статьи. За комментарии, отклики, лайки, подписки, дизлайки огромное вам спасибо!
Отправляем форму Ajax’ом и сохраняем письма в админке WordPress
Сегодня рассмотрим как в WordPress отправлять формы c помощью ajax’a и сохранять отправленные письма в админке, Вы удивитесь, как на самом деле все просто.
Такой механизм задействован в одном из проектов 2015 в котором я участвовал, спасибо Сереге!
Пример я буду показывать на стандартной теме Twenty Fifteen, в процессе работы мы пройдем следующие этапы
Шаблон формы обратной связи
Пройдемся по форме
Выведем форму в футере
Открываем файл footer.php и с помощью get_template_part() выводим контакную форму:
Займемся стилями и js’ом
Оформление формы
Пояснять тут особо нечего, это стили) играйте как хотите
Скриптик
Скрипт очень простой:
Обработчик отправки формы:
Итак на данном этапе мы получили красиво оформленную форму в подвале сайта, для которой осталось написать php обработчик для полученных данных.
Создадим произвольный тип записи
Произвольный тип записи нужен для хранения отправленных писем в базе данных сайта, соответственно письма будут доступны из админки WordPress. Открываем файл functions.php и в самом низу добавляем следующий код:
Ajax обработчик формы
Все. Обработчик формы готов, теперь смело заходим на наш локальный сайт, заполняем или не заполняем поля, кликаем по отправке, дозаполняем поля, чтобы форма отправилась, кликаем еще раз отправить… и все готово. Форма отправлена, можем отправить еще раз если сильно охота, переходим в админку и видим что у нас появилась новая запись с информацией отправленного письма. Ура!)
Послесловие #1
Будет ситуация когда Вам не нужно хранить письма в админке, это 100% )
В таком случае, пропускаем шаг создания произвольного типа записи и из функции send_mail() удаляем создание нового поста и пользуемся.
Послесловие #2
Если хотите отправить письмо на несколько email адресов, то их нужно перечислить через запятую:
Послесловие #3
Бонус #1 — Заменяем имя отправителя
Бонус #2 — Заменяем email отправителя
Заключение
Это первая полноценная статья за последние… года 2-4 (может дольше) извиняйте, что редко пишу..
У Вас теперь есть полноценный инструмент для отправки и обработки практически любых форм в WordPress. Вопросы, пожелания, непонятки и благодарности пишите в комментариях. Всем хорошего настроения
Архив сделан криворуко. CSS не соответствует написанному sass. Так же перепутаны form-style и form-send-mail.
Короче статья и архив требует доработки.
Дмитрий, все правильно) в action мы указываем php фукнцию которая обработает форму и вернет нам ответ с сервера, отправку самой формы предотвращаем в js’е
Как же это аяксом отправляется, если в верстке в форме идет экшн?
action=»»
Спасибо большое за такой полезный пост!
Весь интернет перерыл, не нашел ни одного решения без плагинов, чуть с ума не сошел
Сегодня создадим AJAX авторизацию на блоге WordPress, давно хотел ее себе, а сегодня делюсь с Вами, как ее реализовать лучшими методами без использования плагинов
Правильно сбрасываем цикл WordPress, приводим в чувство шаблоны страниц при изменении стандартного цикла и при использовании нескольких дополнительных циклов WordPress
Сегодня продолжим пополянть копилку разработчика WordPress и познакомимся с четырьмя способами задания цикла с помощью функций query_posts, WP_Query, get_posts
В этом выпуске Вы узнаете как заменить стандартный placeholder заголовка «Введите заголовок» на свой текст, установить максимальную длину заголовка, устанавить редактор по умолчанию, расширить окно полноэкранного редактора, изменить шрифт HTML
Волнующий вопрос: «Как создать сайт?». Из этой статьи Вы узнаете как установить локальный сервер и создать новый проект(сайт), как создать базу данных и пользователя, и как установить систему управления контентом WordPress
В статье Вы узнаете о таких решениях как: отключить показ изображений записей на главной странице, предотвратить сжатие изображений, автоматически удалить ширину и высоту изображений, добавить атрибуты изображению, вывести миниатюру к записи,
Вот решил написать о том как пользоваться таким элементном панели управления как «Добавить новую запись». Возможностей WordPress предлагает предостаточно и прочитанный материал окажется Вам очень полезным
Наткнулся на очередной трюк WordPress. Раньше сам про такое не думал что можно в конце статьи выводить свой или чужой RSS поток, и не просто так списком выводить как все, а по хитрому в несколько колонок, причем на разных страницах можно
Чтобы миллионы пользователей не сходили с ума в поисках решений, WordPress, так сказать, создал условные теги о использовании которых сегодня пойдет речь.
Форма обратная связь WordPress без плагина
Продолжаем серию постов посвященных обратной связи в системе управления WordPress. Сегодня я попробую расказать вам как делается обратная связь wordpress без плагина на базе штатной функции wp_mail с помощью технологии программирования ajax.
Преимущества обратной связи wordpress без плагина
Для того, чтоб создать форму обратная связь WordPress, без использования плагинов нам потребуется минимум знаний пхп, просто скопируйте код в нужное место.
Код для создания обратная связь WordPress без плагина
Открываем файл functions.php вашей темы и забрасываем туда вот такой код:
В директорию «js» закидываем файл «scriptform.js» и туда записываем вот такой простой код:
Не забываем закачать эти файлы к себе на сервер.
Если нужно вызвать форму из пхп, например в низу страницы воспользуйтесь вызовом шорткодов:
Вы можете скопировать этот код к себе на сайт и попробовать затестировать, все должно работать, я специально проверял этот пример у себя. Вот такой ответ должен прийти на почту:
Как вы поняли, вот так просто делается форма обратной связи wordpress без плагина. Дальше я попробую немножко рассказать что значит этот код, если конечно это вам интерестно.
Описание обратной связи для wordpress без плагина
Последняя строчка функций: add_shortcode( ‘formZak’, ‘formZak’ ); регистрирует шорткод, чтоб нам было удобно работать с нашей формой обратной связи для wordpress без плагина.
Решил создать маленькую табличку, чтоб структурировать файлы которые вы должны создать или в которые нужно забросить код для того, чтоб работала обратная связь wordpress без плагина. Их не много думаю сможете разобраться.
| Название директории в теме | Файлы, которые надо создать | Файлы, в которые надо записать код |
| корень вашей темы | — | functions.php |
| css | styleform.css | styleform.css |
| js | scriptform.js | scriptform.js |
Вроде все описал о том как создать форму обратной связи без плагинов. Если у вас остались вопросы по коду, или у вас не получилось запустить эту форму у себя на сервере можете описать проблему в комментариях. Буду рад помочь решить вашу проблему. До новых встреч.
Если у вас уже есть форма обратной связи на плагине 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: popup contact form 7 и всплывающее окно формы на Ajax
В этом уроке, я хочу использовать две формы обратной связи: самописную на Ajax и Contact Form 7 на плагине.
В идеале, я покажу вам как создать всплывающую форму обратной связи, она же popup contact form 7 или любая другая произвольная форма обратной связи в модальном окне.
Эта статья подойдет как начинающим программистам, которым нужна всплывающая форма обратной связи у виде готового кода, так и более продвинутым.
Для успешной работы popup формы вам практически не нужны знания яваскрипт и пхп, – достаточно просто следовать пошаговой инструкции.
Навигация по странице:
Не бойтесь нажимать, вы перейдете сразу к просмотру нужной информации
Форма обратной связи в модальном окне
к менюДля более продвинутых пользователей я сейчас опишу 3 составляющих кода (яваскрипт, хтмл, цсс) для создания и работы модального окна. Далее, я покажу как этот код интегрировать в CMS WordPress для пользователей, которые не сильно разбираются в программировании. Перейти сразу к интеграции всплывающей формы на сайт вордпресс для начинающих можно нажав на этот линк.
Если вы хотите просмотреть код и скопировать его к себе на сайт нажимайте по очереди вкладки Html, CSS, Javascript ниже:
Всплывающая форма Html код
Это хтмл код для вставки в произвольное место родительского тега body. Лучше всего вставлять в конец страницы, перед закрывающимся тегом