Настройка contact form 7. добавление полей

Изменить стили формы с помощью Contact Form 7 Style — для ленивых

Скачайте плагин и установите. В меню ‘Contact Style’ нажмите ‘Add New’.

Выберите элемент для стилизации.

Настройки стилизации идентичны для каждого элемента.

choose element state — normal — обычное состояние, hover — вид при наведении

width / height — ширина/высота элемента

background — color — цвет фона, image — картинка в качестве фона, position — положение, size — размер, repeat — повтор

margin / padding — отступы/поля

border — width — толщина границы, style — стиль границы, color — цвет, radius — скругление

position — позиция элемента

Настройки кликабельны и интуитивны, экспериментируйте.

Вы можете смотреть превью во время стилизации. Отметьте вверху страницы контактную форму и нажмите Generate Preview. Область просмотра находится внизу.

Вид формы ‘После’ 5 минут экспериментирования:

Description

Contact Form 7 forms can be as responsive and interactive as an app, just by adding Google’s “Material Design” theme.

Contact Form 7 style

This plugin provides a bunch of shortcodes that are made to wrap around your CF7 form tags and apply a material design theme to them.

Contact Form 7 + Material Design in action

Take 30 seconds and see how your contact forms could look. Watch the video below and/or play with the live demos.

What’s new in Version 2.0?

• Uses the new Material Design. Text and select fields now come in boxed and outlined variants. Textareas now have an inner label. Check out the screenshots below.
• New button variants. Elevated (default), unelevated and outlined.
• Better browser support. IE11, iOS8+, plus all the modern browsers.
• Custom CSS now has syntax highlighting.
• You can choose to continue using the original/legacy styles if you prefer.

Contact Form 7 can be more interactive

Make your form fields react to user input more intuitively. Field labels start as placeholders and float up when you focus the field. Checkboxes and radios animate when you click them. Submit buttons include the Material Design ‘ripple’ effect. And more!

Currently supported:

• Light or dark theme
• Text input (includes text, email, url, tel, number, date) – boxed and outlined variants
• Textarea with optional auto-resizing
• Select/drop-down menu – boxed and outlined variants
• Checkboxes
• Radios
• Acceptance
• File upload field
• Submit button (including loading spinner)
• Quiz
• ReCaptcha
• Other (validation/success messages etc)

Pro version:

• Customize colours and fonts
• Arrange fields into columns
• Turn radios and checkboxes into
• Add leading icons to text and select fields
• Group fields into sections with cards
• Direct email support

You can upgrade to pro at any time without leaving WordPress.

Works well with these other plugins:

• Contact Form 7 Live Preview
• Mailchimp for WordPress
• Conditional Fields for Contact Form 7
• Contact Form 7 Multi-Step Forms
• Invisible reCaptcha for WordPress (but not CF7 Invisible reCaptcha)
• Multifile Upload Field for Contact Form 7 (basic support)

Responsive Contact Form

Material Design for ContactForm7 is a fully responsive Contact Form 7 theme. It adapts to your screen size and works on any device.

Опис

Contact Form 7 може керувати численними контактними формами, де ви можете гнучко налаштовувати вміст форм і пошти з досить простою розміткою. Форми мають вбудовану підтримку Ajax відправки, CAPTCHA, спам фільтру Akismet і не тільки.

Документація та підтримка

You can find docs, FAQ and more detailed information about Contact Form 7 on contactform7.com. When you can’t find the answer to your question on the FAQ or in any of the documentation, check the support forum on WordPress.org. If you can’t locate any topics that pertain to your particular issue, post a new topic for it.

Contact Form 7 потребує вашої підтримки

It is hard to continue development and support for this free plugin without contributions from users like you. If you enjoy using Contact Form 7 and find it useful, please consider making a donation. Your donation will help encourage and support the plugin’s continued development and better user support.

Сповіщення про конфіденційність

У стандартній конфігурації, даний плагін сам не буде:

• стежити таємно за користувачами;
• write any user personal data to the database;
• send any data to external servers;
• використовуйте cookies.

If you activate certain features in this plugin, the contact form submitter’s personal data, including their IP address, may be sent to the service provider. Thus, confirming the provider’s privacy policy is recommended. These features include:

• reCAPTCHA ()
• Akismet (Automattic)
• Constant Contact (Endurance International Group)

Рекомендовані плагіни

Наступні плагіни рекомендовані для користувачів Contact Form 7:

• Flamingo від Takayuki Miyoshi – за допомогою Flamingo, ви можете зберегти повідомлення відправлені через контактні форми в базі даних.
• Bogo by Takayuki Miyoshi – Bogo is a straight-forward multilingual plugin that doesn’t cause headaches.

Вариант 4: проверка формы по переданному в шорткод своему атрибуту

Исходная форма:

<label> Ваша почта
	 </label>

<label> Ваш телефон
	 </label>

<label> Сообщение
	 </label>

Шорткод формы:

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

add_filter( 'shortcode_atts_wpcf7', 'my_shortcode_atts_wpcf7', 10, 3 );
add_filter( 'wpcf7_form_hidden_fields', 'my_form_add_hidden_field' );
add_filter( 'wpcf7_validate', 'my_form_validate', 10, 2 );

/**
 * Добавляет новые атрибуты шорткода формы в белый список.
 *
 * @param array $out
 * @param array $pairs
 * @param array $atts
 *
 * @return mixed
 */
function my_shortcode_atts_wpcf7( $out, $pairs, $atts ) {
	// Добавляем наш атрибут my_key, что указан в шорткоде, в белый список,
	// чтобы его значение могло прийти в my_form_add_hidden_field()
	if ( isset( $atts ) ) {
		$out = $atts;
	}

	return $out;
}

/**
 * Добавляет скрытое поле в форму.
 *
 * @param array $arr
 *
 * @return array
 */
function my_form_add_hidden_field( $arr ) {
	/**
	 * @var WPCF7_ContactForm $form
	 */
	$form = WPCF7_ContactForm::get_current();

	// Проверяем атрибут и его значение, что указали в шорткоде
	if ( $form->shortcode_attr( 'my_key' ) === 'my-form-check-attr' ) {
		// Ключ, который будет проверяться в my_form_validate()
		$arr = 1;
	}

	return $arr;
}

/**
 * Валидирует поля.
 *
 * @param WPCF7_Validation $result
 * @param WPCF7_FormTag[]  $tags
 *
 * @return WPCF7_Validation
 */
function my_form_validate( $result, $tags ) {
	$form = WPCF7_Submission::get_instance();

	// Получаем данные полей
	$marker = $form->get_posted_data( 'my-form-check-field' );
	$email  = $form->get_posted_data( 'user-email' );
	$phone  = $form->get_posted_data( 'user-phone' );

	// Текст ошибки
	$error_msg = 'Заполните телефон или email';

	// Проверяем наличие метки с нужным значением.
	// Затем, если оба поля не заполонены - выдаем ошибку
	if ( $marker === '1' && empty( $phone ) && empty( $email ) ) {
		$result->invalidate( 'user-email', $error_msg );
		$result->invalidate( 'user-phone', $error_msg );
	}

	return $result;
}

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

Но и тут есть свой минус — помнить какой атрибут и с каким значением надо дописывать в шорткод.

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

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

можно вполне сделать так:

или для понятности так:

Теперь, форма остаётся без изменений, а вот код немного изменится:

add_filter( 'shortcode_atts_wpcf7', 'my_shortcode_atts_wpcf7', 10, 3 );
add_filter( 'wpcf7_form_hidden_fields', 'my_form_add_hidden_field' );
add_filter( 'wpcf7_validate', 'my_form_validate', 10, 2 );

/**
 * Добавляет новые атрибуты шорткода формы в белый список.
 *
 * @param array $out
 * @param array $pairs
 * @param array $atts
 *
 * @return array
 */
function my_shortcode_atts_wpcf7( $out, $pairs, $atts ) {
	/**
	 * Добавляем наш атрибут my_key, что указан в шорткоде, в белый список,
	 * чтобы его значение могло прийти в my_form_add_hidden_field().
	 *
	 * Так как атрибут без значения, то вместо пары ключ => значение
	 * будет  => 'phone_or_email', поэтому проверяем через in_array().
	 */
	if ( in_array( 'phone_or_email', $atts ) ) {
		// Любой ключ и значение в виде строки, которые потом надо проверить в my_form_add_hidden_field()
		$out = 'my-form-check-attr';
	}

	return $out;
}

/**
 * Добавляет скрытое поле в форму.
 *
 * @param array $arr
 *
 * @return array
 */
function my_form_add_hidden_field( $arr ) {
	/**
	 * @var WPCF7_ContactForm $form
	 */
	$form = WPCF7_ContactForm::get_current();

	// Проверяем атрибут и его значение, что указали в шорткоде
	if ( $form->shortcode_attr( 'my_key' ) === 'my-form-check-attr' ) {
		// Ключ, который будет проверяться в my_form_validate()
		$arr = 1;
	}

	return $arr;
}

/**
 * Валидирует поля.
 *
 * @param WPCF7_Validation $result
 * @param WPCF7_FormTag[]  $tags
 *
 * @return WPCF7_Validation
 */
function my_form_validate( $result, $tags ) {
	$form = WPCF7_Submission::get_instance();

	// Получаем данные полей
	$marker = $form->get_posted_data( 'my-form-check-field' );
	$email  = $form->get_posted_data( 'user-email' );
	$phone  = $form->get_posted_data( 'user-phone' );

	// Текст ошибки
	$error_msg = 'Заполните телефон или email';

	// Проверяем наличие метки с нужным значением.
	// Затем, если оба поля не заполонены - выдаем ошибку
	if ( $marker === '1' && empty( $phone ) && empty( $email ) ) {
		$result->invalidate( 'user-email', $error_msg );
		$result->invalidate( 'user-phone', $error_msg );
	}

	return $result;
}

—

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

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

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

Contact Form 7 Dynamic Text Extension позволяет использовать два дополнительных тега полей формы:

По умолчанию обычное текстовое поле input type=»text»

По умолчанию скрытое текстовое поле input type=»hidden»

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

"]

Dynamic Text Extension расширяет возможности CF7 и позволяет использовать поле с переданным названием шорткода:

В результате этот тег формы превратиться в:

<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>

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

Код для functions.php:

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

В шаблоне формы:

В шаблоне письма:

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

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

Преимущество такого способа в быстром изменении ссылки. К примеру, чтобы воспользоваться , мы верстаем ссылку в шаблоне письма:

Форма была отправлена с <a href="">этой услуги</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>

Имейте ввиду, что такой метод может в некоторых случаях вызвать ошибку, так как все содержимое шорткода помещается в атрибут value.

Исходный код поля из примера:

<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>

Для подобных случаев лучше воспользоваться другим способом из этой статьи.

Настройка плагина WP-Mail-SMTP. Инструкция

From Name – к примеру, название вашей организации или ваше имя

SMTP Options

SMTP Host – для Яндекс почты smtp.yandex.ru

SMTP Port – для Яндекс почты 465

Encryption – Use SSL encryption

Authentication – Yes: Use SMTP authentication

Username – логин на вашей почте отправитель

Password – пароль на вашей почте отправитель

Настройка завершена. Сохраните изменения.

Здравствуйте!

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

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

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

Прежде всего, я выяснил причину, по которой не отправлялись письма. Дело оказалось в самом плагине Contact Form 7. В версии 4.7 всё прекрасно работает, а при обновлении до версии 4.8 письма перестают отправляться. Я надеялся, что с выходом следующего обновления ошибка устранится, но и после обновления до версии 4.9 письма по-прежнему не отправлялись.

Самое простое решение, которое я нашёл в этой ситуации, – сделать откат плагина Contact Form7 до последней рабочей версии, то есть до версии 4.7. Сделать это можно с помощью специальных плагинов. Я покажу, как сделать откат с помощью плагина WP Rollback. Этот плагин очень прост в работе.

Устанавливаем плагин WP Rollback из репозитория WordPress и активируем его. Открываем в консоли раздел меню Плагины и видим, что рядом с каждым плагином появился дополнительный пункт Rollback.

Нажимаем на Rollback рядом с плагином Contact Form 7. Появляется окно с возможностью выбрать версию, до которой нужно сделать сброс. Выбираем версию 4.7 и жмём Rollback.

В появившемся окне опять нажимаем на Rollback. Плагин обновится. Не забываем активировать плагин. Заходим на страницу с контактной формой и пробуем отправить письмо.

Теперь всё работает. В чём на самом деле причины такого сбоя в работе плагина Contact Form 7 надо ещё разбираться. Если выясню в чём причина, то обязательно напишу. А пока можно сделать откат до версии 4.7 и спокойно работать.

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

Надеюсь, что статья была вам полезна

Спасибо за внимание!. Contact form 7 — известный плагин для WP, который позволяет делать самые разные формы

Но иногда случается такое, что он перестает отправлять письма на указанный в его настройках почтовый адрес

Contact form 7 — известный плагин для WP, который позволяет делать самые разные формы. Но иногда случается такое, что он перестает отправлять письма на указанный в его настройках почтовый адрес.

На самом деле — почти всегда Contact form 7 тут не при чем, а всему виной спам-фильтры почтовиков, потому что они считают ваше письмо мега-спамом такого уровня, что оно даже в папку «Спам» не падает, а просто убивается на подлете. И очень редко глючит сам сервер, а именно функция PHP — mail.

Итак, поехали исправлять.

Первым делом нужно проверить работает ли у вас на хостинге этот самый mail, для этого создаем на хостинге файл testmail.php с таким содержимым

<?php var_dump(mail("yourmail@server.com","Test","Test")); ?>

Вместо yourmail@server.com нужно конечно же написать свою почту, и файл залить туда, где вы смождете открыть его браузером

И запускаем его, перейдя по например адресу http://вашсайт/testmail.php

Если будет написано bool(true) — то значит все в порядке и почта УХОДИТ (но не доходит), если же будет написано что-то другое — то скопируйте это и пишите в ТП хостера.

Итак mail работает, но почта не доходит.

Первый вариант — это повысить уровень доверия почтового сервера в вашему домену, гуглите что такое dkim и SPF и действуйте.

Второй вариант — это просто завернуть все сообщения с вашего сайта через SMTP, как обычный почтовый клиент.

Для этого зарегистрируйте новый почтовый ящик, например для Яндексе (или используйте свой) и установите на WP плагин https://ru.wordpress.org/plugins/easy-wp-smtp/. Вот скрин его настроек, я думаю все должно быть понятно

После заполнения учетных данных, можно сразу проверить их корректность, введя в эти поля

После этого, если все корректно настроено — то письма будут доходить.

Відгуки

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

Have a great time using it

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

IT is coupled with core jquery and if you want to use CDN jquery you are stuck.

it is perfect for simple forms.

Is the best form builder plugin, which you can use in WordPress to create a contact form easily and in the shortest possible time!

Best Contact Form that I have ever found in the market. It has all the functions that one would require whilst keeping itself user-friendly.

Changelog

1.5.6 — May 11, 2020

• Fixed the flags alignment in Retina screens.
• Improvement: now the file size of flags images are 69% smaller. Thanks to @marcusasiabc.

1.5.5 — April 25, 2020

Switch API service from freegeoip.app (it no longer works) to extreme-ip-lookup.com, which offer free usage until 20 requests per minute and 50,000 requests per month.

1.5.4 — April 06, 2020

• Added a check to verify if Contact Form 7 is activated.
• Added support for Retina screens. Thanks to Aboobacker P Ummer (@abooze) for reporting.
• Fixed some typos in README.md. Thanks to @sylvain68 for reporting.

1.5.3 — April 03, 2020

• Code refactored.
• Updated the API service to freegeoip.app (up to 15,000 queries per hour).
• Now the plugin includes the “International Telephone Input” library built-in.
• Added new info tags in header comment.
• Fixed text domain in plugin header comment.
• Fixed some typos and strings without translation functions.

1.5.2

We change ipinfo.io IP API by freegeoip.net IP API because it has a higher requests limit. As suggested at https://wordpress.org/support/topic/ipinfo-io-limits/

1.5.1

• We add the possibility to define de preferrec countries by adding the option preferredCountries. For example preferredCountries:es-fr (They have to be 2-letter country codes separated by hyphens ‘-‘)
• We add teh preferredCountries and size option to the GUI form tag creator form.

1.5.0

• We use upgrade JS version to 12.1.3. It fixes iPhone issues of old version
• We add mail tag that recovers iso code of the selected country

1.4.6

We change to new CF7 functions naming (shortcode->form-tag) to avoid deprecated message with debug active (completed). No new features added

1.4.5

We change to new CF7 functions naming (shortcode->form-tag) to avoid deprecated message with debug active (partial). No new features added

1.4.3

We avoid the placeholder text to be copied into the value of the input field. This, sometimes caused the flags to desappear

1.4.0

• We add new mail tags in order to be able to recover the country name of a telephone, the contry code and the telephone number without the country code
• In order to get the country name use where {your-phone} has to be replaced by the name of your tag
• In order to get the country code use where {your-phone} has to be replaced by the name of your tag
• In order to get the phone number without the country code use where {your-phone} has to be replaced by the name of your tag

Создание условной логики

Рассмотрим варианты, где нужно отображать одни поля при одном условии и другие при другом, т.е. варианты условного отображения полей.

Допустим мы хотим дать возможность пользователю отображать ту или иную группу полей. Создадим в начале формы поле с выпадающим списком:

Какие поля вы хотели бы просмотреть?

После установки плагина на странице редактирования формы появится новая кнопка Conditional fields Group:

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

Генератор создал новый шорткод , после нажатия «Вставить тег» он попадёт в форму как есть. Этот шорткод создает условие, нечто очень похоже на конструкцию:

if( условие ) {
	// Делаем что-либо, если условие выполнено
}

Шорткод должен приобрести вид:

Тут контент, который должен отобразиться при выполнении условия

Так как имя мы задали , соответственно этим контентом будут являться блок с основными полями. Обернем их в наш условный тег:

<fieldset>
<legend>Основные поля</legend>

Ваше имя


Ваш email

</fieldset>

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

После добавления полей и «условных шорткодов» очень важно сначала сохранить форму. В противном случае созданные поля и группы не будут отображаться на вкладке «Условные поля / Conditional Fields»

Добавим первое условие:

1. За значением какого поля надо следить? Указываем имя поля, в нашем случае .
2. Само условие — «равно» или «не равно» значению, что будет указано в 3 пункте.
3. Указываемое тут значение будет сверяться с выбранным значением у поля из 1 пункта.
4. Какой блок отобразить при выполнении условия. В нашем случае это .

Условие будет читаться так:
Когда в поле будет выбран вариант ответа «Основные поля» — отобразить контент внутри тега .

в старой версии можно было еще выбрать, что сделать, если условие выполнится — показать блок или скрыть? Теперь блок можно только показать (then show).

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

Весь код формы:

Какие поля вы хотели бы просмотреть?




	<fieldset>
	<legend>Основные поля</legend>

	Ваше имя
	

	Ваш email
	
	</fieldset>





	<fieldset>
	<legend>Дополнительные поля</legend>

	Какую CMS хотите выучить?
	

	
		Ваш вариант
		
	

	</fieldset>

Все условия:

Результат:

Description

This plugin adds conditional logic to Contact Form 7.

If you edit your CF7 form, you will see an additional tag called “Conditional fields Group”. Everything you put between the start and end tag will be hidden by default.
After you have added the field group(s), click Save and go to the “Conditional fields” tab to create one or more conditions that will make the group(s) appear.

Advanced

Advanced users can code up the conditions as plain text instead of using the select boxes, using the Text View.

Need more power?

Just like WordPress, the power of Contact Form 7 lies in its rich eco-system of extensions that build on top of it. However, it can be difficult to find a set of complex extensions that work well together.

That’s why I created Conditional Fields Pro. It adds some powerful features to Contact form 7 and guarantees that everything will run smoothly with Conditional Fields.

Pro features include:

• Repeatable fields (repeaters)
• Forms with multiple steps (multistep)
• Custom conditions with JavaScript functions
• Additional operators ( greater than, less than, .. )

Создание контактной формы в WordPress

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

2. После активации перейдите в Contact Form 7 -> Формы.

3. В открывшемся окне копируем строчку с кодом вставки.

4. Скопированный код вставляем на ту страницу, на которую мы хотим добавить форму обратной связи. После того как вставили код, не забудьте сохраните изменения нажав кнопку «Обновить».

Вот такой результат добавления контактной формы по получим:

Готово! Вы установили рабочую форму обратной связи на свой сайт!

Как видите, всего за несколько минут можно с легкостью установить на сайт форму обратной связи. На этом можно и поставить точку, но тем, кого не устраивает стандартная форма и кто хочет создать полностью новую контактную форму с другими полями и возможностями — рекомендую читать урок до конца.

Шаг 1. Установка скрипта прослушивания отправки формы

Для установки этого скрипта переходим в ГТМ в Теги, создадим тег с названием CF7 – Event Listener, выбираем тип Пользовательский HTML

и пропишем следующий код:

<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
		window.dataLayer.push({
			"event" : "email-sent",
			"formID" : event.detail.contactFormId,
			"fields" : event.detail.inputs
		})
	});
</script>

Выберем триггер активации для нашего тега All Pages

• event – это имя события, которое должно выполняться
• formID – id формы, которая будет прослушиваться (может быть и несколько форм)
• fields – поля (объекты), в которые должны вводиться данные

После этого включаем режим предварительного просмотра в GTM и пробуем отправить тестовое сообщение. В отладчике GTM увидим событие, которое появилось после отправки сообщения. Переходим во вкладку Data Layer и видим необходимые нам данные по этому событию.

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

• formID: ‘5’ – это ID нашей формы, пригодится, если на сайте мы отслеживаем несколько форм
• fields – это выпадающее меню, которое характеризует обращение пользователя и имеет следующие пункты: Продукция, Услуги и Поддержка

Затем откроем консоль разработчика и введём команду dataLayer, чтобы получить данные о событии.

Здесь мы также увидим номера нужных нам полей. Они помогут прописать нам переменную Data Layer. В нашем случае – номер объекта, который мы будем прослушивать – 4. Его необходимо запомнить.

Description

Addon for Contact Form 7 that creates a new type of input for entering and validating international telephone numbers. It adds a flag dropdown with prefix of the telephone number, detects the user’s country, displays a relevant placeholder and provides formatting/validation methods.

How to use

Once you have installed and activated your plugin, a new type of input field will be available in your Contact Form 7 forms. In order to add it to your form, you can either click on the “International Telephone” button above your form editor, or add the shortcode like: . Replace by the name do you want to give the field. Optionally, you can use the asterisk (*) to makes the field required.

Aditional info in your email

You can also recover specific parts of the telephone number: the name of the country it refers to, the country code, the number without the country code. Use this tags:

• : It prints the name of the country. For the example above: United States
• : It prints the country code of the phone number. For the example above: 1
• : It prints the country iso code. For the example above: us
• : It prints the phone number without international prefix. For the example above: 2025550109

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

The developer gives Amazing support!!!
I ran into a minor problem due to RTL language.
Within no time I got a support rep that helped me through and thoroughly!
Thanks, really recommend

Just working as it should! thanks!

Easy to use, great plugin, thumbs up!

Killed my love. This plug in was the absolute best, God rest her soul.
It is not compatible with the new WP core and how it is working. The simple truth is because of how Contact Form 7 had to adapt to the new wp core it is likely the vendor will have to keep it a legacy plug in.

I am hoping WP core team and contact form 7 takes security serious and there will never be another need for this again, with that said thanks for the years of service @dnesscarkey May we survive this together! AND NO I DO NOT WANT A REFUND your product has paid for it’s self time and time again:)

Did I say best plug-in of its kind? Perhaps I should restate that as «only» plug-in of its kind and it actually works as described. The support has been phenomenal too. When WP upgraded to 4.8, there was a bit of a hiccup with the plug-in, but Dinesh immediately addressed and resolved the issue for both lite and pro users and kept me in the loop as it was happening. He also assisted me in making CSS adjustments so that the error messages would stand out more vividly on form backgrounds where red just wasn’t working well. Dinesh is tops in my book and I don’t say that frivolously! Thank you Dinesh for your product and your support! It’s greatly appreciated!!!

Thank you for this useful plugin, that was helping to quickly improve validation message visibility. But It would be great to have a language file or better even a message translation panel, as not all sites are english and adding translations in the js is neither user friendly nor permanent.
Another point that could be improved is to add the admin menu to the forms menu, instead of having it further cluttering the already overloaded menu sidebar.

Description

CF7 Skins works right within the normal Contact Form 7 interface, making it easier for regular WordPress users to create Contact Form 7 forms – even if you don’t have HTML + CSS skills.

Includes a drag & drop Visual Editor together with range of compatible Templates and Styles.

Select from a list of compatible Templates that cover many common forms and then choose from a range of professional and beautiful Styles.

Each Template acts as an easy to follow guide, which can be adapted to your requirements. Every Style covers the full range of Contact Form 7 form elements.

CF7 Skins is highly customizable and easy to learn, even for beginners.

CF7 Skins Features

• Use a drag & drop Visual Editor to create your forms
• Select from a list of ready to use Templates
• Choose from a range of compatible form Styles
• Easily create complex forms using Contact Form 7 – without HTML and CSS knowledge

Website | Documentation | FAQ | Add-ons

Range of Add-ons available

CF7 Skins Pro – extra templates & styles

CF7 Skins Ready – extra useful styling options

CF7 Skins Multi – build multi-part forms

CF7 Skins Logic – add conditional logic to form fields

Персонализация

По умолчанию, для всех полей в Contact Form 7 используется стандартная стилизация из шаблона WordPress, не отличающаяся особой красотой. Из-за этого, многие пользователи ищут альтернативные решения, с более привлекательным внешним видом. Но для тех, кто знаком с CSS, будет очень просто изменить внешний вид полей по своему вкусу. Для этого можно воспользоваться атрибутами «ID» и «Class», которые задаются в параметрах каждого тега.

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