Добавление return в шорт-код. Размещение формы обратной связи во всплывающем окне

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

Каталог WordPress насчитывает десятки плагинов контактных форм. Но наиболее популярным среди них (более миллиона установок) является Contact Form 7 , на примере которого мы и будем рассматривать создание контактной формы на сайте.

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

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

После установки и активации плагина в админ-панели появляется целый раздел:

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

Итак, введя название, например, «Связаться с нами » и нажав кнопку Сохранить , Вы таким образом создадите готовую к показу контактную форму. Чтобы ее увидеть, нужно перейти Contact Form 7 > Контактные формы .

Обратите внимание на значение поля Шорткод . Код, взятый в квадратные скобки, будет использован для показа формы на сайте.

Вывод формы на сайте

Чтобы посетители сайта смогли воспользоваться формой контактов, ее где-то нужно вывести. Для этого создадим отдельную страницу с названием, например, «Связаться с нами «. Итак, переходим Страницы > Добавить новую . В заголовке пишем «Связаться с нами «, а в поле снизу вставляем вышеуказанный шорткод. В итоге должно получится:

Современный сайт невозможно представить без формы обратной связи. Это неотъемлемая часть должна присутствовать на любом сайте, независимо от его тематики. Контактная форма позволяет вебмастеру полноценно общаться со своими посетителями, при этом не публикуя в свободном доступе своих данных, таких как e-mail или номер телефона.

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

Какие задачи решает контактная форма на сайте?

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

  • Поддержание контакта с аудиторией сайта. Вряд ли кто-то будет спорить с тем, что просто так заполнять форму обратной связи никто не будет. Скорее всего, у человека, который идет на это, возник какой-то вопрос, который он бы хотел задать лично автору сайта. В итоге владелец сайта уже получает заинтересованного пользователя, а может быть даже и потенциального клиента, который поделился своими контактными данными. То есть дальше уже все будет зависеть от владельца сайта.
  • Призыв к действию. Что такое призыв к действию и как он подталкивает пользователей к выполнению различных действий, пояснять не нужно. Но именно его можно связать с контактной формой на сайте. Например, в обмен на контактные данные пользователя, ему можно предложить закрытую рассылку с полезными материалами, скидку на покупку в интернет-магазине, участие в розыгрыше призов и т.д. Такие призывы могут не только помочь в сборе базы контактов для дальнейшего взаимодействия, но и привлечь новых потенциальных клиентов.
  • Оживление страниц при помощи интерактивных форм. Контактные формы могут быть не только статичными. Всплывающие формы, хоть и кажутся многим пользователям сайтов навязчивыми, могут вполне «оживить» страницы сайта. Главное, при создании таких форм - не перестараться.
  • Как обзавестись контактной формой?

    Снабдить свой сайт подобной формой несложно. Контактная форма html, которая имеет всего несколько полей - вполне решаемая задача для профессиональных фрилансеров, которые за небольшую сумму смогут ее сделать. Кроме того, код контактной формы можно найти и самостоятельно в интернете. Но вот только у таких методов есть немало недостатков. Дело в том, что такая интерактивная форма - это лицо сайта, а значит, она должна быть привлекательной. Что делать если в ней что-то не будет устраивать, особенно спустя какое-то время? Где искать того разработчика, который писал код формы, чтобы он внес нужные изменения? А если отправка формы php найдена на просторах глобальной сети, а навыков в программировании нет, то изменение формы кажется вообще делом невозможным.

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

    FormDesigner - идеальное решение для создания контактной формы

    Благодаря использованию онлайн-конструктора форм FormDesigner создать свою интерактивную форму обратной связи стало просто, как никогда. Во-первых, это быстро, всего несколько кликов и форма готова для размещения на сайт. Во-вторых, работать с конструктором неимоверно просто, для этого не нужно быть программистом или иметь специальные навыки или знания. Форма отправки email благодаря конструктору будет создана даже начинающим вебмастером благодаря понятному и простому интерфейсу. В- третьих, в уже созданную форму всегда можно внести изменения в соответствии с новыми пожеланиями или необходимостью. Редактировать форму также просто, как и создавать новую, а благодаря отображению изменений в онлайн-режиме можно сразу видеть все изменения, которые вносятся в форму. Помимо этого, сайт сайт предоставляет и другие преимущества для пользователя, среди которых:

    • Создания контактных форм с возможность отправлять файл владельцу сайта;
    • Сообщения об ошибках при создании форм;
    • Возможность создания мультиязычных форм;
    • Визуальный дизайнер создаваемых форм;
    • Подробная статистика по всем заявкам и многое другое.
    Работа с сервисом FormDesigner

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

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

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

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

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

    Отдельно стоит отметить, что если при работе с сервисом возникнут вопросы, то можно смело обращаться к технической поддержке , которая поможет решить возникшие проблемы. Начать использовать онлайн-конструктор можно абсолютно бесплатно, при этом получив доступ ко всем наиболее важным функциям онлайн конструктора. С использованием сервиса FormDesigner создание собственных веб-форм для сайта становится неимоверно простым и быстрым.

    Видео урок по созданию контактной формы на сайте

    Форма обратной связи крайне полезна для вашего сайта – она позволяет держать ваш адрес электронной почты подальше от чужих глаз (уменьшая количество спама) и помогает пользователям легко связаться с вами напрямую через сайт.

    Если вы создали страницу Свяжитесь с нами на сайте WordPress, то добавить форму обратной связи, настроить её и начать получать сообщения не составит особого труда.

    Самым легким способом для создания формы обратной связи является использование – существует много различных плагинов, и вы можете выбрать любой. Однако в этом руководстве мы будем использовать Contact Form 7.

    С более чем 3 миллионами установок, Contact Form 7 является самой широко используемой формой обратной связи для WordPress. Её интуитивно понятный интерфейс и быстрая установка помогут вам создать форму обратной связи в считанные минуты.

    Перед тем, как вы начнете это руководство, вам понадобится следующее:

    • Доступ к панели управления WordPress
    Шаг 1 – Установка Contact Form 7
  • Войдите в вашу панель управления WordPress и нажмите на Плагины → Добавить новый в левом меню панели.
  • Найдите Contact Form 7 в поиске и нажмите Установить .
  • После установки, нажмите Активировать для активации плагина.
  • Шаг 2 – Как создать форму обратной связи

    После активации плагина в левом меню панели появится новый раздел Contact Form 7 .

  • Нажмите Contact Form 7 → Добавить новую для создания вашей первой формы.
  • Впишите название вашей формы обратной связи, например WordPress Contact Form .
  • Некоторые надписи и текстовые области уже были расположены, чтобы помочь вам разобраться в процессе. Вы можете удалить их или добавить новые надписи и текстовые области, выбрав их из списка сверху.
  • Если вы не уверены какие из элементов формы вам нужны, то просто оставьте их как есть, вы сможете вернуться и отредактировать их позже.

    В зависимости от выбранных элементов ваш код должен выглядеть примерно так:

    Ваше имя (обязательно) Ваш e-mail (обязательно) Тема Сообщение

    • Вы можете добавлять и удалять элементы в зависимости от ваших нужд. Для удобства используйте специальные инструменты над областью с самой формой.
    • Значок * в коде означает, что данное поле обязательно для заполнения.
    Шаг 3 – Настройка формата сообщений

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

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

    ВАЖНО! Убедитесь, что вы вписали правильный адрес электронной почты в поле Кому – это тот адрес, на который будут доставляться все сообщения.

    Шаг 4 – Настройка уведомлений

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

    Шаг 5 – Сохранение и публикация формы

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

  • Выделите шорткод и скопируйте его
  • Вставьте шорткод на страницу, запись или виджет, где вы хотите, чтобы форма отображалась
  • Результат должен быть примерно таким
  • Шаг 6 – Проверка формы обратной связи для WordPress

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

    Чтобы сделать это, просто посетите страницу вашего сайта с формой и отправьте сообщение с помощью неё – вы всегда можете вернуться обратно к редактору формы и сделать необходимые изменения.

    Заключение

    Это руководство помогло вам узнать, как создать форму обратной связи с помощью плагина для WordPress – Contact Form 7. Теперь вы можете получать сообщения от своих пользователей напрямую через сайт.

    Хотите узнать еще больше? Вы можете поэкспериментировать с тегами и шаблонами и изменить практически всё. Вы также можете попробовать настроить Flamingo – плагин для хранения сообщений, чтобы хранить все полученные сообщения в базе данных (это довольно полезно, если у вас есть проблемы с почтовым сервером).

    Этот урок покажет как создать самую простую контактную форму для HTML -шаблона.

    Прежде всего создайте 2 файла: contact_form.html и contact.php . Первый файл будет содержать код Вашей контакт-формы, а второй будет обрабатывать данные этой формы.

    HTML

    Ниже приведен пример HTML -кода контактной формы:

    Your name

    Your e-mail

    Message

    В браузере она будет выглядеть следующим образом:

    Давайте кратко рассмотрим основные аспекты данной формы. Тег должен иметь 2 дополнительных атрибута:

    action=»contact.php» — определяет куда отправлять данные из контактной формы после отправки письма.

    method=»post» — определяет как отправить данные из контактной формы в файл, заданный атрибутом action . Теги и должны иметь атрибут "name" с уникальным идентификатором. Этот атрибут используется для идентификации данных контактной формы после отправки письма. Следует также отметить 2 дополнительных элемента, которые используются в качестве кнопок Отправить и Очистить, первый елемент должен быть определен тегом type="submit", а второй — тегом type="reset".

    Процедура создания контактной формы является довольно простой.

    PHP

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

    Присвоение данных из каждого поля контактной формы (cf_name, cf_email, cf_message) следующим PHP-переменным ($ cf_message, $ field_email, $ field_message) $field_name = $_POST["cf_name"]; $field_email = $_POST["cf_email"]; $field_message = $_POST["cf_message"];

    Функция $mail_to должна содержать электронную почту владельца сайта, это именно тот адрес, куда будут отправляться сообщения. Вы можете указать сразу несколько адресов электронной почты, разделяя их запятой (например, [email protected], [email protected])

    $mail_to = "[email protected]";

    Тема письма, которое Вы получите:

    $subject = "Message from a site visitor " . $field_name;

    Построение структуры сообщения :

    $body_message = "From: ".$field_name."\n"; $body_message .= "E-mail: ".$field_email."\n"; $body_message .= "Message: ".$field_message;

    Построение заголовков сообщения:

    $headers = "From: $cf_email\r\n"; $headers .= "Reply-To: $cf_email\r\n";

    Определяем функцию mail() и присваиваем её переменной $mail_status, которая используются для проверки успешности отправки письма.

    $mail_status = mail($mail_to, $subject, $body_message, $headers);

    Если функция mail() выполнена успешно, тогда используйте код ниже:

    If ($mail_status) { ?> // Print a message alert("Thank you for the message. We will contact you shortly."); // Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com window.location = "contact_page.html"; // Print a message alert("Message failed. Please, send an email to [email protected]"); // Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com window.location = "contact_page.html";

    Вы можете загрузить готовые файлы contact_form.html и contact.php

    Приветствую вас, друзья. Сегодняшний урок поможет вашему wordpress сайту обзавестись симпатичной и функциональной формой обратной связи. Сделаем мы ее с помощью плагина Contact Form 7. В свое время я потратил немало времени на поиски нормальной контактной формы и достойной альтернативы данному плагину так и не нашел.

    Возможности плагина

    Еще раз напомню, что мы будем работать с плагином, поэтому, если вам нужна обратная связь без плагина, вам лучше посетить статью про , там настройка чуть посложнее, но, зато, вариант более универсальный (подойдет каждому сайту) и меньше нагружает сервера.

    Главное достоинство контактной формы на Contact Form 7 в простоте ее настройки, почти неограниченной функциональности и автоматической подстройке дизайна под любые шаблоны WordPress . С ее помощью можно сделать не только форму для отправки сообщений с сайта. Плагин можно использовать для создания кнопки заказа, обратного звонка или сложной анкеты с чекбоксами и выпадающими списками. Также, есть возможность прикреплять для передачи файлы.

    Одним словом, плагин мегафункциональный.

    Если вас до сих пор волнует вопрос «делать или не делать форму связи?» (можно обойтись простым размещением контактных данных на нужных страницах), то я скажу однозначно – делать стоит.

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

    Во-вторых, контактную форму можно настроить и это позволит вам получать письма стандартного образца – в них будет проще ориентироваться. Например, вы можете поставить стандартный заголовок для сообщения «Заказ» и все письма со страницы заказов будут приходить с таким заголовком.

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

    В-четвертых, это просто стильно и современно.

    Установка и настройка плагина Contact form 7

    Плагин есть в общей базе wordpress, поэтому нет необходимости искать где-то его файлы, скачивать их себе и потом закидывать на хостинг. Все делается проще – через админку wordpress входите в раздел плагины, набираете в поле для поиска «Contact form 7» и устанавливаете его. Если вы никогда плагины не ставили, то подробная инструкция как установить плагин .

    Настройка плагина Contact form 7

    Настройка плагина состоит из двух этапов.

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

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

    Итак, поехали.

    Для начала в левом меню панели администратора находим вкладку Contact form 7. Под ней всплывет меню с двумя пунктами – «Формы» и «Добавить новую».

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

    Настройка формы разделена на отдельные блоки. Рассматривать их я буду по порядку.

    Блок «Название формы»

    Первый блок отвечает за название вашей формы – поставьте курсор на надпись «Без названия» и введите нужное вам имя. Это название будет отображаться только вам в списке контактных форм плагина, так что делайте его понятным для вас, чтобы в будущем не запутаться во всем многообразии.

    Блок «Шаблон формы»

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

    Звездочками помечены поля обязательные для заполнения. Если такое поле оставить пустым, то сообщение не будет отправляться.

    Расположение полей можно настраивать с помощью обычной html разметки.

    Что касается настройки самих полей, то вы можете удалить ненужные и добавить те, которые вам потребуются. Если вы не хотите, чтобы тему письма вносили вручную – просто удалите соответствующий блок.

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

    Выберите нужный элемент и настройте его параметры. Плагин на русском, поэтому все настройки интуитивно понятны.

    Первый чекбокс указывает на обязательность или необязательность поля (он добавляет звездочку).

    После настройки поля у вас появятся 2 шорткода:

    • «Скопируйте этот код и вставьте его в шаблон формы слева» – этот код вставляется в код формы аналогично со всеми остальными;
    • «И вставьте следующий код в шаблон письма ниже» – этот код понадобится нам для оформления письма в следующем блоке.

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

    Блок «Письмо»

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

    Наша задача включить в письмо всю информацию.

    Первым пунктом мы указываем электронный адрес, на который будет отправляться сообщение (он может быть любым).

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

    Дальше мы указываем тему письма. Стандартно, тема берется из поля , которое заполняется в форме. Но можно из формы этот элемент удалить, а в поле вписать конкретную тему, задаваемую в каждом письме автоматически. Я так сделал для форм обратной связи со страниц об услугах и рекламе. Сообщения оттуда всегда приходят с одной и той же темой «Заказ услуг» или «Заказ рекламы» – просто и понятно.

    Поле дополнительных заголовков содержит тег «Reply-To: » для того, чтобы при ответе на письмо, полученное с вашего блога вы отсылали сообщение на на блог, а на тот адрес, который указывал отправитель письма в поле формы . Менять это поле не стоит.

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

    В конце указывается сайт, с которого отправлено письмо.

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

    Любую текстовую информацию этого блока (кроме тегов) можно менять по своему вкусу. Также вы можете добавить любые описания и менять теги местами, расставляя их в том порядке, который вам удобен.

    Блок «Письмо 2»

    Если вы хотите, чтобы отправленное вам сообщение получал кто-то еще, то можно поставить галочку в этом блоке.

    Настраивается этот блок аналогично предыдущему. По умолчанию все поля в нем заполнены для того, чтобы письмо ушло тому человеку, который заполнял форму (видимо, чтобы он не забыл).

    Вы можете настроить отправку копии, например, своему менеджеру или бухгалтеру.

    Блок «Уведомления при отправке формы»

    В этом блоке можно настроить сообщения, которые видит пользователь, после того, как он нажмет кнопку отправить сообщение. Хотите что-либо поменять – пожалуйста, я оставил все как есть.

    Активация формы

    После того, как вы заполнили все поля, вернитесь в начало к блоку «Название формы» и нажмите кнопку «сохранить», расположенную справа.

    Плагин поместит созданную вами форму в список действующих и присвоит ей специальный код примерно такого вида:

    [ contact - form - 7 id = "5464" title = "Проверка" ]

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

    Борьба со спамом – Akismet и Captcha

    Спамеры доставляют немало хлопот владельцам сайтов, а каждая новая форма, позволяющая что-то писать, только добавляет количество спам ботов.

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

    Избавиться от спамеров можно двумя способами:

  • Поставить обязательную капчу (это можно сделать дополнительным плагином – Really Simple CAPTCHA).
  • Воспользоваться антиспамерским плагином для wordpress – Akismet.
  • Первый вариант неудобен тем, что заставляет посетителей вручную вводить дополнительные символы. Это не так сложно, но некоторым не нравится.

    Использование плагина Akismet удобнее тем, что он самостоятельно анализирует вводимые данные (имена, email адреса, ссылки) и на основании наработанной базы делает выводы о спамности или неспамности сообщения.

    Кроме того, akismet стоит на большинстве wordpress сайтов для защиты от спама в комментариях к статьям. Значит, при его использовании не потребуется устанавливать дополнительные плагины и создавать лишнюю нагрузку на сайт.

    Защита от спама с помощью Akismet

    1. Устанавливаем плагин Akismet на ваш сайт и активируем его – .

    2. Добавляем в теги контактной формы дополнительные данные:

    • в поле с именем автора дописываем akismet:author
    • в поле с email отправителя письма akismet:author_email
    • в поле для адреса сайта akismet:author_url

    Должно получиться вот так:

    После сохранения, контактная форма должна блокировать все сообщения, отправляемые спамерами. Проверить работу фильтра можно с помощью специального тестового имени “viagra-test-123? – при его вводе должно появляться сообщение об ошибке.

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

    Защита от спама с помощью Really Simple CAPTCHA

    Если вы обнаружите, что Akismet вас не устраивает (пропускает много спама или блокирует нужные сообщения), то вы можете подключить капчу. Для этого установите плагин Really Simple CAPTCHA.

    Открываем для редактирования нужную контактную форму

    В списке тегов выбираем Captcha. В настройках тегов можно выбрать размер картинки с символами, в остальном ничего менять не стоит. В нижней части настроечного окна появятся 2 тега, один отвечает за вывод картинки, второй выводит поле для ввода данных с этой картинки.

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

    Размещение формы обратной связи во всплывающем окне

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

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

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

    Делается это с помощью еще одного плагина – Easy FancyBox.

    1. Установка плагина

    Первым делом устанавливаем сам плагин, он есть в общей базе плагинов, поэтому, достаточно в админке вашего блога в поиске плагинов ввести его название. После установки плагина в разделе «настройки» появится вкладка «медиафайлы».

    В этой вкладке нужно найти перечень типов контента, который должен отображаться во всплывающем окне. По умолчанию стоит только Images, нужно добавить Inline content.

    На этом настройка плагина закончена, переходим к настройке кнопки обратной связи.

    2. Вставляем код на сайт

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

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

    < a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "контактная форма" alt = " контактная форма " src = "http://ссылка на картинку" > < / a >

    < div style = "display:none" class = "fancybox-hidden" >

    < div id = "contact_form_pop" >

    [ contact - form - 7 id = "id вашей формы" title = "название вашей формы" ]

    < / div >

    < / div >

    В коде вам необходимо указать адрес картинки, которую вы используете в качестве кнопки обратной связи, и отредактировать шорткод самой формы – прописать ваш id и title.

    3. Снимаем ограничение на шорткоды в сайдбаре

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

    Чтобы эту функцию разрешить, требуется открыть для редактирования файл function.php (прямо из админки wordpress) и вставить перед закрывающей скобкой «?>» следующий код:

    add_filter("widget_text", "do_shortcode");

    add_filter ("widget_text" , "do_shortcode" ) ;

    Он даст возможность выполнять все шорткоды в сайдбаре.

    У меня получилась вот такая симпатичная всплывающая форма:

    Несколько разных всплывающих форм на одной странице

    Иногда возникает необходимость разместить на сайте несколько форм с разными настройками и полями.

    Например, одна кнопка у вас ведет на форму с именем и телефоном и служит для заказа обратного звонка с сайта, а вторая должна открывать другую форм где идет подробная заявка на заказ (с адресом, полем для описания, возможностью прикрепить файл и т.д.). В самом плагине Contact Form 7 вы можете сделать бесконечное количество вариантов форм, но как их впихнуть в разные кнопки одной страницы?

    Для этого необходимо корректировать код кнопки из предыдущего пункта. Первая кнопка использует представленный выше вариант. Во второй меняются два значения:

  • Меняется ссылка, параметру href присваиваете значение #contact_form_pop_2
  • Изменяете идентификатор id на то же значение #contact_form_pop_2