Форма связи с тема сообщение contact us. Советы, хаки, секреты

24.06.2020

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

Гугл подсказал, что теоретически справиться с задачей сможет плагин Contact Form 7 , представляющий собой конструктор форм обратной связи с отправкой писем на указанный адрес, но вот беда - среди элементов страницы формы не предусмотрено тегов для отправки заголовка страницы или хотя бы ее URL. Но выход нашелся...

1. Создаем форму обратной связи с такими полями, какие нам нужны. Для верстки формы используем обычный HTML+CSS, спецтеги заключаются в квадратные скобки. Все это делается во вкладке "Шаблон формы" на странице настройки плагина Contact Form 7.

Форма заказа при этом выглядит таким образом (при заданном стиле класса order):

Теперь нам нужно обеспечить передачу TITLE и URL страницы в письме. См п.2.

2. Переходим в раздел "Письмо" и формируем шаблон письма. Чтобы передать служебную информацию, можно использовать следующие служебные теги:

  • [_remote_ip] IP-адрес отправителя.
  • [_user_agent] User Agent отправителя.
  • [_url] URL-адрес контактной формы.
  • [_date] Дата отправления.
  • [_time] Время отправления.
  • [_post_id] ID поста (записи) контактной формы.
  • [_post_name] Имя поста (в схеме протокола HTTP).
  • [_post_title] Заголовок записи с контактной формой.
  • [_post_url] Ссылка на страницу отправки.
  • [_post_author] Имя автора публикации.
  • [_post_author_email] Адрес почты автора публикации.

Если вставить в шаблон письма теги [_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 на одном из сайтов