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

Contact Form 7 – бесплатный, простой и гибкий (в WordPress это обычно значит, что есть простая установка для тех, кому нравится простота, и много глубины и сложности для тех, кто любит углубиться) плагин формы обратной связи. По мнению многих, Contact Form 7 — один из лучших плагинов формы контакта для нашей любимой системы управления контентом. Этот плагин был загружен более 1 млн раз.

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

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

Смотрите также:

Официальный сайт — ContactForm7.com. Загрузить плагин можно с директории плагинов WordPress. Подробную документацию можно найти в разделе сайта.

Если вы не знаете, что такое плагины и как их устанавливать, посмотрите этот урок. После установки и активации, вы увидите отдельный пункт меню "Contact" в интерфейса администратора.

Код формы

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

<p>Product *<br /> [select* product "iPhone" "Samsung Galaxy S2" "htc Desire"] </p>
<p>Color *<br /> [select* color "black" "white" "grey"] </p>
<p>Name *<br />  </p>
<p>Email *<br /> [email* your-email] </p>
<p>Preferred payment <br /> [radio paymethod "VISA" "MASTERCARD" "AMEX"]</p>
<p>[checkbox quickdelivery] Quick delivery (1 day)</p>
<p>[submit "Place order"]</p>

Вставка кода формы

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

[contact-form-7 id="38" title="cell-phone-ordering-form"]

Базовый синтаксис

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

[type name values] for example: [radio paymethod "VISA" "MASTERCARD" "AMEX"]

Типы тегов

Вот список всех тегов, которые вы можете использовать в ваших формах:

  • Текстовые поля (text, text*, email, email*, textarea и textarea*).
  • Чекбоксы, радиобаттоны и меню (checkbox, checkbox*, radio, select и select*).
  • Загрузка и прикрепление файлов (file и file*).
  • Капча (captchac и captchar).
  • Контрольный вопрос (quiz).
  • Чекбокс согласия (acceptance).
  • Кнопка отправки (submit).

Создание двух-колоночной формы

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

<!-- TWO COLUMN FORM -->
<div class="clearfix">
	<div id="left">
		First name  <br/>
		Email [email* your-email]
	</div>
	<div id="right">
		Last Name <br/>
		Phone
	</div>
</div>

Subject  <br/>
Message [textarea* your-message] <br/>
[submit "Send"]
<!-- /TWO COLUMN FORM -->

Затем CSS код. Ничего особенного, просто базовый стиль.

#left {  
    width: 300px;  
    float: left;  
}  
  
#right {  
    width: 250px;  
    float: left;  
}  
  
.clearfix:after {  
    content:"\0020";  
    display:block;  
    height:0;  
    clear:both;  
    visibility:hidden;  
    overflow:hidden;  
}  
  
.clearfix {  
    display:block;  
}

Расширенный синтаксис

Синтаксис тегов может быть шире. Параметр options обозначает поведение и вид. Объявление параметров не обязательно, но вот как вы можете это сделать. Обратите внимание, что в этом примере мы используем свойства id и class. Вы можете использовать CSS и JavaScript, чтобы расширить вашу форму.

[type name options values]  
  
for example:  
[radio paymethod id:paynow class:paythis "VISA" "MASTERCARD" "AMEX"]

Установка шаблона письма

В Contact Form 7 вы можете очень просто редактировать шаблоны писем. Текст, HTML код и данные из формы могут комбинироваться соответствующим образом. Обратите внимание, что данные из формы — в скобках. Ниже приведен пример для тела письма.

Dear [yourname],  
  
You have just ordered a [product] product in [color] color!  
Soon you will get an email with the link to where you can pay for your order.  
  
---  
Thanks for buying!  
OurCompany LLC, www.ourcompany.com

Вот список того, что вы еще можете установить через панель администратора:

  • основные поля заголовка (адресат, отправитель и тема);
  • тело письма;
  • дополнительные заголовки;
  • прикрепленные файлы;
  • режим HTML.

Добавление капчи

Плагин позволяет вам вставлять капчу в вашу форму обратной связи для того, чтобы избежать нежелательных сообщений. Contact Form 7 использует в качестве модуля капчи Really Simple CAPTCHA. Перед тем, как мы начнем, вам нужно установить плагин Really Simple CAPTCHA. Убедитесь, что ваша временная папка для файлов капчи существует и открыта для записи. Иначе капча не создастся.

Для использования капчи в ваших формах вам нужно использовать теги формы captchac и captchar.

  • Сaptchac возвращает вопрос капчи и представляет элемент <img /> для изображения капчи.
  • Captchar возвращает ответ на капчу и представляет элемент <input type="text" /> для поля ввода ответа.

Тег captchac должен всегда объединяться с тегом captchar одинаковым именем. Например, вот так:

<!-- insert this into your CF7 form code -->
[captchac captcha-1] [captchar captcha-1]

Ошибки отправки

Failed to send your message. Please try later or contact administrator by other way...

Если сервер не позволяет отправлять почту через sendmail(), вы можете использовать плагин для отправки почты через SMTP. Оба варианта совместимы с WordPress 3.3. Вот плагины, которые могут решить ваши проблемы:

Скачайте и установите выбранный плагин в WordPress. Укажите настройки для вашего SMTP сервера на странице настроек.

Свои сообщения о событиях

Мы можем просто изменить сообщения, которые отображаются при некоторых событиях.

Даже лучше, мы можем использовать HTML код в блоках ввода! Попробуйте этот:

Your message was successfully sent. Thank you!
<br/>
<img src="http://domain.com/yourpicture.jpg"/>

Поддержка языков

Contact Form 7 по умолчанию показывает формы на английском, но включает больше 40 языков для перевода, и вы можете создать форму на любом языке. Чтобы использовать интерфейс администратора на своем языке, установите константу WPLANG в вашем файл wp-config.php.

// Change this line:
define ('WPLANG', 'ja');

Использование введенных данных на сервере без отправки почты

Если вы хотите что-нибудь отличное от отправки по почте, вам нужно использовать следующий код:

add_action("wpcf7_before_send_mail", "wpcf7_do_something_else");

function wpcf7_do_something_else(&$wpcf7_data) {

    // Here is the variable where the data are stored!
    var_dump($wpcf7_data);

    // If you want to skip mailing the data, you can do it...
    $wpcf7_data->skip_mail = true;

}

Установка прав для изменения формы только администраторами

Чтобы защитить возможность редактирования, используйте следующий код:

define('WPCF7_ADMIN_READ_CAPABILITY', 'manage_options');
define('WPCF7_ADMIN_READ_WRITE_CAPABILITY', 'manage_options');

Динамическое заполнение полей

По умолчанию значения в Contact Form 7 статические. Например, у вас есть параметр GET, который вы хотите использовать для заполнения формы. Тогда решением для вас является Contact Form 7 Dynamic Text Extension. Этот плагин поддерживает новый тип тега, который разрешает динамическую генерацию контента. После установки и активации плагина, у Contact Form 7 будет два новых типа: Dynamic Text Field и Dynamic Hidden Field.

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

Источник: WP.tutsplus.com

Вам понравился материал?

Лучшие темы от Tesla Themes:

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

140 комментариев

сначала новые
по рейтингу сначала новые по хронологии
Михаил

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

First name
Email [email* your-email]

Last Name
Phone

Subject
Message [textarea* your-message]
[submit "Send"]

И куда именно в CCS вставлять этот:
#left {
width: 300px;
float: left;
}

#right {
width: 250px;
float: left;
}

.clearfix:after {
content:"020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}

.clearfix {
display:block;
}
Пожалуйста, не откажите в подсказке

Дмитрий

Можно как-то передавать не через шорткод, а функцией и можно ли на нем реализовать регистрацию?

Люди подскажите пожалуйста, как вернуть русский язык в Форму? А то из версии 4.4 языковой файл выпилили, а как локализовать по-новому, не совсем ясно.

Станислав

Добрый день! Подскажите, пожалуйста, как изменить value «Выберите файл» на «Оберіть файл», когда я хочу прикрепить файл. Спасибо

Добрый день! Есть потребность создать форму (допустим, 10 заполняемых полей) данные из которой будут заноситься в БД. При этом должна быть и обратная возможность - т.е. введя фильтры на сайте получить выгрузку из БД.
Условно говоря имея в форме поля "Имя" и "Возраст" введя фильтр "20-25 лет" - получить список имен из БД. Такое вообще возможно организовать на WP? Есть ли какие то плагины или другие готовые решения?

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

Виктор

В письмо нужно вставить тег [_url]
Подробнее тут:
http://contactform7.com/special-mail-tags/

Латифа

Здравствуйте! Подскажите пожалуйста, как сделать так чтобы сообщение об успешной отправке сообщения открывалось в отдельном окошке?

Дмитрий

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

Гриффон

А как поменять почту на которую идет отсылка письма?
Стоит данный модуль, но при регистрации указывал свою основную почту, а теперь регнул новую на сайт, и хочу чтобы уведомления из формы отсылались на новую, выставил на профиле новую и в настройках /wp-admin/options-general.php новую, но отсылка идет все равно на старую.

Александр

У меня есть поле dropDownMenu. В нем выбирается город (Предположим, Москва либо Санкт-Петербург). Как мне сделать так, что при выборе одного города (Допустим Москва), данные формы уходили на одну почту (допустим, info@moscow.ru), а при выборе Санкт-Петербурга - на другую (ДОпустим, info@spb.ru). Помогите организовать данную фичу! Понимаю, что стандартными настройками тут не обойтись. Если что, то городов больше чем 2