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 Form 7 — WordPress плагин для контактной формы

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

Код формы

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

Contact Form 7 — WordPress плагин для контактной формы
<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
Contact Form 7 — WordPress плагин для контактной формы

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

  • основные поля ввода заголовка(адресат, отправитель и тема);
  • тело письма;
  • дополнительные заголовки;
  • прикрепленные файлы;
  • режим 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 сервера на странице параметров.

Ваши сообщения о событиях

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

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

Даже лучше, мы можем использовать 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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *