Если честно, давно уже не работал с Wordpress, но недавно объявился старый клиент и попросил добавить на его сайт на Wordpress простенькую форму заказа товара. Товары были представлены на отдельных статических страницах, ни о каком интернет-магазине речи не шло. Суть такая - в конце каждой страницы нужно создать форму, в которой покупатель может оформить заказ, указав количество товара.
Гугл подсказал, что теоретически справиться с задачей сможет плагин Contact Form 7 , представляющий собой конструктор форм обратной связи с отправкой писем на указанный адрес, но вот беда - среди элементов страницы формы не предусмотрено тегов для отправки заголовка страницы или хотя бы ее URL. Но выход нашелся...
1. Создаем форму обратной связи с такими полями, какие нам нужны. Для верстки формы используем обычный HTML+CSS, спецтеги заключаются в квадратные скобки. Все это делается во вкладке "Шаблон формы" на странице настройки плагина Contact Form 7.
Форма заказа при этом выглядит таким образом (при заданном стиле класса order):
Теперь нам нужно обеспечить передачу TITLE и URL страницы в письме. См п.2.
2. Переходим в раздел "Письмо" и формируем шаблон письма. Чтобы передать служебную информацию, можно использовать следующие служебные теги:
Если вставить в шаблон письма теги [_post_tltle] и [_post_url], в нем будут указаны название страницы и ее адрес. Если название страницы совпадает с названием товара, то проблема передачи наименования товара адмнистратору сайта будет решена!
Вот пример шаблона письма, в котором передается название и URL страницы, с которой оформлялся заказ:
Пользователь оформляет заказ, указывая количество товара и свои контактные данные. После того, как нажата кнопка "Оформить заказ", к вам на почту приходит подобное сообщение:
Понимаю, что это, конечно, не так изящно, как в "крутом" интернет-магазине, но у вас есть возможность связаться с клиентом и обсудить подробности заявки. Моему клиенту, собственно, именно это и требовалось.
Маленькая хитрость
Чтобы вставить код формы в произвольное место шаблона, в PHP-код можно добавить следующую строку:
"); ?>
То, что выделено красным цветом берется из настройки формы. Этот прием удобен для вставки кода в каждую страницу, чтобы не добавлять шорт-код вручную в редакторе к описанию каждого товара.
На многих сайтах устанавливаются формы обратной связи, чтобы пользователи могли оставить сообщение администратору не покидая сайт. Самым популярным, качественным и удобным в настройке и использовании является плагин Contact Form 7 – с его помощью можно создать любые контактные формы и не только. Поскольку плагин имеет большое количество различных форм и полей, то его можно использовать для многих задач. Я, например, использовал его для создания анкеты работодателя и соискателя на рекрутинговом сайте, для создания формы заказа товара на сайте по продаже только одной линии продукта, использовал этот плагин для создания сложной и объемной расчетной формы для строительного сайта, для самых различных форм обратной связи и прочих форм. Но речь не об этом, а о том, как же сделать, чтобы форма связи появлялась во всплывающем окне, чтобы можно было сделать кнопку вызова контактной формы на каждой странице, а не только на странице “Контакты”?
Все на самом деле не сложно, но понадобится еще один плагин с эффектом FancyBox, мне лично нравятся эти два плагина: Easy FancyBox или FancyBox for WordPress, есть различные похожие плагины, но любой из этих подходит отлично и еще позволяет открывать в popup изображения.
В общем, установлены два плагина: Contact Form 7 и Easy FancyBox , создана контактная форма, осталось добавить код в шаблон.
Код вставляется в шаблон сайта в файлы.php!
Код с всплывающей контактной формой, установленный в коде файла шаблона:
заказать звонок
Если Вы вставляете код вызова формы сразу в Визуальном редакторе для редактирования текста в режиме ТЕКСТ, тогда код будет выглядеть так:
Код с всплывающей контактной формой, установленный в визуальном редакторе записи (в режиме Текст) в админке сайта:
заказать звонок
У меня в примере код для формы “Заказать обратный звонок” – в форме всего два поля – имя и телефон, для того, чтобы администратор сайта перезвонил клиенту.
Рассмотрим данный код.
Это код самой кнопки вызова окна с формой, для этой кнопки можно задавать любые стили, и вставлять ее в любом месте шаблона:
заказать звонок
Это код самого всплывающего окна, его можно оставить под кнопкой вызова окна, а можно убрать в футер для того, чтобы код контента был чище:
В этом коде сама форма вызывается такой функцией:
Где прописано – вывести шорткод для Контактной формы, шорткод указан в самой контактной форме при ее создании:
Чтобы вызывать на одной странице несколько форм, нужно использовать различные id для вызова формы.
Пример вызова двух форм обратной связи в pop-up окне:
Вызываем форму 1
Вызываем форму 2В данном случае для вызова нескольких форм обратите внимание на эти части кода:
... и для второй формы: ... и так далее.
Вместо вывода шорткода формы обратной связи можно выводить любое содержимое, например блоки с текстом или картинками, или же форму для подписки Feedburner, например так выводится форма для подписки через Feedburner на одном из сайтов
Можно использовать этот код для своей формы подписки изменив только адрес ленты http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed на свой.
Важный момент! Для того, чтобы форма имела красивый вид, для нее нужно задать свои стили отображения. Лучше всего обернуть свою форму в div еще на этапе создания формы в CF7.
Добавляем такой код, если используется плагин с fancybox например Easy Fancybox.
В данной статье рассмотрим как сделать форму обратной связи на сайте при помощи плагина Fast Secure Contact Form. Защита от спама (!), легкие настройки, широкие возможности, красивая форма.
Форма обратной связи обязательно должна быть на сайте. Ее можно установить на странице "Контакты", "Обо мне", "О нас", "Услуги". Поисковые системы приветствуют интерактив и повышают сайт в поисковой выдаче. Если вас не интересует и вы не планируете зарабатывать на своем сайте, все равно установите форму обратной связи. Со временем у вас обязательно появятся постоянные читатели и партнеры. Предоставьте им возможность связаться с вами.
В сравнении с другими плагинами Fast Secure Contact Form не использует JavaScript, что снижает использование ресурсов веб-сервера (даже меньше, чем простой плагин Contact Form), защищает от спама при помощи плагина Akismet, который установлен в базовой версии WordPress, а главное (для девочек) можно сделать красивые формы обратной связи без особых знаний.
Плагин Fast Secure Contact Form на английском языке. Здесь вы найдете частичный перевод по настройкам и установке формы (версия 4.0.32) на сайт WordPress (совместим с версией 4.1).
После установки и активации плагина, удалите ссылку на страницу автора плагина:
Плагины - Fast Secure Contact Form - Изменить - файл si-contact-form.php (в предыдущих версиях - si-contact-form-display.php)
Вот так выглядит форма с настройками по умолчанию. Уже неплохо. Но можно еще лучше. В следующих статьях: добавляем поля, настраиваем, украшаем.
В этой же вкладке можно изменить формат полей: дата, время, начало недели, типы и размер вложенных файлов и сохранить пустые строки в сообщении (текстовое поле).
Сохраните сделанные строки при помощи синей кнопочки Save Changes и перейдите к следующем настройкам .
Если у вас остались вопросы как сделать форму обратной связи Fast Secure Contact Form, задавайте вопросы в комментариях. Постараемся на них ответить.
Привет всем. Как, то у меня через чур много энергии и я решил сегодня написать еще одну статейку, которая будет посвящена одному из плагинов WordPress. Довольно таки интересный и функциональный плагин, со своими обязанностями справляется на все 100% и лучше я пока не нашел, что бы оформить обратную связь.
Не хочу долго Вас томить, я думаю Вы и так уже поняли про, что пойдет речь в статье. И так, сегодня будем разбираться и настраивать плагин Contact Form 7 для WordPress , а именно создавать форму обратной связи.
Долго сидел и думал, какие есть минусы в плагина и в голову так ничего и не пришло, а вот плюсов у данного творения очень много.
У нас на сайте Вы можете увидеть и поюзать такую форму если нажмете на пункт меню “Связаться с нами”, выпадет окно, где можно увидеть наглядный пример.
Дайте начинать!
Для начала нам необходимо скачать данный плагин. Можно с нашего сервера вот ссылка — >или же с официального сайта вот ссылка — > Скачать с официального сайта .
После, того как скачали необходимо его установить на . Как устанавливать, я не буду описывать, думаю Вы должны этот процесс знать от А до Я. Скачали, установили, теперь непосредственно переходим в сам , что бы разобраться и настроить его.
Теперь когда вы скачали и установили всё как нужно, переходим в административную панель WordPress и находим пункт Contact Form 7 , кликаем по нему и мы попадаем на страницу добавления новой формы.
Для того, что бы создать новую форму необходимо нажать на “Добавить новую ”, далее выбираем язык (русский по умолчанию) и нажимаем “Добавить новую”. После всех проделанных шагов у Вас должно быть вот такая картина:
Форма создана, теперь будем ее настраивать, под ваши нужды и для начала даем ей название. В моем случае я назову “Тест форма ”, вы называйте как хотите и после этого нажимайте «Cохранить». Теперь вы можете увидеть, шорткод который необходимо будет вставлять в код сайта, где будет выводится данная форма.
Понадобится код нам немного позже, так как необходимо сначала настроить форму. Переходим к шаблону формы и настраиваем его.
Справа выпадающий список “Сгенерировать тег ”, если его раскрыть можно увидеть много полей которые добавляются в форму.
Слева можно увидеть поля которые уже добавлены в форму.
Давайте для примера, сделаем простенькую форму в которой будет имя, почта, телефон, текстовый вопрос для защиты от спама, сообщение и кнопка отправить.
Приступает.
Делаем текстовое поле для имени. В выпадающем списке “Сгенерировать тег” выбираем “Текстовое поле ”. Ставим галочку обязательное поле, даем ему название в моем случае “NAME” и присваиваем id, что бы можно было поле оформить с помощью css стилей. У меня получилось id=”name”. Внизу можно увидеть текст “Скопируйте этот код и вставьте его в шаблон формы слева ”. Берем этот код и копируем в шаблон формы, как на картинке:
Для почты (e-mail) аналогично делаем, для телефона выбираем из списка “Сгенерировать тег”, поле “Номер телефона ” и тоже по аналогии делаем.
Для настройки сообщения выбираем “Текстовое поле ” и делаем тоже по аналогии со всем выше описанным.
Теперь добавляем поле «Вопроc «. Для этого в выпадающем списке выбираем пункт “Вопрос ”, задаем ему название. В поле Вопрос|Ответ, можно задавать разные вопросы и ответы, под полем приведен пример логического вопроса, можно задавать текстовый, например “3 по счету месяц года?| Март” и т.д. Код вставляем как и раньше.
И последнее что нам необходимо, это кнопка “Отправить ”, можно оставить ту, которая в шаблоне или в списке “Сгенерировать тег” выбираем “Кнопка отправки”. Шаблон готов, нажимаем кнопку “Сохранить ”.
Давайте проверим, что у нас получилось, копируем шорткод и вставляем его на страницу или в любую часть кода куда необходимо. Я вставлю на тестовую страницу.
Вот что у меня получилось:
У Вас должно быть, что-то похожее.
Настройка адресата формы и сообщений
Опускаемся немного ниже шаблона формы и видим настройки адресата.
В конце не забываем сохранятся.
Если опуститься еще ниже, то можно увидеть настройки сообщений. Здесь всё на русском, поэтому можете править под свои нужды, как хотите. Здесь думаю сами разберетесь
Форма готова, можно переходить тестировать и смотреть приходит ли сообщение на почту, которую Вы указали.
У меня всё работает отлично, после нажатия кнопки “Отправить”, вижу сообщение “Сообщение было успешно отправлено. Спасибо . ” Можете тестировать и смотреть какие ошибки форма будет выдавать если не правильно ввести данные.
Что касается css стилей, их можно добавить в главный css файл style.css. С помощью firebag, можете посмотреть id и классы полей и присвоить им соответствующие стили.
Плагин Contact Form 7 для WordPress очень функциональный, можно сделать форму любой сложности, я уверен Вы в этом убедились. На этом я буду заканчивать, если какие-то моменты не до конца ясны, пишите в комментарии буду пытаться помочь разобраться. Спасибо.
Для кровли крыши в Санкт-Петербурге.
Всем привет! Сегодня я вам расскажу, как можно поставить форму обратной связи для W ord P ress с помощью плагинов, а также простого кода разными способами. Итак, начнем с того, что хоть форма обратной связи у меня не стоит, скорее всего, она вам понадобится по ряду следующих причин:
— Удобство и оперативность. Если вы продаете что-нибудь или оказываете платные услуги, то форма обратной связи вам просто жизненно необходима. Представьте, что клиент нашел подходящий ему товар, но у него осталось несколько вопросов, которые не дают ему покоя. В таком случае он наверняка захочет с вами связаться, чтобы уточнить некоторые детали. Если вы из своих контактных данных оставили только емайл, то это может оказаться большой проблемой для покупателя, ведь в наше время уже не так много людей пользуется почтой, а в основном сидят в социальных сетях.
Так вот иногда бывает так, что клиент может просто сидеть с другого компьютера, у которого не авторизована почта, а пароль он не помнит. Или, например, пока он заходил в свою почту у него появились сомнения по поводу того можно ли вам вообще доверять и нужна ли ему эта вещица, которую вы предлагаете. Как видите, пока клиент доползет до своего почтового ящика, он с большой вероятностью передумает или от простой лени пойдет искать более привлекательное предложение, где будет ниже цена и удобная обратная связь с покупателями.
— Защита своего емайл адреса. Если вы когда-то вели свою рассылку, то вам наверняка приходили письма следующего содержания: «Продам емайл адреса недорого» и т.д. Данные емайлы собирают со всего интернета специальные боты (роботы), на которые впоследствии будет посылаться спам письма. Если не хотите оказаться в их числе, то вам нужно нигде не светить (показывать) свой адрес от почты. В моем случае это уже не имеет никакого смысла, так как мое мыло (почта) гуляет по интернету более 3 лет и зарегистрировано более чем на 1000 сайтов.
Кстати, давно, чтобы хоть как-то бороться со спамом многие владельцы сайтов, которые еще не знали о форме обратной связи, вместо своей почты оставляли ее картинку. В таком случае боты не могли занести емайл в спамерскую базу, но это вызывало неудобство для посетителей. Кто захочет по буквам целый час вводить чей-то ящик, когда на сегодняшний день есть две классные кнопки «скопировать» и «вставить».
В интернете на сегодняшний день просто море разнообразнейших расширений, которые создают форму обратной связи для посетителей. Со многими вы сегодня познакомитесь в этой статье.
1 ) Итак, представляю вам плагин Usernoise.
На мой взгляд, этот самый классный плагин обратной связи, который идеально подойдет для многих интернет-магазинов и бизнесменов. Данная форма появляется как попап-окно и его можно вызвать с любой страницы сайта, нажав справа или слева на специальную кнопку.
Установка и настройка плагина Usernoise.
5 ) Установка и настройка плагина Contact Form 7.
Вы можете удивиться, но я описал только самую малую часть, как можно сделать форму обратной связи для WordPress. Как бы я ни пытался объять необъятное, у меня это не вышло. Итак, форму обратной связи можно сделать еще через ряд следующих плагинов: Fast Secure Contact Form , Contact Form by Contact ME , Visual Form Builder , nForms – WordPress Form Builder , Mapped Contact Form , Ninja Forms . Помимо этого еще есть разнообразные сервисы, такие как main-ip.ru и smartoforms.ru .
На этом все, если будут вопросы, задавайте.