Все поля (теги) формы

Contact Form 7

В предыдущей статье мы ознакомились с плагином Contact Form 7 и его настройками. А здесь, будут подробно рассмотрены все поддерживаемые типы полей (теги шаблона формы) и параметры каждого из них, а также стили (css классы) элементов формы. Это неофициальная документация ко всем тегам шаблона формы Contact Form 7.

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

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

[text my_name]
<input type="text" name="my_name" value="">

Также каждый тег (поле) имеет свои опции (атрибуты тега). Опции тега указываются после названия и имени поля. Для примера, добавим атрибут class для предыдущего поля text:

[text my_name class:myclass]
<input type="text" name="my_name" class="myclass" value="">

Синтаксис тега шаблона (поля) формы:

Атрибуты тегов (полей)

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

Атрибуты, которые можно применить только к конкретному тегу формы, будут указаны отдельно для каждого тега.

*
Знак * сразу после типа поля делает поле обязательным для заполнения.
Пример: [text* my_name]
id(строка)
Название идентификатора. css атрибут id, используется для оформления поля.
Пример: id:foo
class(строка)
Название класса. css атрибут class, используется для оформления поля.
Пример: class:bar
Можно указать несколько классов: [text your-text class:y2008 class:m01 class:d01]
minlength и maxlength(число)

Это HTML5 атрибуты, которые ограничивают ввод символов в поле, как по нижнему порогу (минимальному), так и по верхнему (максимальному). Пользователь не сможет ввести в поле меньше знаков (minlength) или больше знаков (maxlength), чем определено этими значениями.

Для minlength, если введённый текст будет меньше этого значения, то пользователь получит предупреждение "Поле слишком короткое". И наоборот для maxlength.

Примеры:
minlength:10 - [textarea name minlength:10]
maxlength:90 - [textarea name maxlength:140]
оба сразу - [textarea name minlength:10 maxlength:140]

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

Данные параметры поддерживают следующие типы полей: text, textarea, email, url, tel, quiz.

Существует старая запись этих параметров:

[textarea* your-message 10/140]

Параметр maxlength в явном виде приоритетнее, поэтому если дописать maxlength:150, то 140 будет переписано на 150.

size(число)
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Может быть переопределено в CSS стилях с помощью атрибута width.
Пример: size:50 - [text name size:50]
По умолчанию: 40
default(строка/число)

Значение поля по умолчанию.

Пример: default:значение.

default для авторизованных пользователей.

Если пользователь, заполняющий форму, авторизован, то по умолчанию можно подставлять значение взятое из данных его профиля. Например, если указать атрибут default:user_email - [email usermail default:user_email], то в поле автоматически подставиться значение - «email текущего пользователя», который просматривает форму...

Все специальные поля для авторизованного пользователя:

  • default:user_login - Логин пользователя
  • default:user_email - Электронная почта пользователя
  • default:user_url - Адрес сайта пользователя
  • default:user_first_name - Имя пользователя
  • default:user_last_name - Фамилия пользователя
  • default:user_nickname - Ник пользователя
  • default:user_display_name - Отображаемое на сайте имя пользователя
  • default:user_description - Описание (биография) пользователя.
  • default:user_* - где вместо * можно указать любое значение из данных пользователя (см. get_userdata()). Если оригинальные данные пользователя начинаются не с user_ то тут их нужно начать с user_. Допустим, у юзера есть метаполе facebook и нам нужно указать значение этого метаполя, пишем так: default:user_facebook

Остальные специальные поля атрибута default:

  • default:post_meta - получит значение метаполя ключ которого будет равен имени поля. Например: [text mymeta_key default:post_meta] выведет поле формы в значении которого будет выставлено значение метаполя записи mymeta_key

  • default:get - выставит значение GET параметра c ключом равным имени поля: [text mykey default:get] - http://example.com/?mykey=значение

  • default:post - выставит значение POST параметра c ключом равным имени поля: [text mykey default:post] - в POST передаем данные mykey=значение.

  • default:shortcode_attr - выставит значение атрибута шорткода с ключом равным имени поля. Например тег шаблона формы такой: [text mykey default:shortcode_attr], тогда в шоркоде самой формы при вызове в контенте записи указываем атрибут mykey: [contact-form-7 id="123" mykey="значение"]. Подробнее читайте ниже.

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

    add_filter( 'shortcode_atts_wpcf7', 'my_shortcode_atts_wpcf7', 10, 3 );
    function my_shortcode_atts_wpcf7( $out, $pairs, $atts ){
    	if( isset($atts['mykey']) )
    		$out['mykey'] = $atts['mykey'];
    
    	return $out;
    }

Для checkbox, radio и select:

  • default:номер - default:2 - выберет второй элемент списка...
  • default:номер_номер - default:2_3 - выберет второй и третий элемент списка (для мульти-селектов и чекбоксов)...

Подробнее про default и его варианты, читайте в конце статьи.

placeholder или watermark(строка)

Текст который будет показан в атрибуте placeholder.

Эту опцию нужно использовать в конце всех опций тега шаблона: [text* myname class:foo placeholder "John"], а не [text* myname placeholder "John" class:foo]

Можно использовать watermark вместо placeholder - это синоним (алиас) атрибута.

akismet(строка)

Спам защита. Требует установленного и активированного плагина Akismet.

Этот атрибут рекомендуется установить для трех полей: имя автора (text), email и url или хотя бы для одного из них. Варианты атрибута для каждого поля:

  • akismet:author - [text* your-name akismet:author]
  • akismet:author_email - [email* your-email akismet:author_email]
  • akismet:author_url - [text your-url akismet:author_url]

Как это работает? При отправки данных, значения указанных полей будут обработаны на сервере akismet и если они не пройдут проверку, то письмо не будет отправлено, а пользователь увидит ошибку:

Сообщение исчезнет при фокусе на любом из полей.

Теги шаблона формы (поля)

Ниже описаны все теги плагина, которые можно использовать в шаблоне формы. Такие теги превратятся в input, textarea и select элементы HTML.

К текстовым полям относятся типы: text, email, url, tel, textarea, а также тег count тесно связан именно с текстовыми полями.

К числовым полям относятся два типа: number и range. Это HTML5 поля, потому старые браузеры их не поддерживают, взамен отображая текстовое поле (text).

text

Поле для текста в одну строку.

Поддерживаемые опции (атрибуты):

  • id
  • class
  • minlength и maxlength
  • size
  • placeholder
  • default - можно использовать: user_login, user_first_name, user_last_name, user_nickname, user_display_name
  • akismet:author

Пример:

[text* your-name class:required placeholder "John Smith"]

HTML:

<span class="wpcf7-form-control-wrap your-name">
	<input type="text" name="your-name" value="John Smith" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required required" aria-required="true" aria-invalid="false">
</span>

email

Поле предназначено для ввода email.

Поддерживаются атрибуты:

  • id
  • class
  • minlength и maxlength
  • size
  • placeholder
  • akismet:author_email
  • default:user_email или default:любая@почта.ру

Пример:

[email your-email placeholder "example@example.com"]

HTML:

<span class="wpcf7-form-control-wrap your-email">
	<input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false" placeholder="example@example.com">
</span>

url

Поле для ввода интернет адреса (URL).

Поддерживаются атрибуты:

  • id
  • class
  • minlength и maxlength
  • size
  • placeholder
  • akismet:author_url
  • default:user_url или default:значение

Пример:

[url your-url placeholder "http://example.com"]

HTML:

<span class="wpcf7-form-control-wrap your-url">
	<input type="url" name="your-url" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-url" aria-invalid="false" placeholder="http://example.com">
</span>

tel

Поле для ввода номера телефона.

Поддерживаются атрибуты:

  • id
  • class
  • minlength и maxlength
  • size
  • placeholder

Пример:

[tel your-tel placeholder "123-456-7890"]

HTML:

<span class="wpcf7-form-control-wrap your-tel">
	<input type="tel" name="your-tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" placeholder="123-456-7890">
</span>

textarea

Поле для ввода многострочного текста.

Поддерживаются атрибуты:

  • id
  • class
  • minlength и maxlength
  • placeholder
  • (cols)x(rows) - где cols - ширина поля в символах, а rows - высота поля в строках текста. Имеет 3 формата: (cols)x(rows), (cols)x и x(rows).

Пример:

[textarea your-message 40x10 placeholder "Ваше сообщение ..."]

HTML:

<span class="wpcf7-form-control-wrap your-message">
	<textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Ваше сообщение ..."></textarea>
</span>

Для textarea значение поля можно указать двумя способами:

  1. [textarea your-message "Текст по умолчанию ..."]
  2. [textarea your-message]Текст по умолчанию ...[/textarea]

Если в textarea будут html теги, то после отправки формы вы, возможно, получите 500 ошибку сервера!

count (счётчик символов)

Тег count позволяет установить счетчик, когда нужно показать пользователю, сколько введено символов или сколько символов осталось до максимального значения (если параметр maxlength).

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

Тег счётчика можно использовать в любом месте шаблона формы.

Например, у нас есть текстовое поле для сообщения:

[textarea* your-message minlength:10 maxlength:140]

Тогда делаем так:

[textarea* your-message minlength:10 maxlength:140]
[count your-message]

Поле ограничено - минимум 10 и максимум 140 символами. В данном случае счётчик будет показывать сколько всего введено символов.

Иногда удобнее показать сколько символов осталось ввести, ведь пользователь не знает об ограничении по максимуму. Для этого в теге нужно указать опцию down - [count your-message down].

number

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

Поддерживает атрибуты:

  • id
  • class
  • placeholder
  • min - Устанавливает нижнее значение для ввода числа: min:20
  • max - Устанавливает верхнее значение для ввода числа: min:100

Пример:

[number age min:5 max:100 step:5 placeholder "Введите свой возраст"]

HTML:

<span class="wpcf7-form-control-wrap age">
	<input type="number" name="age" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number" min="5" max="100" step="5" aria-invalid="false" placeholder="Введите свой возраст">
</span>

range

Ползунок для выбора чисел в указанном диапазоне.

Поддерживает атрибуты:

  • id
  • class
  • placeholder - отображаются только в браузерах, не поддерживающих данный тип поля и отображающих взамен текстовое поле.
  • min - Устанавливает нижнее значение для ввода числа: min:20
  • max - Устанавливает верхнее значение для ввода числа: min:100
  • step - Устанавливает шаг изменения числа для ползунков и полей ввода чисел: min:5

Пример:

[range* your-range min:10 max:99 step:3 class:my-class "40"]

HTML:

<span class="wpcf7-form-control-wrap your-range">
	<input type="range" name="your-range" value="40" class="wpcf7-form-control wpcf7-range wpcf7-validates-as-required wpcf7-validates-as-number my-class" min="10" max="99" step="3" aria-required="true" aria-invalid="false">
</span>

checkbox и radio

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

Поддерживаемые атрибуты:

  • id
  • class

  • default - Значение поля по умолчанию, к примеру default:2 означает, что при отображении поля второй вариант ответа будет уже выбран. Для чекбоксов можно указать несколько значений подобным образом default:1_2_3

  • first_as_label - По умолчанию сначала идёт чекбокс (радио-кнопка), а затем его (её) надпись. Передав данный параметр, вы поменяете их местами.

  • use_label_element - Оборачивает чекбокс или радио-кнопки в label, что позволяет делать выбор элемента кликнув по его названию.

  • exclusive - Указав этот параметр, у чекбокса можно будет выбрать только 1 элемент. Данный функционал работает на основе JavaScript. Радио-кнопки не поддерживают опцию в силу своей специфики.

  • free_text - Позволяет добавить к последнему элементу текстовое поле. Оно становится доступным к заполнению при выборе последнего элемента и пользователь может дополнить свой ответ.

  • data - Получает значение из листа со странами мира, к примеру data:countries.

Пример:

[checkbox your-country "China" "India" "San Marino"]
[radio your-country "China" "India" "San Marino"]

HTML:

<span class="wpcf7-form-control-wrap your-country">
	<span class="wpcf7-form-control wpcf7-checkbox">
		<span class="wpcf7-list-item first">
			<input type="checkbox" name="your-country[]" value="China">
			<span class="wpcf7-list-item-label">China</span>
		</span>
		<span class="wpcf7-list-item">
			<input type="checkbox" name="your-country[]" value="India">
			<span class="wpcf7-list-item-label">India</span>
		</span>
		<span class="wpcf7-list-item last">
			<input type="checkbox" name="your-country[]" value="San Marino">
			<span class="wpcf7-list-item-label">San Marino</span>
		</span>
	</span>
</span>

select

Позволяет выбрать варианты ответа из выпадающего списка. Может использоваться в двух вариантах:

  1. Возможность выбрать только 1 вариант

  2. Возможность выбрать несколько вариантов (атрибут multiple), зажав CTRL

Атрибуты:

  • id
  • class
  • default - default:2 или default:2_3_4
  • multiple - Позволит выбрать несколько вариантов ответа
  • include_blank - Добавит первым вариантом ответа строку "- - -"
  • first_as_label
  • data
  • items - варианты ответов

Пример:

[select items "Пункт 1" "Пункт 2" "Пункт 3"]

HTML:

<span class="wpcf7-form-control-wrap items">
	<select name="items" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
		<option value="Пункт 1">Пункт 1</option>
		<option value="Пункт 2">Пункт 2</option>
		<option value="Пункт 3">Пункт 3</option>
	</select>
</span>

date

Поле для выбора календарной даты. Это HTML5 тип, не поддерживается старыми браузерами.

Выбор даты

Атрибуты:

  • id
  • class
  • placeholder
  • min - Нижнее значение возможной даты, например min:2016-01-01. Поддерживается относительный формат даты, например today+10days, today-2weeks и так далее.
  • max - Верхнее значение возможной даты, например min:2017-01-01. Поддерживается относительный формат даты, как и у min.
  • step - Шаг изменения даты в днях, например step:3. Если нижнее значение 2016-01-01 и шаг 3, то при следующем шаге отобразиться дата 2016-01-04 и так далее.

Пример:

[date* your-date min:2016-01-01 max:2017-12-31 step:7 class:required "YYYY-MM-DD"]

HTML:

<span class="wpcf7-form-control-wrap your-date">
	<input type="date" name="your-date" value="YYYY-MM-DD" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date required" min="2016-01-01" max="2017-12-31" step="7" aria-required="true" aria-invalid="false">
</span>

При вставке тега в шаблон письма, на почту придет дата в формате YYYY-MM-DD (2016-12-25) - это не наглядно. Поэтому можно указать более наглядный шаблон, для этого используйте конструкцию [_format_{field name} "{date format}"]

Пример:

[_format_your-date "D, d M y"]

В шаблоне письма заменится на Пт, 23 Дек 16.

Все возможные форматы даты смотрите в статье: форматы даты и времени в WordPress

reCAPTCHA (защита от спама)

Contact Form 7, начиная с версии 4.3, в связке с сервисом reCAPTCHA позволяет бороться со спамом. Чтобы пользоваться reCAPTCHA нужно иметь аккаунт в Google, где можно получить ключи для использования API сервиса.

Чтобы получить эти ключи, нужно:

  1. Зайти в админку reCAPTCHA.
  2. Зарегистрировать сайт.
  3. Получить ключ сайта и секретный ключ (это два разных ключа: ключ сайта может быть один, а секретных ключей много).

Полученные ключи нужно сохранить в админке Contact Form в разделе "Интеграция"

Атрибуты:

  • id
  • class
  • theme - Цветовая схема виджета. Может быть dark или light (по умолчанию).
  • size - Размер виджета. Может быть compact (компактный) или normal (по умолчанию).

Теперь в шаблоне формы используйте тег [recaptcha].

Пример:

[recaptcha theme:dark size:compact]

Quiz (вопрос-ответ)

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

Атрибуты:

  • id
  • class
  • size - Размер поля и его длина. Одно из значений может быть опущено.

Пример:

[quiz planet "На какой планете Вы живёте?|Земля"]

HTML:

<span class="wpcf7-form-control-wrap planet">
	<label>
		<span class="wpcf7-quiz-label">
			На какой планете Вы живёте?
		</span><input type="text" name="planet" size="40" class="wpcf7-form-control wpcf7-quiz" autocomplete="off" aria-required="true" aria-invalid="false">
	</label><input type="hidden" name="_wpcf7_quiz_answer_planet" value="ddbc64d4134e71679841969be55b9bf8">
</span>

Из примера видно, что вопрос и ответ разделяется знаком |. Вопрос и ответ можно писать абсолютно любой, например математический:

[quiz math-quiz "12+48=?|60"]

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

[quiz random-capital-quiz "Столица Японии?|Токио" "Столица Франции?|Париж" "Столица Мадагаскара?|Антананариву"]

Для этого поля можно указать параметры minlength и maxlength:

[quiz planet 10/20 "На какой планете Вы живёте?|Земля"]
[quiz planet /20 "На какой планете Вы живёте?|Земля"]
[quiz planet 10/ "На какой планете Вы живёте?|Земля"]

При создание тега quiz с несколькими вопросами при помощи генератора пишите каждую пару вопрос-ответ с новой строки.

hidden

Скрытое поле - не видно пользователю. Может хранить в себе ценную информацию. Информация может быть добавлена с помощью Javascript или создана с помощью опции default.

Атрибуты:

  • id
  • class
  • default - Сюда можно передать параметр, который будет преобразован по определенному правилу. Подробнее читайте в описании атрибута (опции в начале статьи).

Пример:

[hidden your-email default:user_email "example@example.com"]

Тег будет преобразован для авторизованных пользователей:

<input type="hidden" name="your-email" value="campusboy@gmail.com" class="wpcf7-form-control wpcf7-hidden">

А для неавторизованных:

<input type="hidden" name="your-email" value="example@example.com" class="wpcf7-form-control wpcf7-hidden">

submit

Кнопка отправки данных формы (сабмита). При нажатии на эту кнопку происходит отправка всех данных формы на сервер.

Пример:

[submit]

HTML:

<input type="submit" value="Отправить" class="wpcf7-form-control wpcf7-submit">
<span class="ajax-loader"></span>

Атрибуты:

  • id
  • class

Можно указать текст кнопки:

[submit "Отправить письмо"]

Пример использования всех поддерживаемых параметров:

[submit class:button id:form-submit "Отправить письмо"]

Если вам нужно заменить input на button, то вместо тега можно вставить непосредственно html код кнопки (см. нюансы в ). Так же это можно сделать автоматически без упомянутых нюансов, смотрите примеры в фильтре wpcf7_form_elements.

ajax-loader

Обратите внимание, что тег <span class="ajax-loader"></span> в которой подгружается иконка загрузки, если нажать на отправку формы, добавляется вместе с кнопкой сабмита, точнее после нее.

Так, например, если заменить тег [submit] на готовую HTML кнопку. Такое иногда нужно, когда верстка кнопки не подходит. Например если нужно чтобы кнопка сабмита выглядела так:

<button type="submit" class="btn consult-btn">
	<i class="fa fa-comments-o" aria-hidden="true">
</i>

В этом случае мы потеряем тег <span class="ajax-loader"></span>, потому что он добавляется через JS, после элемента с классом wpcf7-submit - обычно такой класс имеет стандартная кнопка сабмита.

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

<button type="submit" class="btn consult-btn wpcf7-submit">
	<i class="fa fa-comments-o" aria-hidden="true">
</i>

Все. Теперь тег <span class="ajax-loader"></span> будет добавляться и работать как надо.

Или можно добавить тег <span class="ajax-loader"></span> прямо в шаблон формы.

acceptance (я принимаю ваши условия)

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

Атрибуты:

  • id
  • class
  • invert - Параметр, делающий чекбокс сразу с флажком, но чтобы отправить форму пользователю надо его убрать.
  • default - Делает по умолчанию чекбокс сразу с флажком, если указать on, пример default:on, по умолчанию же default:off.
  • optional - поле становится не обязательным.

Пример:

[text name placeholder "Ваше имя"]
[acceptance accept-this] Разрешаю использовать моё имя в комментариях.[/acceptance]
[submit]

HTML:

<p>
	<span class="wpcf7-form-control-wrap accept-this">
		<input type="checkbox" name="accept-this" value="1" class="wpcf7-form-control wpcf7-acceptance" aria-invalid="false">
	</span>Разрешаю использовать моё имя в комментариях.
</p>

Поле является чекбоксом, который обрабатывается с помощью такого JavaScript:

this.find('.wpcf7-acceptance').click(function() {
	$(this).closest('form').wpcf7ToggleSubmit();
});

Изначально у кнопки отправки формы <input type="submit"> присутствует атрибут disabled="disabled". Т.е. если чекбокс не активный, то кнопка отправки формы тоже неактивна, а значит и отправить её нельзя. При установки флажка в чекбоксе, скрипт убирает этот атрибут и кнопка становится активной.

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

acceptance_as_validation: on

Так, если пользователь не поставит флажок, получит уведомление:

file (загрузка файлов)

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

Добавление такого функционала состоит из двух этапов:

1 этап - добавление полей для загрузки файлов в форму

Атрибуты:

  • id
  • class

  • filetypes - Тип файла, который разрешен для загрузки, например pdf, jpg и другие (полный список ниже), указываемые через разделитель | (прямая черта), если требуется указать несколько типов.

  • limit - Ограничение загружаемого файла по размеру, например: limit:1048576, limit:1024kb, limit:1mb. Вы можете использовать kb (килобайты) или mb (мегабайты).

Пример:

[file your-file filetypes:pdf|txt limit:2mb]

HTML:

<span class="wpcf7-form-control-wrap your-file">
  <input type="file" name="your-file" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false">
</span>

Допустимые типы файлов: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv.

Макс размер файла по умолчанию: 1 MB (1048576 байт).

2 этап - добавление тега в шаблон письма

На 1 этапе было создано поле, у которого есть имя - your-file. Теперь используем тег с этим именем в шаблоне письма, но не в привычном поле "Тело письма", а в поле "Прикреплённые файлы".

В поле "Прикреплённые файлы" вставляете только тег с именем поля из шаблона формы.

Пример:

  • [your-file] - правильно
  • [file your-file filetypes:pdf] - неправильно

Если несколько полей для загрузки файлов, то в поле "Прикреплённые файлы" перечисляете их друг за другом без каких-либо разделителей: [your-file][your-another-file].

Локальные вложения

Contact Form 7, начиная с версии 3.5, поддерживает передачу локальных файлов в письмо. Для этого наряду со вставкой тегов в поле прикрепления файлов нужно передать путь к вашему файлу:

[your-file][your-another-file]
/home/you/dir/dir/dir/fantasticpicture.jpg
uploads/2013/08/08/boringguide.pdf

Если указан не абсолютный путь, то будет рассматриваться относительный от папки wp-content.

Управление загрузкой файлов

После того, как пользователь загружает файл через контактную форму, Contact Form 7 проверяет следующие моменты:

  1. Какие ошибки PHP произошли;
  2. Тип файла и размер файла.

Если проверка прошла успешно, то плагин:

  1. Перемещает загруженный файл во временную папку.
  2. Прикрепляет файл к письму и отправляет его.
  3. Удаляет файл из временной папки.

По умолчанию папка с временными файлами находится тут: wp-content/uploads/wpcf7_uploads. Может отличаться, если изменен путь к папке uploads.

Папка wpcf7_uploads создается автоматически. Но бывают случае, когда это невозможно - родительская папка uploads не имеет прав на запись. Тогда вам нужно:

  1. Изменить права папки uploads.
  2. Создать папку wpcf7_uploads в ручном режиме через ftp и т.д.

Также, можно вообще изменить путь к временной папке плагина. Для этого откройте файл wp-config.php в корне сайта и добавьте константу WPCF7_UPLOADS_TMP_DIR, в которой укажите полный путь до папки с временными файлами:

define( 'WPCF7_UPLOADS_TMP_DIR', '/your/file/path' );

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

response

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

Чтобы изменить это положение вставьте тег [response] в то место шаблона формы, где должны быть уведомления:

[response]

Ваше имя (обязательно)
[text* your-name]

Ваше сообщение
[textarea your-message]

[response]

[submit "Отправить"]

Если не ввести имя, то форма отправлена не будет и нас известят об ошибке:

Как видно, в шаблоне формы мы использовали тег [response] в начале и конце кода, потому и уведомление плагин отобразил нам в двух местах.

Помните, что этому правилу подчиняются все уведомления, поддерживаемые плагином (успешная отправка, спам и т.д.).

Спец. значения атрибута default

Получение значений по умолчанию по ситуации

Почти всем полям можно через атрибут default передать значение по умолчанию. Но что делать, когда надо передать динамические параметры? К примеру, с помощью GET запроса через URL.

Динамическое получение параметров работает на основе следующих опций тега:

default:get
HTTP GET переменные. Ключ параметра должен совпадать с именем поля формы.
default:post
HTTP POST переменные. Ключ параметра должен совпадать с именем поля формы.
default:post_meta
Значение произвольного поля записи в которой находится форма. Имя произвольного поля должно совпадать с именем тега.
default:user_(поле пользователя)
Речь идет о: default:user_email или default:user_nickname. Полный список таких значений приведен в след. пункте.

Пример тега текстового поля на основе GET запроса:

[text* your-name default:get]

Пусть у нас есть страница contact, обратимся к ней с передачей GET параметра:

http://example.com/contact/?your-name=Дмитрий

В результате значение нашего поля будет автоматом "Дмитрий".

Ещё пример: передача UTM меток в форму

[hidden utm_source default:get]
[hidden utm_medium default:get]
[hidden utm_campaign default:get]
Дефолтное значение из нескольких источников

Также, можно передать несколько мест, откуда хотелось бы получить значение:

[text* your-name default:get default:post_meta "Ваше имя"]

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

ACF + CF7 без дополнительных плагинов

Пусть вы для Записей создали группу полей, в которой есть текстовое поле с ключом my-text-field. Чтобы вывести сохранённое значение в этом поле, используйте шорткод:

[text my-text-field default:post_meta]

или, если надо поле сделать скрытым:

[hidden my-text-field default:post_meta]

Получение значений по умолчанию для зарегистрированного пользователя

Когда вы создаете форму для авторизованных пользователей, то нет смысла заставлять их вписывать значения, которые уже есть в их данных, например имя или email. В Contact Form 7 предусмотрен этот момент и можно получить данные из профиля пользователя.

Для этого нужно использовать специальные значения атрибута default для авторизованного пользователя. Рассмотрим все возможные варианты:

  • default:user_login - Логин пользователя
  • default:user_email - Электронная почта
  • default:user_url - Адрес сайта
  • default:user_first_name - Имя
  • default:user_last_name - Фамилия
  • default:user_nickname - Ник
  • default:user_display_name - Отображаемое на сайте имя
  • default:user_description - Описание (биография).
  • default:user_* - где вместо * можно указать любое значение из данных пользователя (см. get_userdata()). Если оригинальные данные пользователя (ключ) начинаются не с user_, то их нужно начать с user_. Допустим, у юзера есть метаполе vk и нам нужно указать тут значение этого метаполя. Тогда пишем так: default:user_vk

Пример:

Ваше имя: [text* your-name default:user_display_name]

Ваш E-mail: [email* your-email default:user_email]
Ещё один пример

Один из зарегистрированных пользователей на сайте решил воспользоваться формой. Логично сразу подставить его имя в поле «Имя», ведь оно известно. Используем атрибут default:

[text* your-name default:user_display_name placeholder "Введите ваше имя"]

Теперь, когда авторизованный пользователь зайдет на страницу с формой - его отображаемое имя (display_name) будет поставлено в поле your-name автоматом. А если на эту же страницу зайдет неавторизованный пользователь, то он увидит плейсхолдер "Введите ваше имя".

Получение значений по умолчанию через атрибуты основного шоркода CF7

Иногда может быть нужно использовать значение из атрибута шорткода [contact-form-7 ...] в качестве дефолтного параметра для поля.

В этом случае, нужно использовать опцию тега default:shortcode_attr, которая «говорит» плагину получить в качестве дефолтного значение одноименное (с именем поля) значение атрибута шотркода.

Пример:

[email* myemail default:shortcode_attr]

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

[contact-form-7 id="123" title="Contact Form" myemail="xxxxxx@example.com"]

Однако это еще не все! Как мы знаем для любого шорткода в WordPress ему указывается белый список атрибутов, которые в нём можно использовать. В этом случае, про наш новый атрибут шорткода contact-form-7 WP ничего не знает, поэтому его нужно добавить в белый список. Делается это через хук плагина:

add_filter( 'shortcode_atts_wpcf7', 'custom_shortcode_atts_wpcf7', 10, 3 );
function custom_shortcode_atts_wpcf7( $out, $pairs, $atts ) {
	if( isset($atts['myemail']) )
		$out['myemail'] = $atts['myemail'];

	return $out;
}

Данный код вставляется в functions.php.

Теперь при заходе на страницу с формой в поле email будет подставлено значение xxxxxx@example.com.