Contact Form 7 — WordPress плагин для контактной формы

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

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

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

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

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

• Оптимизируем плагин контактной формы Contact Form 7
• Онлайн формы на WordPress — 20 лучших премиум плагинов от CodeCanyon
• Обзор лучших плагинов контактных форм для WordPress
• Использование контактных форм в WordPress
• Как добавить форму Google Forms на ваш сайт на WordPress
• Как создать простую контактную форму для WordPress

Официальный сайт — 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 /> [text* your-name] </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 [text first-name] <br/>
		Email [email* your-email]
	</div>
	<div id="right">
		Last Name[text last-name] <br/>
		Phone[text your-phone]
	</div>
</div>

Subject [text* your-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. Вот плагины, которые могут решить ваши проблемы:

• WP Mail SMTP
• Configure SMTP

Скачайте и установите выбранный плагин в 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.

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

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

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/