Вы хотите добавить форму заказа на свой сайт? Если это так, имейте в виду, что каждому веб-сайту электронной коммерции нужна такая форма, чтобы его клиенты могли заказать продукт или услугу и, возможно, произвести оплату напрямую через Интернет.
В этой статье мы предложим вам лучшие плагины 10 для WordPress, которые позволят вам создать форму заказа на вашем веб-сайте.
1. Supercart
Supercart представляет собой полный плагин WordPress, предназначенный для создания форм заказов на основе известного плагина WHMCS. Может использоваться как одна страница (полный ajax ) или несколько страниц / шагов (пол-Аякс ). Он очень безопасен, прост в использовании и может быть настроен за считанные минуты 10.
Если вы уже установили WHMCS, просто скачайте и активируйте этот плагин для формы заказа WordPress, и вы сможете без проблем использовать информацию из вашей базы данных WHMCS. После активации вам нужно будет только обновить дополнения (если они у вас есть), чтобы просто добавлять теги HTML.
Вы также сможете добавить изображение для всех ваших расширений. Короче, Supercart это самый полный, самый продвинутый и самый мощный плагин формы заказа WHMCS, доступный на рынке.
2. Список таблиц продуктов Woo
Это более простой, быстрый и эффективный способ перечисления ваших продуктов WooCommerce на гибкой, простой в использовании таблице или форме; с возможностью быстрого просмотра. Действительно, благодаря плагину Список таблиц продуктов Woo Вы можете без труда отобразить все свои продукты WooCommerce в виде таблицы или формы на одной странице.
Просто скопируйте шорткод и разместите его на любой странице. Его функции включают в себя: поддержку нескольких автоматически генерируемых шорткодов, отображение столбцов по мере необходимости, поисковую систему Ajax, возможность быстрого просмотра каталога и таблиц и т. Д.
3. ARG Multistep Checkout для WooCommerce
С элегантным и интуитивно понятным дизайном, расширение WordPress ARG Multistep Checkout поможет вам улучшить взаимодействие с пользователем, разделив наиболее важные элементы платежного процесса WooCommerce по умолчанию.
Увеличение объема продаж - легкая цель, и именно здесь плагин WooCommerce ARG Multistep Checkout делает этот процесс сложным и простым в понимании.
Среди других функций: интуитивно понятный дизайн, плавные анимации при изменении и проверке шага, добавление новых шагов, доступ к следующим шагам, нажав на следующую вкладку, интеграция шаги входа в систему и регистрации, наличие шага проверки заказа, отличная интеграция с вашей темой WordPress, пошаговая проверка, совместимость с WPML и т. д.
4. Стандартный платежный шлюз PayPal для форм Ninja
Le плагин Стандартный платежный шлюз PayPal для форм Ninja позволяет вам создать форму заказа и получать платежи, используя стандартную учетную запись PayPal вашего сайта.
Его основными особенностями являются: простота интеграции, активации или деактивации шлюза Paypal в отдельных формах, поддержка регулярных платежей и многое другое.
5. Супер Формы - Калькулятор
С этим расширением WordPress вы можете создавать расширенные расчетные формы на основе данных, введенных пользователем. Установите отличные формы бронирования и заказы или создайте сложные формы оценки.
Это так же просто, как заниматься обычной математикой. Это расширение плагина Супер Формы , Последнее необходимо для правильной работы этого xtension.
6. Поля и пошлины WooCommerce
Поля и пошлины WooCommerce Позволяет администратору eShop создавать платежи (или скидки, если значение комиссии отрицательное) и дополнительные поля выставления счетов и доставки, с которыми он может по желанию связать определенные условные правила.
В соответствии с этими условными правилами плагин решает, должны ли дополнительные поля отображаться в формах оплаты и должны ли сборы применяться к корзине платежей. Каждое поле / налог может иметь несколько условных правил, связанных между собой. Условное правило может учитывать несколько типов данных.
Среди его функций вы найдете, среди прочего: поддержку условной логики, поддержку нескольких типов данных, интеграцию нескольких типов полей, отличную совместимость с WooCommerce и WPML и многое другое.
Регистрация WooCommerce
Плагин WordPress Регистрация WooCommerce позволяет добавить дополнительные пользовательские поля в форму регистрации клиента. У вас будет возможность добавить несколько типов полей, которые будут упомянуты среди других: зона текста, зона выделения, флажок, переключатель, селектор времени, селектор даты, пароль Выбор цвета и т. д.
Вы также сможете отобразить все поля на странице оплаты, за исключением поля изображения на случай, если клиенты захотят проверить. Этот плагин также позволяет вам включать / отключать поля WooCommerce по умолчанию. Функции подключения через Facebook и Twitter также интегрированы в этот плагин.
Среди других его функциональных возможностей вы найдете: добавление неограниченного количества полей, интуитивно понятный интерфейс, настройку полей для лучшей читаемости, поддержку условной логики для ее полей, расширенные опции для персонализации полей и многие другие
8. Страницы корзины и заказа WHMCS - оформление заказа на одной странице
Основная цель этого замечательного плагина - дать пользователям лучший опыт в процессе заказа продукции. Так посетители быстро превращаются в клиентов.
Страницы корзины и заказа WHMCS (WCOP ) имеет очень стильные, удобные страницы заказа и оформления заказа с множеством функций.
Помимо стандартных страниц / форм заказа WHMCS, «WCOP» предлагает одну страницу оплаты. Эта форма заказа на одну страницу является идеальным решением, если вы хотите предложить своим клиентам одну страницу оплаты.
9. WooCommerce Варианты дополнительного продукта
WooCommerce Extra Product Options - это расширение WordPress, которое позволит вам создавать дополнительные опции продукта с поддержкой условной логики. Вы также сможете создавать формы, конвертировать раскрывающиеся списки атрибутов в переключатели и многое другое.
Среди его особенностей мы найдем среди прочего: поддержку нескольких типов полей, настройку цен в соответствии с выбранными полями, визуальный конструктор полей для формы, поддержку шорткодов, активацию некоторых опций для конкретные роли, выбор между увеличением цены на фиксированное значение или в процентах, функциональность импорта / экспорта в другие формы, возможность скрывать или отображать цены, условная логика для полей и разделов в конструктор форм, совместимость с несколькими плагинами и расширениями электронной коммерции, подробная документация и многое другое...
10. WP Cost Estimate & Payment Forms Builder
С легкостью продавайте любые индивидуальные услуги и продукты, создав собственный прозрачный и отзывчивый калькулятор затрат и формы заказов на своем сайте WordPress. Этот уникальный плагин может фактически использоваться, чтобы продать любой тип услуги или продукта, приложений, веб-сайтов, графики, SEO, домашних животных, лунных фрагментов.... или что-нибудь еще.
Ваши клиенты смогут получить точную оценку своего заказа (оценка или окончательный заказ отправляется по электронной почте) или произвести прямую оплату с помощью Paypal или Stripe. Адрес электронной почты клиента может быть автоматически отправлен в ваш список MailChimp / MailPoet / GetResponse.
Вы также можете скрыть все цены в форме и электронных письмах, чтобы использовать их в качестве обычной формы. Его интуитивно понятная и мощная условная система и множество ее компонентов позволяют легко создавать любые типы форм.
Вывод
Вот и все для этой статьи, посвященной лучшим плагинам WordPress для бланков заказов WordPress. Не забудьте прислать нам свои комментарии, предложения и пожелания по этому списку.
Однако вы также можете обратиться к нашим ресурсам, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, посоветовавшись с нашим руководством по созданию блога WordPress или по Divi: лучшая тема WordPress для все время
Приветствую! Сегодня в Интернете очень быстро развивается такое направление, как обратная связь между владельцем сайта и клиентом. Палочкой выручалочкой в этом становится специальная форма для общения. Именно поэтому я поставила перед собой цель помочь вам выбрать плагин обратной связи wordpress.
Зачем нужна форма обратной связи
В настоящее время нам трудно представить, что раньше приходилось вручную копировать или набирать адрес электронной почты, со своего е-мейла писать письмо продавцу и дожидаться ответа длительное время. Ведь за этот промежуток, пока клиент заходил на почту и писал письмо, он мог потерять или забыть нужный url, забыть сам вопрос и много чего еще могло случиться. А для владельца мог быть потерян клиент в этой ситуации. Улавливаете смысл?
Современные разработки программистов, такие как формы обратной связи, активно помогают владельцам коммерческих ресурсов не упустить ни одного клиента, а интернет-пользователям позволяют экономить свое время и, удовлетворив потребности, совершать покупку.
Где найти готовые шаблоны или заготовки
Каждый раз при создании нового сайта или станицы вебмастеру приходится выбирать самый лучший плагин вордпресс для формы связи. Потому что заказчику далеко не всегда может понравиться простая и стандартная форма. Порой даже требуется много разнообразных штук одновременно на одной странице.
Форма для возможности обратной связи представляется одной из важных частей wordpress сайта. Без нее упускается возможность всегда быть на связи с посетителями и клиентами. Помимо этого без этой примочки возрастает вероятность потери потенциальных покупателей.
Плагины WordPress пользуются популярностью благодаря своим преимуществам : постоянно выходят обновления, которые позволяют быстро и качественно разработать сайт. Такое приложение облегчает добавление контактной формы на сайт, а также возможность создать всплывающую форму, форму с отсчетом времени или заказать звонок.
В этой статье я хочу познакомить вас с наиболее популярными приложениями и современными новинками :
- Contact form 7
- Fast Secure Contact From.
- Contact Form by Contact ME
- FormCraft
- Visual Form Builder
- NForms
- Gravity Forms
- Ninja Forms
- Ninja Kick
Я постараюсь дать краткую характеристику этим популярным плагинам, чтобы вы смогли подобрать подходящий для себя вариант.
Contact form 7
Cf7 сегодня это самый востребованный плагин для вордпресс.
Преимуществами
у него являются:
- AJAX-отправка сообщений.
- Встроенная капча.
- Специальный спам-фильтр.
- Позволяет загружать файлы.
Эта разработка является совершенно бесплатной и ее легко подстроить под различные нужды при помощи html. Используя специальный код, который состоит всего лишь из одной строчки, можно разместить сотворенную контактную форму в любое место на странице.
Этот плагин хоть и популярен, но не лишен недостатков. Одним из таковы является недостаток готовых шаблонов. Если вам понадобится поменять оформление, то придется это делать, используя CSS.
Fast Secure Contact From
Fast Secure Contact From это нестандартная разработка, имеющая высокую популярность. В основном он используется владельцами блогов для создания и добавления контактной формы на сайты.
У этого конструктора присутствует раздел администратора, с помощью которого можно делать неограниченное число форм. Используя капчу и специальную защиту, конструктор способен блокировать атаки, которые основаны на тактиках спамеров.
Положительными сторонами плагина являются:
- Не дает регистрировать профиль простым пользователям.
- Предоставляет возможность формирования графика, онлайн-встреч.
- Поддерживает несколько адресов электронной почты.
Минусом было признано отсутствие простого интерфейса, но этот недостаток не стоит ребром и разработчики конструктора трудятся над его устранением.
Contact Form by Contact ME
Contact Form by Contact ME – это доступный конструктор, имеющий в своем арсенале стандартный набор основных функций. Он работает только после прохождения регистрации на сайте. Эта процедура проста и бесплатна. Разработчики считают, что он лучше других раскрученных плагинов, даже CF7.
Этот конструктор имеет множество нужных функций:
- Посылает уведомления сразу на почту и телефон.
- Разрешает добавлять в форму скрипт.
- Поддерживает логотип для карты, данные о компании и ссылки на социальные сети и т. д.
Отталкивает владельцев веб-ресурсов по большей степени от использования такой разработки, только наличие регистрации на сайте Contact me.
FormCraft
Плагин FormCraft изначально создавался и поддерживался только как премиум приложение. Не так давно его создатели сделали и бесплатную версию – FromBuilder, доступную каждому интернет-пользователю.
Он поддерживает конструирование разных форм в своем встроенном редакторе. Возможностей у него меньше, по сравнению с премиум версией, у которой присутствует скриптовая логика, автосохранение и множество настраиваемых полей. Однако он признан одним из наилучших на сегодня (как бесплатная, так и премиум версия рассматриваемого приложения).
Visual Form Builder
Еще один конструктор Visual Form Builder – разработка, которая позволяет создавать и осуществлять контроль над всеми формами из одного места. При помощи всего одного клика вы сможете управлять полями, антиспамом и реорганизовывать ранее созданные формы. Звучит заманчиво, правда?
Плюсами этого плагина являются:
- Возможность смены порядка элементов обычным перетаскиванием.
- Способность экспортировать данные в файл CSV.
- Отправка контролируемых сообщений с подтверждением.
- Возможность указания множества url адресов.
А минус всего один – если у вас очень большой сайт, то лучше воспользоваться другим плагином, потому что этот хранит все данные формы в базе вашего вордпресс. А это может существенно снизить его работоспособность и открываемость. Мне кажется, что вы понимаете, последствия перегруза (длительная загрузка, снижение количества просмотров и тд.).
nForms
nForms напоминает достаточно простой шаблон, с Ajax отправкой. Созданная форма будет отображаться с помощью специального шорткода или виджета. Это довольно интересный вариант, но подходит не для любого сайта (нужно сопоставлять результат с вашим макетом). Это приложение предоставляет вам больше, чем просто контактная форма. Заинтересовались? Тогда проведите эксперимент, быть может, такая форма станет своеобразной фишкой вашего сайта.
Gravity Forms
Gravity Forms представляет собой самое полное решение для создания формы обратной связи на сайт. Многие считают его самым продвинутым для вордпресс. Такая разработка имеет визуальный качественный редактор, позволяющий создавать усложненные вариации. А также в конструктор встроена функция, облегчающая использование длинных разработок и встраивание их в большое количество страниц.
Помимо этого, конструктор имеет индикатор заполнения, оповещающий о том, насколько заполнена форма. Можно назвать неоспоримыми плюсами:
- Наличие функций, отсутствующих в других конструкторах (калькулятор посетителей в режиме реального времени, создание форм заказов).
- Присутствие зависимых полей, страниц или секций.
- Можно выбрать кнопку отправки.
А вот к минусам придется отнести только высокую стоимость плагина. Но это весьма спорный минус, ведь приложение способно предложить несколько больше, чем контактная обычная форма. А разве не это вам нужно?
Mapped Contact Form Pro WordPress
Дополнение Mapped Contact применяет немного измененный процесс для отображения формы на сайте. Это отличное решение для крупной компании или сети фирм, потому что может обозначать филиалы на карте гугл. Получается, что это довольно полезный плагин, вы согласны?
Важным преимуществом является возможность указания расположения каждого места, рассматриваемого на сайте. Достаточно всего лишь поместить шорткод(short code) в любую запись или любое место на странице. Сделать это несложно, поэтому с такой процедурой справится любой заинтересованный человек.
Ninja Forms
В последний период плагин Ninja Forms стал набирать популярность. Этот конструктор форм отличается от остальных мощностью и присутствием самого понятного редактора, который используется приоритетно в платных плагинах. При его использовании вам будет доступно строительство своей уникальной формы обычным перетаскиванием и настройкой блоков. Все поля создаются на любом из выбранных языков, в том числе и на русском.
Положительными сторонами такой разработки можно назвать:
- Достаточно широкий функционал.
- Присутствие удобного переключателя для возможности предпросмотра и теста конструкций.
Отрицательными сторонами будут:
- огромное количество настроек, способное запутать начинающего пользователя.
- присутствие премиум модулей, которые можно подключить отдельно (такие как прием платежей, рассылок почты).
Ninja Kick
Ninja Kick – самое необычное решение из всех, которое отличается тем, что выводит отдельную панель с разных сторон сайта. В его функционале присутствует множество настроек, большая часть которых направлена на корректировку внешнего вида формы. Настройки для полей очень малы и это слегка огорчает интернет-пользователей.
Этот плагин очень интересен и уникален, но вряд ли подойдет для серьезного сайта. Его чаще всего используют владельцы развлекательных порталов или блоггеры.
Вот мы с вами и рассмотрели разные дополнения для создания обратной формы вордпресс и пришли к выводу, что для разных ситуаций, сайтов и целей можно подобрать свой плагин. Как говорят: «Было бы желание, а остальное найдется».
Пошаговое руководство по созданию формы обратной связи
Теперь давайте посмотрим, как именно создаются эти формы на примере приложения CF7:
Если вам надо добивать или изменить поля, то найдите список под названием «Сгенерировать тег» и выберите из списка необходимый тип поля. Эта функция позволяет получить форму абсолютно любой сложности. Такая функциональность позволяет с легкостью создавать уникальные продукты.
- После проведенных манипуляций, вы увидите, как будет выглядеть форма для посетителей. Она будет самой простой и особо ничем не примечательной, но если вы имеете начальные навыки программирования, то можете поиграть со стилями.
Вот и разобрались с тем, как сделать форму через приложение Contact Form 7. Несложно, правда?
Имею желание еще сказать пару слов, о защите вашего почтового ящика от наплыва спамеров: «Чтобы к вам на электронку не приходил спам, нелишним будет добавить в форму обратной связи капчу. Она устанавливается с помощью функции «генерации тега». А для ее функционирования потребуется дополнение Really Simple CAPTCHA. Закончив настраивать дополнение, вы сможете забыть о проблеме со спамом.
А также через плагин можно настроить форму письма, приходящего на вашу почту. Для этого придется заново обратиться к шаблону созданной формы. В нем останется набрать текст, который будет находиться в полученном сообщении с указанием имени соответствующих полей обязательно в квадратных скобках! Не упустить этот момент, иначе не получите нужный результат.
И в завершение, можно сказать, что форма готова, остается лишь редактировать сообщения по мере необходимости.
Вот так можно самостоятельно создавать формы для связи на WordPress. Это достаточно трудоемкий процесс, который занимает приличное количество времени. Если по каким-либо причинам вам не до конца понятен весь процесс создания или редактирования, то на помощь придут фрилансеры, им вы можете заказать конструирование формы. Это люди, которые в частном порядке помогут вам, и за работу они берут не так много, как в частных фирмах. Хочу порекомендовать вам проверенные сайты, где выполняют такие заказы качественно и в срок:
В заключение статьи давайте подведем итоги:
- сконструировать форму обратной связи на сайт можно через плагин;
- это самый простой и быстрый способ.
Сейчас есть множество плагинов на любой вкус и даже кошелек, поэтому выбор такового остается только за вами. Однако, если вы не желаете создавать форму самостоятельно, то можете обратиться за помощью к профессионалам в своем деле.
Ну все, пока-пока.
С уважением, Елена Изотова.
По умолчанию в 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(); ?>
Создали форму в HTML разметке WordPress и подвязываем ее на шорткод. Думаю такой подход будет удобен, потому что вывести блок можно будет в любом месте.
Заходим в создание страницы в панели WordPress, пишем , нажимаем на просмотреть.
В гутенберге в любой текстовый блок вставляете строку.
Вносим вывод в запись
Перейдя на сайт увидим не сформированную форму, поля работают, но письмо отправляться не будет, потому что не привязан PHP обработчик.
Плохой внешний вид
Теперь настроим внешний вид, вставляем данный код в файл style.css активной темы.
#add_feedback { margin: 20px 0 0; position: relative; } #art_name, #art_email, #art_subject, #art_comments { padding: 10px 5px; display: inline-block; width: 49.548%; border-radius: 3px; border: 1px solid #ddd; font-size: 0.9em; } #art_subject { width: 100%; margin: 5px 0; } #art_comments { width: 100%; } #add_feedback .button { border: none; padding: 10px 20px; color: #fff; font-size: 1em; display: inherit; margin: 10px 0 0 0; border-radius: 3px; background-color: #2f94ce; } #add_feedback input:focus, #add_feedback input:focus, #add_feedback input:focus, #add_feedback textarea:focus { color: #444; box-shadow: 0 0 3px rgba(68, 68, 68, 0.2); } .error-text { background: #F59E9E; padding: 15px 0px; text-align: center; color: #fff; } .error-name, .error-email, .error-comments { display: inline-block; font-size: 11px; position: absolute; top: -30px; color: white; border: 1px solid red; padding: 5px 10px; line-height: 1.1; background: red; box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3); } .error-name:after, .error-email:after, .error-comments:after { content: ""; position: absolute; left: 20px; bottom: -10px; border: 5px solid transparent; border-top: 5px solid red; } .error-comments { top: 16%; left: 0; } .error-name { left: 0; } .error-email { right: 4%; } .message-success { background: rgba(0, 128, 0, 0.5); color: #fff; padding: 20px; text-align: center; margin: 20px auto; border-radius: 3px; } #add_feedback .error { border: 1px solid red; } #add_feedback .required:after { content: "*"; position: absolute; left: 20px; bottom: -10px; } #art_name:focus::-moz-placeholder, #art_name:focus:-moz-placeholder, #art_name:focus:-ms-input-placeholder, #art_email:focus::-webkit-input-placeholder, #art_email:focus::-moz-placeholder, #art_email:focus:-moz-placeholder, #art_email:focus:-ms-input-placeholder, #art_comments:focus::-webkit-input-placeholder, #art_comments:focus::-moz-placeholder, #art_comments:focus:-moz-placeholder, #art_comments:focus:-ms-input-placeholder, #art_subject:focus::-webkit-input-placeholder, #art_subject:focus::-moz-placeholder, #art_subject:focus:-moz-placeholder, #art_subject:focus:-ms-input-placeholder { color: transparent }
Обновляем style.css на сервере и смотрим как преобразилась обратная связь на странице.
Сверстанный блок
Создаем файл feedback.js и помещаем в него код. Загружаем на хостинг в папку js активной темы.
JQuery(document).ready(function ($) { var add_form = $("#add_feedback"); // Сброс значений полей $("#add_feedback input, #add_feedback textarea").on("blur", function () { $("#add_feedback input, #add_feedback textarea").removeClass("error"); $(".error-name,.error-email,.error-comments,.message-success").remove(); $("#submit-feedback").val("Отправить сообщение"); }); // Отправка значений полей var options = { url: feedback_object.url, data: { action: "feedback_action", nonce: feedback_object.nonce }, type: "POST", dataType: "json", beforeSubmit: function (xhr) { // При отправке меняем надпись на кнопке $("#submit-feedback").val("Отправляем..."); }, success: function (request, xhr, status, error) { if (request.success === true) { // Если все поля заполнены, отправляем данные и меняем надпись на кнопке add_form.after("
Папка js на сервере
Теперь загружаем вторую часть кода в function.php.
/*вторая часть*/ add_action("wp_enqueue_scripts", "art_feedback_scripts"); function art_feedback_scripts() { // Обработка полей wp_enqueue_script("jquery-form"); // Подключаем файл скрипта wp_enqueue_script("feedback", get_stylesheet_directory_uri() . "/js/feedback.js", array("jquery"), 1.0, true); // Задаем данные объекта ajax wp_localize_script("feedback", "feedback_object", array("url" => admin_url("admin-ajax.php"), "nonce" => wp_create_nonce("feedback-nonce"),)); } add_action("wp_ajax_feedback_action", "ajax_action_callback"); add_action("wp_ajax_nopriv_feedback_action", "ajax_action_callback"); function ajax_action_callback() { // Массив ошибок $err_message = array(); // Проверяем nonce. Если проверка не прошла, то блокируем отправку if (! wp_verify_nonce($_POST["nonce"], "feedback-nonce")) { wp_die("Данные отправлены с неправильного адреса"); } // Проверяем на спам. Если скрытое поле заполнено или снят чек, то блокируем отправку if (false === $_POST["art_anticheck"] || ! empty($_POST["art_submitted"])) { wp_die("Это спам"); } // Проверяем полей имени, если пустое, то пишем сообщение в массив ошибок if (empty($_POST["art_name"]) || ! isset($_POST["art_name"])) { $err_message["name"] = "Пожалуйста, введите ваше имя."; } else { $art_name = sanitize_text_field($_POST["art_name"]); } // Проверяем полей почты, если пустое, то пишем сообщение в массив ошибок if (empty($_POST["art_email"]) || ! isset($_POST["art_email"])) { $err_message["email"] = "Пожалуйста, введите адрес вашей электронной почты."; } elseif (! preg_match("/^[[:alnum:]]*@+\.{2,4}$/i", $_POST["art_email"])) { $err_message["email"] = "Адрес электронной почты некорректный."; } else { $art_email = sanitize_email($_POST["art_email"]); } // Проверяем полей темы письма, если пустое, то пишем сообщение по умолчанию if (empty($_POST["art_subject"]) || ! isset($_POST["art_subject"])) { $art_subject = "Сообщение с сайта"; } else { $art_subject = sanitize_text_field($_POST["art_subject"]); } // Проверяем полей сообщения, если пустое, то пишем сообщение в массив ошибок if (empty($_POST["art_comments"]) || ! isset($_POST["art_comments"])) { $err_message["comments"] = "Пожалуйста, введите ваше сообщение."; } else { $art_comments = sanitize_textarea_field($_POST["art_comments"]); } // Проверяем массив ошибок, если не пустой, то передаем сообщение. Иначе отправляем письмо if ($err_message) { wp_send_json_error($err_message); } else { // Указываем адресата $email_to = ""; // Если адресат не указан, то берем данные из настроек сайта if (! $email_to) { $email_to = get_option("admin_email"); } $body = "Имя: $art_name \nEmail: $art_email \n\nСообщение: $art_comments"; $headers = "From: " . $art_name . " <" . $email_to . ">" . "\r\n" . "Reply-To: " . $email_to; // Отправляем письмо wp_mail($email_to, $art_subject, $body, $headers); // Отправляем сообщение об успешной отправке $message_success = "Сообщение отправлено. В ближайшее время я свяжусь с вами."; wp_send_json_success($message_success); } // На всякий случай убиваем еще раз процесс ajax wp_die(); }
Проверяем форму на работоспособность. Проблема может возникнуть если вы не правильно загрузили файл js в тему WordPress, и путь до него прописан не корректно, а именно во втором коде в разделе // Подключаем файл скрипта.
Заполняем и отправляем письмо
Такое письмо приходит на почту с обратной связи.
Что приходит после отправки
Отлично, справились, смогли сделать форму обратной связи в WordPress, тремя разными методами, если будут вопросы то задавайте, будем разбираться. Успехов!
Мне нравится Не нравится
Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.
Документация и поддержка
Скриншоты
Установка
- Загрузите всю папку contact-form-7 в директорию /wp-content/plugins/ .
- Activate the plugin through the Plugins screen (Plugins > Installed Plugins ).
You will find Contact menu in your WordPress admin screen.
Отзывы
1) Do not use 2) Do not use 3) Do not use The forms seem nice and straightforward, but are riddled with glitches. There are more than 1000 support requests; most are unanswered. File uploads fail without an explanation. Forms also fail with no explanation. There aren"t useful solution or error messages, just lots of frustration. If you don"t want to spend many hours of frustration only to later uninstall this plugin, don"t install it in the first place. Try something that actually works, like Everest.
Участники и разработчики
«Contact Form 7» - проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
УчастникиЖурнал изменений
Для получения дополнительной информации смотрите Релизы .
5.1.7
- CSS: Adds an explicit LTR direction style rule for code inputs.
- Accessibility: Uses Error instead of ERROR in warnings.
5.1.6
- CSS: removes a style rule from the stylesheet that was unnecessary and conflicting with Twenty Twenty’s rules.
- REST API: retrieves the contact form ID explicitly from the route parameters.
5.1.5
- Config Validator: New test item for the unavailable_html_elements error.
- Config Validator: New test item for the attachments_overweight error.
5.1.4
- reCAPTCHA: Представляем константы WPCF7_RECAPTCHA_SITEKEY и WPCF7_RECAPTCHA_SECRET.
- reCAPTCHA: Представляем перехватчики фильтра wpcf7_recaptcha_sitekey и wpcf7_recaptcha_secret.
- Добавление параметра $status к фильтру wpcf7_form_response_output.
- Создает случайный код, когда пользователь является зарегистрированным пользователем.
- Представляем WPCF7_ContactForm::unit_tag(), публичный метод, возвращающий тэг юнита.
- reCAPTCHA: выдаёт иное сообщение в спам-журнал в случаях, когда маркер ответа пуст.
- Флажок согласия: поддержка опции label_first в согласительном тэге формы.
5.1.3
- Исправлена ошибка, приводившая к невозможности отменить выбор параметра во вкладке Почта.
5.1.2
- Постоянный контакт: Представлен селектор списка контактов.
- Постоянный контакт: Представлена дополнительная настройка constant_contact.
- reCAPTCHA: представлены перехватчики фильтров wpcf7_recaptcha_actions и wpcf7_recaptcha_threshold.
5.1.1
- reCAPTCHA: Изменяет реакцию на пустые токены ответа.
5.1
- Представлен модуль интеграции Постоянный контакт.
- Обновлён модуль reCAPTCHA для поддержки reCAPTCHA v3.
- Добавляет правила стиля Тёмного режима.
5.0.5
- Исправлена проблема несоответствия между get_data_option() и get_default_option() в классе WPCF7_FormTag.
- Глушит ошибки PHP, возникающие при вызовах unlink().
- Представлена wpcf7_is_file_path_in_content_dir() для поддержки константы UPLOADS.
5.0.4
- Явно устанавливает аргумент power_type в вызове register_post_type(), для исправления проблемы, связанной с несанкционированным повышением привилегий.
- Вложение локального файла — запрещено указывать абсолютные пути к файлам, расположенным вне директории wp-content.
- Валидатор конфигурации — добавляет тестовый элемент для обнаружения некорректных настроек файлов вложений.
- Исправлена ошибка в функции обратной совместимости JavaScript для устаревших браузеров, которые не поддерживают атрибут-заполнитель HTML5.
- Чекбокс согласия — отключает функцию do-not-store форм-тэга.
5.0.3
- CSS: Применение стиля курсора «не разрешено» при наведение на кнопки отправки в неактивном состоянии.
- Флажок согласия: ревизия пользовательского интерфейса генератора тегов, для поощрения использования лучших опций защиты личных данных.
- Внедрение функции wpcf7_anonymize_ip_addr().
- Представлена опция consent_for:storage для всех типов форм-тэгов.
5.0.2
- Добавлен раздел «Уведомления о приватности» в файл readme.txt.
- Обновлен контент в мета-блоке Информация.
- Используйте get_user_locale() вместо get_locale(), где это более уместно.
- Флажок согласия: Сброс статуса отключенных кнопок отправки после успешного применения.
5.0.1
- Исправлено некорректное использование _n().
- Проверка конфигурации: исправлено неверное количество предупреждений на вкладке «Дополнительные параметры».
- Проверка конфигурации: исправлена неправильная обработка специального почтового тега [_site_admin_email] в поле заголовка «От».
- Флажок Acceptance: указанные атрибуты class и id были применены к неправильному элементу HTML.
- Проверка конфигурации: если для почтовых ящиков, таких как Cc или Reply-To, существует дополнительный почтовый заголовок, но возможное пустое значение, будет возвращена ошибка «Неверный синтаксис почтового ящика».
- Явно укажите четвертый параметр add_action(), чтобы избежать передачи непреднамеренных значений параметров.
- Проверьте, не является ли целевой каталог пустым, прежде чем удалять его.
5.0
- Дополнительные настройки: on_sent_ok и on_submit были удалены.
- Новая дополнительная настройка: skip_mail.
- Фламинго: заголовок входящего канала изменяется вместе с изменением заголовка соответствующей контактной формы.
- События DOM. Весь объект ответа API доступен через свойство event.detail.apiResponse.
- Почта HTML: добавляет атрибуты, связанные с языком, в заголовок HTML.
- Загрузка файла: Устанавливает атрибут принятия в поле загрузки.
- Представлен новый класс WPCF7_MailTag.
- Позволяет прервать попытку отправки почты, используя перехватчик действия wpcf7_before_send_mail. Кроме того, вы можете установить пользовательский статус и сообщение через перехватчик действия.
- Флажок Acceptance: позволяет указывать условия в части содержимого тега формы.
- Флажок Acceptance: Поддерживает параметр опциональности.
- Новые специальные почтовые теги: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname], and [_user_display_name].
- Новые перехватчики фильтров: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_{$type}, and wpcf7_mail_tag_replaced_{$type}
- Новые функции form-tag: zero-controls-container и not-for-mail
Для того чтобы создавать уникальные формы под разные задачи нам понадобится универсальный WordPress плагин - конструктор форм. Бесплатный, стандартный конструктор форм contact form 7 ограничен функционалом, он сложен для новичка и занимает много времени для освоения требуя знания кода, поэтому мы не будем его рассматривать. Премиум плагинов очень много, вспомним лидеров рынка, это:
- FormCraft
- eForm
- Super Forms
- Usernoise Pro
Каждый из этих плагинов заслуживает отдельного обзора, чего стоит один eForm со своей многообразной и запутанной структурой, но мы не ищем сложных путей и поэтому наши основные ориентиры это:
- Простота
- Универсальность
- Быстрое начало работы
Поэтому, в этом обзоре я расскажу о плагине FormCraft, который выполняет все выше перечисленные задачи и многие другие. Выбор этого плагина не случаен, так как я долго с ним работал и на практике создал много уникальных форм обратной связи, работающие и сейчас. Кроме этого FormCraft прост в освоении, имеет готовые шаблоны форм, которые работают и в сплывающем модальном окне, и развернутом виде, встраиваются в любое место на сайте в виде виджета или кнопки.
Примеры форм обратной связи, которые сделаны в плагине FormCraft смотрите в видео
Почему важны формы обратной связи
Безотказная, отлично работающая форма обратной связи - это та ниточка, которая связывает владельца сайта с посетителем. Ниточкой называю её потому, что посетитель пишет обращение, которое неизвестно чем закончится, возможно дальнейшим сотрудничеством, может успешной сделкой или просто интересом. Поэтому наша задача состоит в том, чтобы форма обратной связи была не только безотказно работающей, но и уникальной для разных страниц сайта.
Уникальные формы взаимодействия, позволяют отвечать пожеланиям посетителей, которые могут возникнуть в процессе изучения сайта. К примеру, в карточке товара часто возникает уточняющий вопрос и для этого должна быть форма — задать вопрос по товару или рассчитать его стоимость с помощью калькулятора. На главной странице не лишним будет сделать всплывающую форму заказа обратного звонка. Также со своей стороны мы можем предложить посетителю сайта получить специальные условия сотрудничества, скидки или консультацию через соответствующую форму, мотивируя его к определённым действиям.
Гибкость и встраиваемость в различные дизайны сайтов, одно из главных преимуществ хороших форм. Современные формы обратной связи должны отображаться на всех , с одной стороны, не выходя за область экрана смартфона или планшета, с другой не перегружая тяжестью обработки. Универсальность форм - это возможность моделировать и чередовать по своему усмотрению различные поля для текста, числовых значений, ввода даты, загрузки файлов, подсчета данных, оплаты, капчи. Делают такие формы плагины для WordPress.
В поисках идеального решения
Когда я изучал различные плагины форм, я остановился сначала на eForm. По не нему было много документации и видео на английском языке, но всё же при этом он оставался сложной системой, а нужно было делать сайты и времени на глубокое изучение практически не было. Тогда я стал использовать FormCraft. Этот плагин позволяет очень быстро создавать отличные, адаптивные, красивые формы обратной связи. Более того, он продуман с точки зрения понимания и освоения. С одной стороны, для начала работы он требует минимум знаний, с другой, предлагает большой скрытый функционал по мере освоения.
Видео установки плагина
Плагин форм для WordPress FormCraft
После установки, плагин тут же готов к работе, достаточно внести минимум настроек. Необходимо внести email и перевести на русский язык сообщения, которые появляются для пользователя после отправки формы и всё.
Пройдёмся по основным преимуществам плагина FormCraft:
- Простота настройки
- Быстрое создание форм на основе встроенных шаблонов
- Интуитивно понятный интерфейс
- Тестирование прямо в конструкторе форм
- Безупречная работа на многих сайтах.
- Гибкие настройки
- Любые формы
- Специальные поля
- Полный контроль ответных сообщений
- Корректное отображение на разных экранах
- Регулярные обновления
Визуализация форм
В зависимости от задач вы можете использовать поля для ввода цифр в определённой последовательности, создавать маски ввода, к примеру, ограничить поле для ввода телефона только вводом цифр в заданном формате. Сделать обязательным заполнение полей. FormCraft создает неограниченное количество полей в одной отдельной контактной форме.
С помощью FormCraft не сложно сделать уникальную форму запроса обратного звонка, форму подписки, бронирования, различные калькуляторы расчёта стоимости, опросы, голосования. Каждая форма работает отдельно, независимо от других, совершая отправку с информацией о себе на отдельный email адрес. Также активность использования форм просматривайте прямо в админке WordPress на странице плагина.
