Створення своїх тегів форми (шорткод)

Нижче описані нижче дії створять довільні теги, які потім можна буде використовувати в шаблоні форми Contact Form 7. Це розширить можливості плагіна і виведе їх на новий рівень. Однак для цього вам потрібно мати деякі навички програмування і чітко розуміти , як створюються шорткоди в WordPress , так як створення шорткоду для Contact Form 7 проводиться за аналогією.

Створити свій шорткод у Contact Form 7 можна кількома шляхами, кожен із них має плюси та мінуси. Розглянемо кожен окремо.

Додавання тега форми (шорткоду) до Contact Form 7 (варіант 1)

У вихідниках плагіна CF7 є функція wpcf7_add_form_tag() . Вона повністю повторює функціонал стандартної функції WordPress add_shortcode() . Тому додавання свого нового тега форми Contact Form 7 аналогічне до звичайного додавання шорткоду для запису в WordPress.

Для цього додамо наступний код у functions.php :

function hello_world_cf7_func() {
	 return "Привіт! Я шорткод для Contact Form 7!";
}
wpcf7_add_form_tag('hello_world', 'hello_world_cf7_func');

$tag = preg_replace( '/[^a-zA-Z0-9_*]+/', '_', $tag );
$ tag = rtrim ($ tag, '_');
$tag = strtolower($tag);

Тепер використовуємо створений щойно тег форми [hello_world] у шаблоні форми. При перегляді він буде перетворений на:

<p>Привіт! Я шорткод для Contact Form 7!</p>

Як видно, наш текст обернувся на <p>тег. Щоб заборонити обгортку, використовуйте константу WPCF7_AUTOP .

особливості:

• Шорткод (тег) працюватиме лише у формі CF7, але не в записах WP.
• Шорткод (тег) не працюватиме у шаблоні листа: на пошту прийде текст [hello_world].

Додавання тега форми (шорткоду) до Contact Form 7 (варіант 2)

За умовчанням, шорткод WordPress не працюють в Contact Form 7, але це легко поправити за допомогою фільтра:

add_filter( 'wpcf7_form_elements', 'do_shortcode');

Додавши такий хук, ми можемо створити звичайний шорткод WordPress за допомогою add_shortcode() і він буде працювати у формі CF7:

function hello_world_cf7_func() {
	 return "Привіт! Я шорткод для Contact Form 7!";
}
add_shortcode('hello_world', 'hello_world_cf7_func');

особливості:

• Шорткод працюватиме як у постах, так і у формах.
• Шорткод не буде перетворено на шаблон листа. На пошту прийде текст [hello_world].

Включаємо роботу тега форми (шорткоду) у шаблоні листа

Зробити це можна через фільтр wpcf7_mail_components :

add_filter('wpcf7_mail_components', 'do_shortcode_mail', 10, 3);
function do_shortcode_mail( $components, $contactForm, $mailComponent ){
	if( isset($components['body']) ){
		$components['body'] = do_shortcode($components['body']);
	}

	return $components;
}

Тепер [hello_world]у шаблоні листа буде замінено на текст “Привіт! Я шорткод для Contact Form 7!”.

Плагін CF7 Dynamic Text Extension – тег із динамічним текстом

Попередні варіанти зручні, коли потрібно вивести статичну інформацію, з якою користувач не взаємодіятиме, наприклад якийсь текст або банер. Навіть якщо шорткод припускатиме виведення якогось поля, то в листі прийде не значення цього поля, а html код цього поля.

А тепер давайте подивимося, як швидко і просто створити тег з динамічним змістом, наприклад, з ім’ям поточного користувача. Для цього встановимо плагін Contact Form 7 Dynamic Text Extension , що розширює можливості самого CF7.

Плагін повторює вбудований функціонал Contact Form 7 з атрибутом default , але також вміє запускати довільний шорткод.

Contact Form 7 Dynamic Text Extension дозволяє використовувати два додаткові теги полів форми:

[Dynamictext name-field]

За промовчанням звичайне текстове поле
input type="text"

[dynamichidden name-field]

За замовчуванням приховане текстове поле
input type="hidden"

Приклад використання

Допустимо ми вже зареєстрували шорткод [hello_world] і нам потрібно використовувати його у значенні поля форми так (цей код не робочий):

[text name placeholder "[hello_world]"]

Dynamic Text Extension розширює можливості CF7 і дозволяє використовувати поле з переданою назвою шорткоду:

[dynamictext custom-text "hello_world"]

В результаті цей тег форми перетворитися на:

<span class="wpcf7-form-control-wrap custom-text">
	<input type="text" name="custom-text" value="Привіт! Я шорткод для Contact Form 7!" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamictext" aria-invalid="false">
</span>

Тобто вміст довільного тега (шорткоду) [hello_world] став значенням текстового поля. Цей тег працює у шаблоні форми, шаблоні листа та інших вкладках форми (наприклад, повідомленнях).

Ще один приклад

Код для functions.php:

function cf7_post_url(){
	global $post;
	return get_permalink($post);
}
add_shortcode('CF7_POST_URL', 'cf7_post_url');

У шаблоні форми:

[dynamichidden post-url "CF7_POST_URL"]

У шаблоні листа:

[post-url]

В результаті, у листі прийде адреса поста, з якої надіслали форму, що є корисним для сайтів-вітрин товарів або послуг. Цей код працює як у поодинокому пості, так і в циклі.

Це лише демонстрація, використовувати саме таку логіку немає сенсу, тому що URL записи можна отримати в самому CF7 за допомогою тега [_post_url]. Докладніше про такі теги доступні з коробки читайте у спеціальних тегах листа Contact Form 7 .

Зручні переваги

Перевага такого способу у швидкій зміні посилання. Наприклад, щоб скористатися [_post_url], ми верстаємо посилання на шаблон листа:

Форма була відправлена ​​з цієї послуги</a>

Щоб відредагувати шаблон, потрібно редагувати форму, а вона може бути не одна. Але коли цей функціонал реалізований через свій тег, достатньо змінити код тега і отримати результат відразу для всіх форм, де цей тег використовується.

Наприклад, переробимо код шорткоду на більш привабливий:

function cf7_post_url(){
	global $post;

	$name = $post->post_title;
	$url = get_permalink($post);

	$html = sprintf('<p>Поступило замовлення на товар <a href="%s">%s</a></p>', $url, $name);

	return $html;
}
add_shortcode('CF7_POST_URL', 'cf7_post_url');

У листі прийде:

<p>Поступило замовлення на товар <a href="http://test-wp.ru/sapogi-72-razmera-zheltogo-tsveta/">Чоботи 72 розмірів жовтого кольору</a></p>

<span class="wpcf7-form-control-wrap post-url">
	<input type="hidden" name="post-url" value="<p>Поступило замовлення на товар <a href="http://test-wp.ru/sapogi-72-razmera-zheltogo-tsveta/" >Чоботи 72 розміру жовтого кольору</a></p>" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamichidden" aria-invalid="false">
</span>

Приклад: чекбокс для вибору рубрики

Допустимо нам потрібно вивести список рубрик у формі (рубрика вибиратиметься через чекбокс). Якщо робити це стандартним тегом [checkbox], довелося б перераховувати всі рубрики блогу вручну, а потім ще додавати їх при додаванні нових рубрик. Така ручна робота нам не підходить, тому автоматизуємо все це у два етапи.

1) Створимо шорткод [cat_like] для форми:

Цей шорткод виводитиме список усіх рубрик сайту у вигляді чекбоксів.

function cat_like_shortcode_func(){
	$html = '';
	$categories = get_categories(['hide_empty' => 0]);

	if( $categories ){

		$html = '<h3>Ваша улюблена рубрика?</h3>';

		foreach( $categories as $cat ){

			$html .= sprintf('
			<label>
				<span class="wpcf7-list-item">
					<input value=" %1$s" type="checkbox" name="category-like[]">
				</span>
				%1$s
			</label>',
			$cat->name);

		}
	}

	return $html;
}

wpcf7_add_form_tag('cat_like', 'cat_like_shortcode_func');

2) Додамо наш шорткод у шаблон форми:

Ваше ім'я
[text* name-user]

Ваш email
[email* email-user]

[checkbox category-like]

[cat_like]

[submit "Проголосувати"]

Обратите внимание, что мы добавили наш тег [cat_like] и в дополнении к нему базовый тег [checkbox category-like]. Базовый тег нужен, чтобы при сабмите формы плагин знал, что есть поле category-like (это название используется в атрибуте name поля input в коде создаваемого шорткода). Дело в том, что после того, как форма отправляется, плагин не знает что в поле есть данные category-like. А с таким хаком мы можем использовать тег [category-like] в шаблоне письма.

Шаблон письма

Теперь осталось вставить в шаблон письма тег [category-like] и на его месте в письме будут показаны названия рубрик, которые выбрал пользователь.

Шорткод с помощью плагина Listo

Об этом плагине было рассказано в статье о секретах работы с Contact Form 7, а именно о том, что Listo умеет работать с длинными списками. Contact Form 7 в своих модулях имеет файл listo.php, он нужен для интеграции одноименного плагина. Поэтому все что нам нужно – это активировать listo и заглянуть к нему “под капот”, взять часть кода и переделать под наши реалии.

Для пример, возьмем всё те же рубрики. Код будет состоять из двух частей, обе вставляем в functions.php.

1) Добавляем тип списка

add_filter('listo_list_types', 'listo_list_types_func');
function listo_list_types_func($list_types){
	$list_types['categories'] = 'Listo_Categories';
	return $list_types;
}

Тут мы добавляет ключ (categories) и значение (Listo_Categories). Ключ используется в теге [select], а значение ключа – это имя класса, который должен вернуть массив пунктов выпадающего списка.

2) Описываем класс для получение рубрик

class Listo_Categories implements Listo {

	public static function items(){
		$categories = get_categories(['hide_empty' => 0]);

		foreach( $categories as $cat ){
			$items [$cat->cat_ID] = $cat->name;
		}

		return $items;
	}

	public static function groups(){}
}

Как видно, код работает на основе функции WP get_categories, параметры которой смотрите в описании.

3) Теперь используем тег выпадающего списка Listo в шаблоне формы

В нем в параметре data указываем какой тип данных надо получить (ключ из первого кода)

[select categories-like data:categories]

И используем тег [categories-like] в шаблоне письма, чтобы получить в письме выбранную пользователем рубрику.

Добавление нового тега формы (шоткода) с кнопкой в настройках Contact Form 7

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

PHP Код

Вставляется в functions.php или оформляется в виде плагина

<?php

/**
* Добавляем новый тег select_optgroup
*
* @return void
*/
function wpcf7_add_form_tag_select_group(){
	wpcf7_add_form_tag( array('select_optgroup','select_optgroup*'), 'wpcf7_select_optgroup_form_tag_handler', true );
}
add_action( 'wpcf7_init', 'wpcf7_add_form_tag_select_group', 9 ); // 9 - до регистрации остальных тегов формы

/**
* Создание html версии выпадающего списка с группировкой option
*
* @param array $tag Атрибуты поля [select_optgroup]
*
* @return string html код поля
*/
function wpcf7_select_optgroup_form_tag_handler( $tag ){
	$tag = new WPCF7_FormTag( $tag );

	if( empty( $tag->name ) ){
		return '';
	}

	$validation_error = wpcf7_get_validation_error( $tag->name );

	$class            = wpcf7_form_controls_class( $tag->type );

	if( $validation_error ){
		$class .= ' wpcf7-not-valid';
	}

	$atts = array();

	$atts['class'] = $tag->get_class_option( $class );
	$atts['id'] = $tag->get_id_option();
	$atts['tabindex'] = $tag->get_option( 'tabindex', 'int', true );

	if( $tag->is_required() ){
		$atts['aria-required'] = 'true';
	}

	$atts['aria-invalid'] = $validation_error ? 'true' : 'false';

	$multiple       = $tag->has_option( 'multiple' );
	$include_blank  = $tag->has_option( 'include_blank' );
	$first_as_label = $tag->has_option( 'first_as_label' );

	$values = $tag->values;
	$labels = $tag->labels;

	if( $data = (array) $tag->get_data_option() ){
		$values = array_merge( $values, array_values( $data ) );
		$labels = array_merge( $labels, array_values( $data ) );
	}

	$defaults = array();

	$default_choice = $tag->get_default_option( null, 'multiple=1' );

	foreach( $default_choice as $value ){
		$key = array_search( $value, $values, true );

		if( false !== $key ){
			$defaults[] = (int) $key + 1;
		}
	}

	if( $matches = $tag->get_first_match_option( '/^default:([0-9_]+)$/' ) ){
		$defaults = array_merge( $defaults, explode( '_', $matches[1] ) );
	}

	$defaults = array_unique( $defaults );

	$shifted  = false;

	if( $include_blank || empty( $values ) ){
		array_unshift( $labels, '---' );
		array_unshift( $values, '' );
		$shifted = true;
	}
	elseif( $first_as_label ){
		$values[0] = '';
	}

	$html     = '';
	$hangover = wpcf7_get_hangover( $tag->name );

	foreach( $values as $key => $value ){
		$selected = false;

		if( $hangover ){
			if( $multiple ){
				$selected = in_array( esc_sql( $value ), (array) $hangover );
			}
			else{
				$selected = ( $hangover == esc_sql( $value ) );
			}
		}
		else{
			if( ! $shifted && in_array( (int) $key + 1, (array) $defaults ) ){
				$selected = true;
			}
			elseif( $shifted && in_array( (int) $key, (array) $defaults ) ){
				$selected = true;
			}
		}

		$item_atts = array(
			'value'   => $value,
			'selected'=> $selected ? 'selected' : ''
		);

		$item_atts = wpcf7_format_atts( $item_atts );

		$label = isset($labels[$key]) ? $labels[$key] : $value;

		// Если в лейбле содержится текст 'optgroup-', то открываем группу
		if( $label[0] == '{' ){
			$html .= '<optgroup label="'. substr( $label, 1 ) .'">';
		}
		// Если в лейбле содержится текст 'endoptgroup', то закрываем группу
		elseif( $label == '}' ){
			$html .= '</optgroup>';
		}
		// Если в лейбле не нашлись теги открытия или закрыия группы, значит это обычный лейб и не обрабатываем его
		else {
			$html .= sprintf( '<option %1$s>%2$s</option>', $item_atts, esc_html( $label ) );
		}

	}

	if( $multiple ) $atts['multiple'] = 'multiple';

	$atts['name'] = $tag->name . ( $multiple ? '[]' : '' );

	$atts = wpcf7_format_atts( $atts );

	$html = sprintf('<span class="wpcf7-form-control-wrap %1$s"><select %2$s>%3$s</select>%4$s</span>',
		sanitize_html_class($tag->name), $atts, $html, $validation_error );

	return $html;
}

/**
* Создаем кнопку "Сгрупированный выпадающий список" в панели составления шаблона формы
*
* Значение "menu" можно изменить на любое, оно будет поставлено в генераторе тега в поле "Имя"
*
* @return void
*/
function wpcf7_add_tag_generator_select_optgroup(){
	$tag_generator = WPCF7_TagGenerator::get_instance();
	$tag_generator->add( 'selectgroup', 'Выпадающий список (с группами)', 'wpcf7_tag_generator_select_optgroup' );
}
add_action( 'wpcf7_admin_init', 'wpcf7_add_tag_generator_select_optgroup', 25 );

/**
*   Формирование кнопки и модального окна для удобного создания тега поля
*
* @param object     $contact_form   объект формы со всеми настройками и параметрами
* @param array      $args                       массив с параметрами кнопки id, title, content
*
*/
function wpcf7_tag_generator_select_optgroup( $contact_form, $args = '' ){
	$args = wp_parse_args( $args, array() );

	$description = "Можно создавать группы, для этого оберните опции в конструкцию: '{Название_группы ...опции... }' (все на новой строке). Подробнее см. %s.";
	$desc_link   = wpcf7_link( '//wp-kama.ru/met/contact-form-7', 'всё о плагине Contact Form 7' );
	$description = sprintf( $description, $desc_link );

	?>
	<div class="control-box">
		<fieldset>
			<table class="form-table">
				<tbody>
					<tr>
						<th scope="row">
							<?php echo esc_html( __( 'Field type', 'contact-form-7' ) ); ?>
						</th>
						<td>
							<fieldset>
								<legend class="screen-reader-text">
									<?php echo esc_html( __( 'Field type', 'contact-form-7' ) ); ?>
								</legend>
								<label>
									<input type="checkbox" name="required" /> <?php echo esc_html( __( 'Required field', 'contact-form-7' ) ); ?>
								</label>
							</fieldset>
						</td>
					</tr>

					<tr>
						<th scope="row">
							<label for="<?php echo esc_attr( $args['content'] . '-name' ); ?>">
								<?php echo esc_html( __( 'Name', 'contact-form-7' ) ); ?>
							</label>
						</th>
						<td>
							<input type="text" name="name" class="tg-name oneline" id="<?php echo esc_attr( $args['content'] . '-name' ); ?>" />
						</td>
					</tr>

					<tr>
						<th scope="row">
							<?php echo esc_html( __( 'Options', 'contact-form-7' ) ); ?>
						</th>
						<td>
							<fieldset>
								<legend class="screen-reader-text">
									<?php echo esc_html( __( 'Options', 'contact-form-7' ) ); ?>
								</legend>
								<textarea name="values" class="values" id="<?php echo esc_attr( $args['content'] . '-values' ); ?>"></textarea>
								<label for="<?php echo esc_attr( $args['content'] . '-values' ); ?>">
									<span class="description">
										<?php echo esc_html( __( "One option per line.", 'contact-form-7' ) ) .'<br>'. $description; ?>
									</span>
								</label><br />
								<label>
									<input type="checkbox" name="multiple" class="option" /> <?php echo esc_html( __( 'Allow multiple selections', 'contact-form-7' ) ); ?>
								</label><br />
								<label>
									<input type="checkbox" name="include_blank" class="option" /> <?php echo esc_html( __( 'Insert a blank item as the first option', 'contact-form-7' ) ); ?>
								</label>
							</fieldset>
						</td>
					</tr>

					<tr>
						<th scope="row">
							<label for="<?php echo esc_attr( $args['content'] . '-id' ); ?>">
								<?php echo esc_html( __( 'Id attribute', 'contact-form-7' ) ); ?>
							</label>
						</th>
						<td>
							<input type="text" name="id" class="idvalue oneline option" id="<?php echo esc_attr( $args['content'] . '-id' ); ?>" />
						</td>
					</tr>

					<tr>
						<th scope="row">
							<label for="<?php echo esc_attr( $args['content'] . '-class' ); ?>">
								<?php echo esc_html( __( 'Class attribute', 'contact-form-7' ) ); ?>
							</label>
						</th>
						<td>
							<input type="text" name="class" class="classvalue oneline option" id="<?php echo esc_attr( $args['content'] . '-class' ); ?>" />
						</td>
					</tr>

				</tbody>
			</table>
		</fieldset>
	</div>

	<div class="insert-box">
		<!-- Обязательно вписываем в значение name название поля, в нашем случае  select_optgroup, чтобы оно подставлялось по клику автоматически -->
		<input type="text" name="select_optgroup" class="tag code" readonly="readonly" onfocus="this.select()" />

		<div class="submitbox">
			<input type="button" class="button button-primary insert-tag" value="<?php echo esc_attr( __( 'Insert Tag', 'contact-form-7' ) ); ?>" />
		</div>

		<br class="clear" />

		<p class="description mail-tag">
			<label for="<?php echo esc_attr( $args['content'] . '-mailtag' ); ?>">
				<?php echo sprintf( esc_html( __( "To use the value input through this field in a mail field, you need to insert the corresponding mail-tag (%s) into the field on the Mail tab.", 'contact-form-7' ) ), '<strong><span class="mail-tag"></span></strong>' ); ?><input type="text" class="mail-tag code hidden" readonly="readonly" id="<?php echo esc_attr( $args['content'] . '-mailtag' ); ?>" />
			</label>
		</p>
	</div>
	<?php
}

Процесс добавление тега сгрупированного выпадающего списка:

Шаблон формы:

[select_optgroup engines "{Бесплатные движки" "Wordpress" "Joomla!"
						 "Drupal" "Grav" "}" "{Платные движки"
						 "1С-Битрикс" "DLE (DataLife Engine)" "UMI.CMS" "NetCat"
						 "ImageCMS Shop" "}"]

Имя поля выбрано engines, потому в шаблоне письма используем тег [engines], чтобы на почту пришло выбранное пользователем значение.

html код поля select

<span class="wpcf7-form-control-wrap engines">
	<select name="engines" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
		<optgroup label="Бесплатные движки">
			<option value="Wordpress">Wordpress</option>
			<option value="Joomla!">Joomla!</option>
			<option value="Drupal">Drupal</option>
			<option value="Grav">Grav</option>
		</optgroup>
		<optgroup label="Платные движки">
			<option value="1С-Битрикс">1С-Битрикс</option>
			<option value="DLE (DataLife Engine)">DLE (DataLife Engine)</option>
			<option value="UMI.CMS">UMI.CMS</option>
			<option value="NetCat">NetCat</option>
			<option value="ImageCMS Shop">ImageCMS Shop</option>
		</optgroup>
	</select>
</span>

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

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