Сборник contact form 7 красивый дизайн. Советы, хаки, секреты. Перенаправление на другой адрес после отправки формы

Supports custom styling, which can be easily managed via admin dashboard. Also has predefined templates like Simple Pattern, Valentine’s Day, Christmas that can be activated on your Contact Form 7.

Custom style options:

— color styling,
— custom fonts (google fonts included),
— styling for input fields, text, textarea, labels, submit button, messages, placeholders,
— border-color,
— form background-color,
— form transparent background-color,
— form background-image,
— form container styling,
— form container background-image styling,
— form placeholder opacity styling,
— customized style can be imported / exported
— quick edit option
— support multiple forms with different design
— Style Template Slider on the Contact Form 7 form Settings page
— px,em, % unit selector for all the specified style settings
— possibility to change the syling for the HOVER state of each element
— live preview on changing/adding the new style properties of each element
— possibility to customize error messages, success messages and warning messages
— setting page, where can re-import deleted default templates, deactivate collecting data and / or manipulate the appearance of the «edit style» button on the page where you have your contact form 7 form

Скриншоты Установка

Upload the entire contact-form-7-style folder to the /wp-content/plugins/ directory

Make sure that Contact Form 7 is installed and activated (an admin notice will check for this)

Activate the plugin through the ‘Plugins’ menu in WordPress

You will find ‘Contact Style’ menu in your WordPress admin panel.

Отзывы

I spent about 2 hours on this plugin, going back and forth, looking through settings options over and over, refreshing over and over again, but after all that time, the plugin worked on 1 form but did nothing on the secondary form. I tried selecting other formats, other designs, tried selecting them so they"d show as "active" multiple times and then refreshing, cleaning my cache, on and on and the second fomr just will not take the plugin or changes made within it no matter what. So, ultimately unless there is some bizarre step that isn"t working, it doesn"t look good to have 1 form that looks modern and 1 that does not and can"t be changed. Very discouraging. It"s a great idea for plugin that is much-needed (CF7 is still a great plugin but looks very outdated and basic) and there simply are no other styling plugins for it that seem to work reliably so back to square one trying to find another plugin.I mean it"s nice that 1 form looks current but the second form that cannot be changed kind of throws a monkey wrench into the mix. Update: I was able to get the plugin to work on two different forms on two separate site pages so that the designs would look the same, but it just took several instances of going back and forth and tweaking and resetting the two different areas of settings that control the layout and look of the form. It works, just requires patience and going back and forth several times and clearing caches and retrying a few times.

Журнал изменений 3.1.8

Release Date: March 6th, 2018

• Removed functionality for non sensitive data tracking (not using this feature anymore) and removed status report too

3.1.7

Release Date: March 6th, 2018

• Major Fix Fixed I/O process with reducing the json requests from the servers
• Fixed the problem where the form was missing some settings when multiple form were selected in the custom style part
• Improvement Added settings to hide/show Contact Form 7 Style link

3.1.6

Release Date: November 7th, 2017

• Major Fix Fixed slash error and added extra condition to check for response

3.1.5

Release Date: November 6th, 2017

• Major Fix Fallback for setups where json file can not be accesed by wp_remote_get

3.1.4

Release Date: November 4th, 2017

• Major Fix Background image rendering fixed (added «url()»)

3.1.3

Release Date: November 3rd, 2017

• Placeholder elements styling and hover too + preview generate
• Opacity settings for placeholders
• Updated fonticons
• Contact Form 7 «Go To CF7» button to edit form structure
• Notifications handling modified
• Removed transparent checkbox from font color
• Updated plugin file structure for better code management
• JSON files for plugin settings
• Works with PHP 7
• Compatible with WordPress Multisite
• Refactored style generator
• General bugfixing

3.1.2

• Small Fix de-activated the possibility to drag boxes around
• Small Fix added possibility to add transparent background
• Small Fix added new Force CSS settings possibility to plugin
• Small Fix customized styling to remove this issue
• Small Fix added possibility to add 0 padding / 0 margin
• Possible to add negative margins on custom templates
• Possible to add decimal values for «%» and «em» units
• Added tooltip on settings page for better understanding
• general bugfixing
• user interface improvements

3.1.1

• Major Fix for custom styles
• Styling issue on buttons
• CSS generator core upgraded

3.1.0

• New Feature Error, confirmation, success message customization added
• New Feature Added settings field, where you can activate or deactivate the «edit custom style» button
• modified settings page field generation, now it will remove every hidden field to improve page load
• New predefined templates available
• for reliability and speed
• User interface improvements
• general bugfixing

3.0.5

• Major Fix Headers already sent
• Major Fix SSL security fix for Google Fonts
• Parse error: syntax error, unexpected T_STATIC
• general bugfixing

3.0.4

• Major Fix Fixed CSS editor «\» multiplier removed
• Collection data functionality to prevent fatal error for various server setups
• Prevent existing style data loss based on a new versioning system functionality
• Publish or Update Style button
• New feature — System Status page with the possibility to ask for help from the Contact Form 7 Style team by email
• New feature — Settings page — Install predefined templates or Allow collection data
• General bugfixing

3.0.3

• Major Fix JQuery conflict with Siteorigin Page Builder and Visual Composer

3.0.2

• New feature — generate cf7 form preview buttons added when creating new custom style
• Improvements — preview generations on various user interactions

3.0.1

• New feature — width and height styling properties for radio elements
• New feature — width and height styling properties for checkbox elements
• Improvements — general bugfixing

3.0.0

• UI rework, update, redesign
• New feature — Live Preview on all element changes with the actual Contact Form 7 form where the styling is applied
• New feature — Hover state design for all elements
• New feature — Style Selector Slider on Contact Form 7 Settings page, for quick style selection
• New feature — Introduced new unit selector
• New feature — Introduced new background-image add-on
• New feature — Introduced new styling properties
• New feature — Introduced fieldset, dropdowns, radio, checkbox
• Improvements — Bugfixing, running process, code updates
• Improvements — Modified Custom Styling logic and add it to new settings page
• Improvements — Message boxes behaviour
• Improvements — autocomplete styling where possible

2.2.8

• Optimize responsive view for predefined templates on mobile devices
• Added Invitora WordPress Theme compatibility
• Added support for special characters and fixed bugs

2.2.7

• Improvements for reliability and speed
• Enhanced plugin stability and fixed bugs
• Added Bretheon Premium WordPress Theme compatibility

2.2.6

• Added Avada Theme compatibility
• Added Bridge — Creative Multi-Purpose WordPress Theme compatibility
• Added Flatco — Multipurpose & Responsive WordPress Theme compatibility
• Improve CSS Editor UI

2.2.5 2.1

• New feature — Google fonts preview when edit the style
• New feature — List all styles thumbnail preview for predefined templates

2.0.1

• Admin panel minor adjustments

2.0

• New UI Admin settings options
• Use custom post type for individual style set up
• Multiple cf7 forms can have their own style
• Style can be activated only for certain cf7 forms
• All google fonts available for use
• Styling improvement for theme twentyfifteen, twentyfourteen
• New settings available
• Possibility to change certain settings for the «custom style» styles
• Style filtering by categories for easier use
• Possibility to save your settings and import / export the generated «custom style»
• Donate option for support the plugin’s continued development and better user support

1.1.1

• Added plugin update notification in plugin template selection panel

1.1.0

• Added Valentine’s Day templates for 2014.
• Fixed Xmas Red header and footer position
• Added Custom Style submenu for styling the templates

Плагин Contact Form 7 поможет организовать обратную связь на вашем сайте.

Скачать плагин Contact Form 7 можно на официальном сайте WordPress

Скачать плагин Really Simple CAPTCHA можно на официальном сайте WordPress

Как установить и подключить этот плагин мы рассмотрели в уроке « «, сейчас разберемся с дополнительными функциями плагина Contact Form 7. Форма корректно работает на мониторах, планшетах, телефонах и ноутбуках. Кстати если у вас сломался ноут, то есть сервис где делают ремонт ноутбуков HP .

После того как вы скачали и активировали плагин зайдите в настройки плагина перейдя в новый раздел панели управления «Контакты».

Наведите мышкой на название формы и выберите «Редактировать»

Откроется окно изменения параметров формы

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

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

Для добавления новых полей в форму нажмите на выпадающий список №3 — «Сгенерировать тэг» и из выпадающего списка выберите необходимый элемент.

• Текстовое поле
• E-mail
• Номер телефона
• Число (spinbox)
• Число (slider)
• Текстовое поле
• Выпадающее меню
• Checkboxes
• Radio buttons
• Acceptance
• Вопрос
• CAPTCHA
• Отправка файла
• Кнопка отправки

Подсказки и поля формы по умолчанию располагаются так: вверху подсказка, внизу элемент. Если хотите расположить описание и элемент в одну строку — уберите после текста тэг

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

Из выпадающего списка выберем элемент «Текстовое поле»

Если любая функция которую добавляете обязательна — поставьте галочку 1 и не забудьте от этом написать в описании.

Можно в поле ввода добавить дополнительную информацию, чтобы сделать более понятным заполнение формы. Отметьте галочкой пункт 2 «Использовать как заполнитель (placeholder)?» и рядом в поле впишите подсказку. При заполнении этого поля в форме текст подсказки исчезнет. Дальше следуйте подсказкам плагина. В результате получится такое вот поле в готовой форме:

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

E-mail

Используется для передачи в форму адреса почтового ящика отправителя

URL

Позволяет добавить в форму адрес сайта.

Номер телефона

В это поле возможно вписать только цифры

Число (spinbox)

Поле, в котором можно установить количество чего-либо, например товара. Количество устанавливается стрелками вверх/вниз.

Дата

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

Текстовое поле

Да, не удивляйтесь 🙂 Еще одно текстовое поле. На этот раз, это поле имеет большие размеры и позволяет писать в него много текста. Например отзывы, комментарии.

Выпадающее меню

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

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

Checkboxes

Флажком, или на жаргоне разработчиков чекбоксом, называется элемент, который создает поле для проставления галочки. Это поле имеет два состояния - отмечена галочка или нет. Возможен множественный выбор. Располагаются только в ряд, если отметить галочкой «Сделать чек-боксы взаимоисключающими?» то будет возможен выбор только одного параметра.

Radio buttons

Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Отметив галочкой пункт » Разместить сначала метку, а потом чек-бокс?» меняется расположение метки и поля выбора, по умолчанию сначала выбор, потом метка.

Acceptance

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

Вопрос

Это первая линия обороны от спама, самая элементарная. В настройка пишите какой то вопрос, можно цифрами, можно буквами или и так и так, и указываете правильный ответ. Если ответ при заполнении формы будет правильным, то форма отправится. Зеленым отмечено какая часть этой формулы будет отображаться на сайте перед полем ввода ответа, красным — ответ. Правильный ответ в формуле пишется после знака | (вертикальной черты)

Добавляет в форму защиту от спама.

Для работы этой функции необходим еще один плагин . Скачивайте, устанавливаете, активируйте плагин.

Настройки можно не менять, копируете и вставляете 2 строчки перед кнопкой отправить.

Отправка файла

К форме отправки сообщения можно прикрепить файл. В настройках можно указать максимальный размер в байтах, и разрешенные форматы для загрузки, например.jpg .tiff .doc

Кнопка отправки

Отправка формы. В настройках в разделе «Ярлык» — можно дать название кнопки (Отправить, ответить, послать 🙂)

Настройка внешнего вида Contact Form 7

Так как плагины имеют свойства обновляться, изменения внешнего вида формы будем производить в файле стилей темы сайта style.css

За отображение формы, ее полей и прочих элементов отвечает код:

Wpcf7 { background-color:#ddd; } /*цвет фона формы */ .wpcf7 input, .wpcf7 textarea{ padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height: 20px; border: 1px solid #C7C7C7; box-shadow: inset 2px 2px 8px #F9F9F9; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .wpcf7 .wpcf7-list-item{ padding-left: 0; margin-left: 0; margin-right: 25px; } .wpcf7 .wpcf7-list-item input{ border: none; padding-left: 0; margin-left: 0; } .wpcf7 select{ outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; } .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active { background: #FDFDFD; outline: none; }

Что есть тут что.

.wpcf7 input, .wpcf7 textarea — стиль поля ввода (текстового поля)

padding - задает отступ от содержимого до границы элемента. Здесь — отступ от вводимого в поле текста до границы поля. Устанавливается значение в пикселях Xpx, где X количество пикселей. Пример: padding: 5px 3px 6px 8px;

color - цвет текста.

font-family - шрифт полей ввода.

font-size - размер шрифта

line-height - высота строки

border - рамка вокруг поля ввода

box-shadow - тень блока. inset указывает на то, что тень внутренняя. Если нужна внешняя тень, пропустите это значение. Второе и третье значения 2px 2px указывают на смешение тени по горизонтали и вертикали соответственно. Четвертое значение 8px задает радиус размытия тени. Пятое - #F9F9F9 - цвет тени.

Настройка кнопки Contact Form 7 .buttons_form { padding: 0px; height: 30px; width: 150px !important; border: none !important; cursor: pointer; color: #fff; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; color: #faddde; border: solid 1px #980c10; background: #d81b21; background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); background: -moz-linear-gradient(top, #ed1c24, #aa1317); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317"); } Стиль уведомлений Contact Form 7

Он отвечает за сообщения об ошибках или успешной отправке

Wpcf7 .wpcf7-validation-errors{ border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ok{ border:none; background-color:#7ad33f; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ng{ border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white; } .wpcf7 span.wpcf7-not-valid-tip{ border:none; background-color:#349622; padding:5px; padding-left: 5px; padding-right: 5px; border-radius:10px; width: 290px; color: white; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); }

А теперь для удобства весь код целиком с комментариями:

Wpcf7 { background-color:#ddd; } /*цвет фона формы */ .wpcf7 input, .wpcf7 textarea{ /* Данная часть кода отвечает за стиль полей ввода, текстовые области */ padding:5px; /* Устанавливает отступ от полей элемента до его содержимого, можно поставить любое знаниче, например 10px */ color:#1D1D1D; /* Цвет текста в полях ввода */ font-family:Arial, Helvetica, sans-serif; /* Шрифт текста в полях ввода */ font-size:16px; /* Размер текста в полях ввода */ line-height: 20px; /* Высота стоки в полях ввода */ border: 1px solid #C7C7C7; /* Рамка вокруг полей. Первое значение - ширина в пикселах, второе - стиль рамки, третье - ее цвет */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Тень от полей ввода. 2px - сдвиг по оси x, 2px - сдвиг по оси y, 8px - радиус размытия тени, #F9F9F9 - цвет тени */ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .wpcf7 .wpcf7-list-item{ padding-left: 0; margin-left: 0; margin-right: 25px; } .wpcf7 .wpcf7-list-item input{ border: none; padding-left: 0; margin-left: 0; } .wpcf7 select{ outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; } .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active { /* Данная часть отвечает за стиль полей ввода при наведении на них указателя мыши */ background: #FDFDFD; /* Фон поля ввода при наведении указателя мыши на него */ outline: none; /* Внешняя граница поля ввода текста */ } .wpcf7 input.wpcf7-submit{/* Данная часть кода отвечает за стиль кнопки Отправить в форме */ -webkit-transition: 0; -moz-transition: 0; -o-transition: 0; transition: 0; border: none; /* Рамка вокруг кнопки */ position: relative; color: #fff; /* Цвет текста */ text-transform: uppercase; /* Преобразование текста (uppercase значит, что текст на кнопке будет отображаться заглавными буквами) */ /* Скругление углов кнопки. Значения следующих трех свойств должны быть одинаковы, так как это одно и то же, только для разных браузеров */ -webkit-border-radius: 6px; /* Скругление углов для Chrome */ -moz-border-radius: 6px; /* Скругление углов для Mozilla FireFox */ border-radius: 6px; /* Скругление углов для всех остальных браузеров, в том числе мобильных */ font-size: 14px; /* Размер текста кнопки */ font-weight: bold; /* Стиль текста (bold значит жирный) */ padding-top: 11px; /* Отступ сверху от края элемента до его содержимого */ padding-bottom: 10px; /* Отступ снизу от края элемента до его содержимого */ padding-left: 35px; /* Отступ слева от края элемента до его содержимого */ padding-right: 35px; /* Отступ справа от края элемента до его содержимого */ /* Gradient background - Градиентный фон кнопки */ background-color: #000000; /* Цвет фона кнопки, если градиент не поддерживается браузером */ /*В следующих свойствах цвета должны быть указаны одинаково, так как это одно и то же, только для разных браузеров. Разберем первое свойство. Часть from(#676767), to(#3B3B3B) значит, что надо отобразить градиент, где от цвета #676767) идет переход к цвету #3B3B3B */ background: -webkit-gradient(linear, left top, left bottom, from(#676767), to(#3B3B3B)); background: -moz-linear-gradient(top, #349622, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow - Тень кнопки. Цвет тени указан в RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); box-shadow: 0 2px 5px rgba(0,0,0,0.3); } /* On hover - Стиль кнопки при наведении указателя мыши. Все почти то же самое, что и в предыдущем блоке */ .wpcf7 input.wpcf7-submit:hover{ cursor: pointer; text-decoration: none; background-color: #000000; background: -webkit-gradient(linear, left top, left bottom, from(#246416), to(#349622)); background: -moz-linear-gradient(top, #246416, #349622); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#246416", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; } /* On click - стиль кнопки при нажатии на нее се почти то же самое, что и в предыдущем блоке */ .wpcf7 input.wpcf7-submit:active{ top: 1px; color: #d8c6e2; /* Цвет текста кнопки при нажатии на нее */ background-color: #000000; background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#246416)); background: -moz-linear-gradient(top, #FF0000, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* CF7 Messages - Стиль сообщений об успешной отправке, ошибках и т.д. */ .wpcf7 .wpcf7-validation-errors{ /* Стиль сообщений при ошибках валидации */ border:none; /* Рамка блока сообщения */ background-color:#246416; /* Фон */ color:#fff; /* Цвет текста */ margin:0; /* Внешний отступ */ padding:20px; /* Внутренний отступ */ /* Скругление углов для разных браузеров - следующие 3 свойства */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ok{ /* Стиль сообщений об успешной отправке */ border:none; /* Рамка блока сообщения */ background-color:#7ad33f; /* Фон */ margin:0; /* Внешний отступ */ padding:20px; /* Внутренний отступ */ /* Скругление углов для разных браузеров - следующие 3 свойства */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ng{ border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white; } .wpcf7 span.wpcf7-not-valid-tip{ border:none; background-color:#349622; padding:5px; padding-left: 5px; padding-right: 5px; border-radius:10px; width: 290px; color: white; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); } .wpcf7-form .fleft{ float: left; } .wpcf7-form .mright20{ margin-right: 20px; } .wpcf7-form .mright40{ margin-right: 40px; } .wpcf7-form .clear{ clear: both; }

События DOM

Отслеживая события DOM, вы можете сделать что-либо в нужный момент при работе с формой. К примеру, после успешной отправки формы сказать "Спасибо" в всплывающем окне или перенаправить пользователя на другую страницу.

Список событий формы

Wpcf7invalid Срабатывает, когда форма успешно была отправлена на сервер, но почта не была отправлена , потому что были поля с недопустимым вводом. wpcf7spam Срабатывает, когда форма успешно была отправлена на сервер, но почта не была отправлена , поскольку обнаружена возможная активность спама. wpcf7mailsent Срабатывает, когда форма успешно была отправлена на сервер и почта отправлена адресату. wpcf7mailfailed Срабатывает, когда форма успешно была отправлена на сервер, но отправить почту не удалось . Это может быть в следствии того, что на хостинге не работает почтовый сервер. wpcf7submit Срабатывает, когда форма успешно была отправлена на сервер, независимо от других инцидентов. Нажали кнопку "Отправить" - сработало этой действие. wpcf7beforesubmit Срабатывает раньше события wpcf7submit , что позволяет провести любые манипуляции с formData - данными формы, которые будут отправлены на сервер. Событие добавлено в CF7 v4.9.

Код из примеров ниже нужно использовать там, где выводится форма. Если форма у вас выводится на всех страницах сайта, то хорошим решением будет разместить код в файле footer.php , так как этот шаблон используется на всех страницах сайта.

Примеры для события wpcf7submit

Код ниже - простой пример регистрации обработчика события. В этом примере функция прослушивает событие wpcf7submit у контейнера с классом wpcf7 и просто выдает предупреждение при его возникновении, то есть при клике по кнопке "Отправить" сразу вызывает сообщение "Опачки, меня пытаются отправить... в Магадан!". Заметьте, что элемент с классом wpcf7 - это DIV с формой внутри, всё это плагин генерирует самостоятельно. Если у вас на странице несколько форм, код отработает только для первой найденной формы . Конечно, вы замените ненужный alert() на более полезное действие, к примеру, красивой анимацией отправки формы.

// Ищем блок с формой, имеющий класс wpcf7 (его имеют все div с формой) var wpcf7Elm = document.querySelector(".wpcf7"); // Мониторим событие wpcf7submit у выбранного блока wpcf7Elm.addEventListener("wpcf7submit", function(event) { alert("Опачки, меня пытаются отправить... в Магадан!"); // Либо что-то более полезное }, false);

Если вам захочется мониторить какую-то определенную форму (ниже по статье будут альтернативные решения, более рациональные), то укажите ID контейнера:

// Ищем уникальный блок с формой по его ID var wpcf7Elm = document.querySelector("#wpcf7-f92-p95-o1"); // Тут мониторинг события wpcf7submit , как в предыдущем примере.

Примеры выше рассчитаны на работу с одной формой. Если на странице несколько форм и надо мониторить событие wpcf7submit (или другие) у всех, то вешаем событие не на отдельный блок, а на весь document:

Document.addEventListener("wpcf7submit", function(event) { alert("Кто-то отправил форму! Какую именно? Пока не знаю."); }, false);

Как отследить введенные данные в поля

Пользовательские данные передаются обработчику события как свойство detail.inputs объекта события. Структура данных detail.inputs представляет собой массив объектов, и каждый объект имеет свойства имени и значения. Допустим у формы 4 поля. Используем код:

Document.addEventListener("wpcf7submit", function(event) { var inputs = event.detail.inputs; console.log(inputs); }, false);

При нажатии кнопки "Отправить" в консоле браузера отобразится структура данных:

Нам доступны имя каждого поля формы (имя поля указывается в админке в теге поля и является обязательным атрибутом) и его значение.

Перебрать каждое поле и отреагировать на определенное можно так:

Document.addEventListener("wpcf7submit", function(event) { var inputs = event.detail.inputs; // Ищем поле с именем your-name и злоупотребляем alert"ом при нахождении поля for (var i = 0; i < inputs.length; i++) { if ("your-name" == inputs[i].name) { alert(inputs[i].value); break; } } }, false);

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

Detail.contactFormId ID контактной формы. Данный ID можно увидеть в админке в адресной строке при редактировании формы или в самом шоткоде формы. detail.pluginVersion Версия плагина Contact Form 7. detail.contactFormLocale Языковой код формы. К примеру, ru_RU . detail.unitTag Юнит-тег контактной формы. У каждой формы свой, к примеру wpcf7-f92-p95-o1 . detail.containerPostId ID поста, в контенте которого размещена форма.

Просмотреть все данные можно так:

Document.addEventListener("wpcf7submit", function(event) { console.log(event.detail); }, false);

Как обработать определенную форму

Например, если вы хотите что-то сделать только с определенной формой контакта (ID = 123), используйте свойство detail.contactFormId, как показано ниже:

Document.addEventListener("wpcf7submit", function(event) { if ("123" == event.detail.contactFormId) { alert("Контактная форма с ID = 123."); // Делаем ещё что-нибудь } }, false);

Борьба со спамом с помощью Akismet

Как бороться со спамом в плагине Contact Form 7? Предусмотрено несколько механизмов, но лишь пара являются популярными: reCAPTCHA и Akismet.

Как установить и настроить Akismet? При установке WordPress плагин Akismet устанавливается автоматически, остаётся его лишь активировать. Если по каким-то причинам его нет, то эти ссылки Вам помогут:

После активации плагина появится сообщение с предложением активировать вашу учётную запись:

При нажатии по кнопке вас перекинет на страницу настроек плагина:

Чтобы Akismet заработал, надо в настройках плагина указать API-ключ. Если его нет, то нажимайте кнопку "Получить API-ключ" и следуйте инструкциям:

• Регистрация на офф. сайте плагина с использованием аккаунта wordpress.com
• Выбор тарифного плана (есть бесплатный)
• Добавление сайта в админ-панель сервиса по нажатию кнопки "Activate this site"

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

Чтобы Akismet начал проверять поле, нужно при его генерации указать по какому правилу делать проверку, например:

Akismet:author Добавьте такой параметр в поле для ввода имени пользователя.
Пример: akismet:author_email Добавьте такой параметр в поле для ввода email пользователя.
Пример: akismet:author_url Добавьте такой параметр в поле для ввода ссылки от пользователя.
Пример:

Рекомендуется использовать параметр akismet:значение ко всем полям, которые предусматривают такую проверку. По собранным данным Akismet примет решение, спам это или нет, поэтому их полнота играет важное значение.

В Contact Form 7 есть несколько видов оформления извещений:

Зеленая рамка у извещения Сообщение отправлено успешно Жёлтая рамка у извещения Некоторые поля заполнены с ошибкой, валидацию поле не прошло Оранжевая рамка у извещения Сообщение отмечено как спам Красная рамка у извещения Отправка сообщения провалена

Теперь можно протестировать работу формы с Akismet защитой, вписав вместо имени пользователя "viagra-test-123". Сообщение с такими данными будет помечено как спам и отослано на почту не будет.

Ограничение доступа к панели администрирования

Изначально, вкладка с формами Contact Form 7 доступна всем пользователям с ролью участника (contributor) и выше. Редактировать формы могут только редакторы и администраторы. Как изменить права доступа к формам?

Параметры доступа изменяются с помощью констант, которые прописываются в корне движка в файле wp-config.php , например:

Define("WPCF7_ADMIN_READ_CAPABILITY", "manage_options"); define("WPCF7_ADMIN_READ_WRITE_CAPABILITY", "manage_options");

Право manage_options по умолчанию имеют администраторы и супер администраторы сайта. Поэтому данный пример даст доступ к списку форм и возможность их редактировать только пользователям с этими ролями. Другие роли не увидят вкладку плагина.

WPCF7_ADMIN_READ_CAPABILITY Минимальная роль или возможность для доступа к админке, то есть отображения меню и списка форм.
По умолчанию: edit_posts WPCF7_ADMIN_READ_WRITE_CAPABILITY Минимальная роль или возможность для редактирования форм. Этот параметр должен быть строже или такой же, как WPCF7_ADMIN_READ_CAPABILITY. Объясняется это тем, что нельзя редактировать формы, не имея доступа к админ-панели.
По умолчанию: publish_pages

Чтобы лучше понимать, как это работает, взгляните на код (CF7 v4.9.1, файл capabilities.php) с использованием этих констант:

Add_filter("map_meta_cap", "wpcf7_map_meta_cap", 10, 4); function wpcf7_map_meta_cap($caps, $cap, $user_id, $args) { $meta_caps = array("wpcf7_edit_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_edit_contact_forms" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_read_contact_forms" => WPCF7_ADMIN_READ_CAPABILITY, "wpcf7_delete_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_manage_integration" => "manage_options", "wpcf7_submit" => "read",); $meta_caps = apply_filters("wpcf7_map_meta_cap", $meta_caps); $caps = array_diff($caps, array_keys($meta_caps)); if (isset($meta_caps[$cap])) { $caps = $meta_caps[$cap]; } return $caps; }

Из кода видно, что массив возможностей проходит через фильтр wpcf7_map_meta_cap , и содержит следующие данные:

По умолчанию Array ( => publish_pages => publish_pages => edit_posts => publish_pages => manage_options => read) После изменения, к примеру, с помощью констант Array ( => manage_options => manage_options => manage_options => manage_options => manage_options => read)

Благодаря фильтру wpcf7_map_meta_cap , мы может изменить данный массив. Этот способ избавляет нас от редактирования файла wp-config.php , но придется писать код, к примеру, в файле functions.php:

Add_filter("wpcf7_map_meta_cap", "change_wpcf7_map_meta_cap"); function change_wpcf7_map_meta_cap($meta_caps) { // Новые значение возможностей $replace_caps = array("wpcf7_edit_contact_form" => "manage_options", "wpcf7_edit_contact_forms" => "manage_options", "wpcf7_read_contact_forms" => "manage_options", "wpcf7_delete_contact_form" => "manage_options",); return array_replace($meta_caps, $replace_caps); }

Оформление чекбоксов и радиокнопок

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

Так выглядят чекбоксы по умолчанию:

Но если передать в тег чекбокса параметр label_first , отображение лейбла относительно флажка измениться на обратное:

Чтобы выстроить чекбоксы в столбик, добавьте строку стилей в CSS файл темы:

Span.wpcf7-list-item { display: block; }

Чтобы выстроить чекбоксы как таблицу, добавьте строку стилей в CSS файл темы (дополнительно использовался параметр label_first):

Span.wpcf7-list-item { display: table-row; } span.wpcf7-list-item * { display: table-cell; }

Загрузка JavaScript и CSS по необходимости

По умолчанию Contact Form 7 загружает JavaScript и CSS на всех страницах сайта, независимо где используется форма. Технически плагин не может работать иначе, но ему можно «подсказать».

Пример 1 - полное отключение JavaScript и CSS и включение где нужно Шаг 1 - отключение JavaScript и CSS на всех страницах сайта

Существует константа WPCF7_LOAD_JS со значением по умолчанию true , которая определена в коде плагина и отвечает за загрузку JavaScript на всех страницах сайта. Её можно переопределить, вставив в файл wp-config.php код:

Define("WPCF7_LOAD_JS", false);

Этот код отменит загрузку скриптов плагина.

И такая же константа есть для стилей WPCF7_LOAD_CSS , которая работает по тому же принципу - отменяет загрузку стилей плагина:

Define("WPCF7_LOAD_CSS", false);

С версии плагина 3.9 и выше, можно отменить загрузку JavaScript и CSS через хуки в functions.php:

Add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false");

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

Шаг 2 - загрузка файлов на страницах с формами

Например, у нас есть страница "Контакты" с формой. За вывод страницы отвечает файл contact.php . Тогда, воспользуемся кодом:

If (function_exists("wpcf7_enqueue_scripts")) { wpcf7_enqueue_scripts(); } if (function_exists("wpcf7_enqueue_styles")) { wpcf7_enqueue_styles(); }

Эта конструкция должна быть размещена в файле contact.php до вызовы функции wp_head() . Это рекомендация разработчика плагина.

Пример 2 - отключение скриптов и стилей везде где НЕ нужно

Есть более гибкий метод, позволяющий указать, на каких страницах подключать скрипты. Данный код нужно вставить в functions.php:

1 вариант: ## Отключаем стили, скрипты плагина везде кроме страницы contacts add_filter("wp", "cf7_disable_css_js"); function cf7_disable_css_js(){ if(! is_page("contacts")){ add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false"); } } 2 вариант: ## Отключаем стили, скрипты плагина везде кроме страницы contacts add_action("wp_print_styles", "my_deregister_javascript", 100); function my_deregister_javascript(){ if(! is_page ("contacts")){ wp_deregister_script("contact-form-7"); // отключаем скрипты плагина wp_deregister_style("contact-form-7"); // отключаем стили плагина } } Пример 3 - включение скриптов только при использовании шорткода формы

Сначала отменяем подключение JS и CSS, а затем подключаем обратно только тогда, когда срабатывает шорткод формы. Тем самым файлы подключатся только на тех страницах, где есть шорткод формы.

Function wpcf7_remove_assets() { add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false"); } add_action("wpcf7_init", "wpcf7_remove_assets"); function wpcf7_add_assets($atts) { wpcf7_enqueue_styles(); return $atts; } add_filter("shortcode_atts_wpcf7", "wpcf7_add_assets");

Код можно оформить как плагин или вставить в functions.php темы.

Отслеживание форм с помощью Google Analytics

Есть простой способ отслеживать события формы через Google Analytics.

Во-первых, убедитесь в наличии кода от Google Analytic, выглядит он примерно так:

(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o);a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,"script","//www.google-analytics.com/analytics.js","ga"); ga("create", "UA-XXXXX-Y", "auto"); ga("send", "pageview");

Если код Аналитики есть или после его установки, в систему можно отправлять данные, за которыми затем можно следить в админке Google Analytics. Подробнее об этом читайте в официальной документации об отслеживании событий .
К примеру, нужно отследить отправку форму, для этого нужно выполнить такой код:

Ga("send", "event", "Contact Form", "submit");

Последним шагом является вставка этого фрагмента в код JavaScript в заголовок HTML ( ) каждой страницы. Вы можете для этого отредактировать шаблон header.php вашей темы, или вы можете использовать на хуке wp_head functions.php.

document.addEventListener("wpcf7mailsent", function(event) { ga("send", "event", "Contact Form", "submit"); }, false);

А так можно отслеживать успешную отправку каждой отдельной формы:

Document.addEventListener("wpcf7mailsent", function(event) { if ("123" == event.detail.contactFormId) { ga("send", "event", "Contact Form 123", "submit"); } if ("253" == event.detail.contactFormId) { ga("send", "event", "Contact Form 253", "submit"); } }, false);

Теперь, при успешной отправке формы вы будите видеть это событие в админке Google Analytics (Поведение -> События -> Обзор). Возможно, данные появятся там не сразу после совершения события, а после 24-48 часов.

Выбор адресата в форме

Представим, что у вас небольшая веб-студия с персоналом: сеошник, продажник и техподдержка. Как с помощью одной формы отправить информацию кому-то из них лично? На помощь придёт поле select (выпадающий список)! Задача решается в два этапа.

1 этап - добавление тега в шаблон формы:

2 этап этап - вставка в поле "Кому" тег , который при отправке письма будет брать из нашего выпадающего списка выбранную пользователем почту и подставлять в поле.

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

[email protected] [email protected] [email protected]

Как видно, адреса электронной почты "хранятся" в открытом виде. Этим могут воспользоваться вездесущие спамеры. Но не после маленькой хитрости... Модернизируем наш тег так:

Здесь мы передавали параметр через так называемую трубу (прямой слеш) по правилу имя|значение. В итоге получили следующую html структуру на выходе:

Сеошник Продажник ТехПоддержка

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

Усложним задачу еще...

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

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

Итак, первая копия приходит сеошнику и тот понимает о чем речь в сообщении. А вот менеджер не понимает, какому специалисту было адресовано письмо, ведь он может не до конца разбираться в теме или не помнить все почтовые адреса специалистов. Возникает потребность в шаблоне письма использовать не только значение поля (в нашем случае адреса электронной почты), но и заголовок пункта (название специалиста)? Для этого плагин предоставляет нам тег [_raw_{field name}] , где {field name} - название нашего поля. Подытожим употребление тегов:

Значение поля, которое в шаблоне письма преобразуется в значение выбранного пункта (адрес электронной почты в нашем примере, то есть [email protected]) [_raw_your-recipient] имя поля, которое в шаблоне письма преобразуется в имя (заголовок) выбранного пункта (название специалиста в нашем примере, то есть Сеошник)

Если данный функционал не нужен, то его можно отключить, вписав следующий код в файл wp-config.php:

Define("WPCF7_USE_PIPE", false);

Добавление Cc, Bcc и других заголовков письма

Contact Form 7 во вкладке с настройкой шаблона письма имеет поле для отправки дополнительных заголовков (Additional Headers) по правилу название-заголовка: значение. Каждый заголовок должен идти с новой строки.

Рассмотрим самые популярные - Reply-To , Cc и Bcc , об остальных читайте на Википедии .

Reply-To Имя и адрес, куда следует адресовать ответы на это письмо. К примеру, вы в форме попросили пользователя указать его email. Используйте его, чтобы почтовый клиент сразу знал, на какой email надо отправить ответ. Cc (от англ. carbon copy) содержит имена и адреса вторичных получателей письма, к которым направляется копия. Bcc (от англ. blind carbon copy) содержит имена и адреса получателей письма, чьи адреса не следует показывать другим получателям.

Contact Form 7 на вашем языке

Contact Form 7 автоматически использует перевод того языка, который вы используете в админке. Меняется язык в Настройки -> Общие -> Язык сайта (выпадающий список). Но так изменится язык для всего сайта. А что делать, когда у вас авторы говорят на разных языках?

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

Специальные теги письма

Contact Form 7 поддерживает несколько специфических тегов, которые могут понадобиться при работе с формой. Например, в письме указать IP отправителя и ссылку страницы, где была форма заполнена. Специальные теги можно использовать в шаблоне письма или других полях формы.

Теги отправки [_remote_ip] Этот тег будет заменен на IP пользователя. [_user_agent] Этот тег будет заменен на User Agent браузера пользователя. User Agent - это строка, которую используют веб-браузеры в качестве своего имени, она содержит не только имя браузера, но и версию операционной системы и другие параметры. [_url] Этот тег будет заменен на адрес страницы, с которой была отправлена форма. [_date] Будет заменен на дату отправки формы. [_time] Будет заменен на время отправки формы. [_invalid_fields] Этот тег заменяется количеством полей формы с недопустимым вводом. Используйте в шаблонах уведомлений. [_serial_number] Будет заменен на порядковое число сохраненного сообщения. Должен быть установлен плагин Flamingo 1.5+, о нем рассказано ниже. Теги поста

Данные теги будут работать только в контенте поста. Если форма в модальном окне, в сайдбаре, футере или хедере, встроена в шаблон темы, то есть вне контента поста - они не сработают.

[_post_id] Будет заменен на ID поста, в контенте которого отображена форма. [_post_name] Будет заменен на имя (slug) поста, с которого была отправлена форма. [_post_title] Будет заменен на название (заголовок) поста, с которого была отправлена форма. [_post_url] Будет заменен на ссылку (url) поста, с которого была отправлена форма. [_post_author] Будет заменен на имя автора поста, с которого была отправлена форма. [_post_author_email] Будет заменен на email автора поста, с которого была отправлена форма.

Теги сайта

[_site_title] Будет заменен названием сайта (указывается в Общих настройках). [_site_description] Будет заменен описанием сайта (указывается в Общих настройках). [_site_url] Будет заменен адресом сайта (указывается в Общих настройках). [_site_admin_email] Будет заменен на адрес e-mail сайта (указывается в Общих настройках).

Теги пользователя

Эти теги предоставляют информацию о текущем зарегистрированном пользователе .

Теги [_user_*] работают только тогда, когда Отправитель имеет учетную запись и авторизовался. Если форму отправит неавторизованный пользователь, то эти теги вернут пустой результат и смысла от них не будет. Рекомендуется включить режим " ", чтобы форма отображалась только для зарегистрированных пользователей.

Если нужно использовать эти теги, и при этом не нужно использовать опцию "только для подписчиков" (subscribers_only: true), вам нужно включить nonce опцию. Если всего этого не сделать, данные авторизованных юзеров будут сброшены через WP REST API и указанный тег будет пропущен (заменен на пустую строку).

[_user_login] Будет заменен на логин пользователя. [_user_email] Будет заменен на email пользователя. [_user_url] Будет заменен на URL сайта пользователя. [_user_first_name] Будет заменен на имя пользователя. [_user_last_name] Будет заменен на фамилию пользователя. [_user_nickname] Будет заменен на ник пользователя. [_user_display_name] Будет заменен на отображаемое имя пользователя.

Сохранение отправленных сообщений с помощью Flamingo // Можно тоже самое сделать с помощью фильтра add_action("wpcf7_autop_or_not", "__return_false"); WPCF7_USE_PIPE Когда значение константы false (по умолчанию true), Contact Form 7 начинает воспринимать | как обычный символ. WPCF7_ADMIN_READ_CAPABILITY Минимальная роль или возможность для доступа к админке.
По умолчанию: edit_posts . WPCF7_ADMIN_READ_WRITE_CAPABILITY Минимальная роль или возможность для редактирования форм. По умолчанию publish_pages . Этот параметр должен быть строже или такой же, как WPCF7_ADMIN_READ_CAPABILITY. Это объясняется тем, что Нельзя редактировать формы, не имея доступа к панели администрирования. WPCF7_CAPTCHA_TMP_DIR Определение этой константы переопределит путь к папке для временных файлов CAPTCHA. WPCF7_CAPTCHA_TMP_URL Определение этой константы переопределит ссылку к папке для временных файлов CAPTCHA. WPCF7_UPLOADS_TMP_DIR Определение этой константы переопределит путь к временной папке для загруженных файлов. WPCF7_VERIFY_NONCE

Указывает плагину, проверять nonce (защитный код) или нет. С версии плагина 4.9 эта константа стала иметь значение false , то есть "не проверять". Вернуть проверку можно установив значение константы в true или с помощью хука

Add_filter("wpcf7_verify_nonce", "__return_true");

Перенаправление на другой адрес после отправки формы

Когда нужно после успешной отправки формы переадресовать пользователя на какую-то страницу, к примеру, с благодарностью или подарком, воспользуйтесь JavaScript хуком:

document.addEventListener("wpcf7mailsent", function(event) { location = "http://example.com/"; }, false);

Смотрите пункт "События DOM", чтобы разобраться, как это работает.

Черный список спама от WordPress для фильтрации форм

Если вы страдаете от наплыва спама или нежелательных сообщений, а CAPTCHA или Akismet не справляются, то выручить может встроенный в движок функционал "Черный список".

Черный список находится в админке по пути Настройки -> Обсуждение.

Если сообщение, отправляемое через Contact Form 7, содержит какие-либо из этих слов в своём тексте, имени автора, URL, адресе e-mail или IP - оно будет помечено, как спам, и отправлено не будет. Каждое слово или IP с новой строки. Используется поиск по подстроке, то есть по слову «купи» будет найдено «купить».

Как узнать IP-адрес, с которого приходит спам через форму Contact Form 7? Самый простой способ заключается в использовании специального тега [_remote_ip] . Данный тег вставляется в шаблон письма и будет заменен на IP-адрес отправителя при отправке письма.

Дизайн форм Contact Form 7

Я часто привожу html код того или иного поля в Contact Form 7 . Вы можете наблюдать, какие классы по умолчанию добавляет плагин полям. А сейчас мы вкратце пробежимся, как задать свои классы полям формы.

Какой CSS редактировать чтобы изменить внешний вид формы?

Все стили, которые отвечают за внешний фид форм, хранятся в файле плагина contact-form-7/includes/css/styles.css . Изменять этот файл - плохая идея, так как при обновлении плагина файл заменится и вы потеряете все изменения. Тоже самое относится и к публичным темам, которые также обновляются, как и плагины.

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

Если у вас своя тема, то можно изменить (перебить) стили Contact Form 7 в стилях темы.

Стили полей в Contact Form 7

Плагин поддерживает множество типов полей, но самый распространенный тип поля - текстовый. Чтобы задать такому полю стиль, нужно обратиться к нему по типу:

Wpcf7 input{ background-color: #fff; color: #000; width: 50%; }

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

Wpcf7 input, .wpcf7 input, .wpcf7 textarea{ background-color: #fff; color: #000; width: 50%; }

Вышеперечисленные стили будут применены ко всем полям и формам плагина Contact Form 7 на это указывает селектор.wpcf7 . Подробнее о селекторах .

Стиль для определенного поля

При создании любого поля можно задать ему идентификатор или класс:

Теперь в CSS, благодаря идентификатору, мы можем обратиться только к этому полю:

#very-special-field{ color: #f00; border: 1px solid #f00; }

Стиль формы

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

Wpcf7{ background-color: #f7f7f7; border: 2px solid #0f0; }

Настройка сообщений об ошибках

При отправке формы, если обязательное поле не заполнено или не прошло првоерку, Contact Form 7 отобразит сообщение об ошибке. Эти сообщения можно настроить.

Изменение текста

Текст той или иной ошибки, уведомления можно изменить. Например, при отправке формы с незаполненным обязательным полем появляется сообщение "Поле обязательно." Чтобы изменить текст этого сообщения, откройте редактирование формы, вкладку "Уведомления при отправке формы ". Если нужно изменить текст ошибки для каждого поля в отдельности, то стоит обратить внимание на плагин Contact form 7 Custom validation .

Статическое или плавающее сообщение?

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

Статический стиль сообщений

Сообщения об ошибках отображаются ниже поля и не исчезают, пока форма не будет успешно отправлена.

Плавающий стиль сообщений

Сообщения об ошибках отображаются ниже поля в стиле подсказки. Подсказка исчезает при наведении на неё или при фокусе в поле, к которому эта подсказка относится.

Плавающий стиль для нужного поля

Чтобы задать плавающий стиль определенному полю, нужно обернуть его в блок с классом use-floating-validation-tip:

Плавающий стиль для всех полей

Чтобы не оборачивать каждое поле в блок с классом use-floating-validation-tip , можно "попросить" плагин сделать это за нас, указав в шорткоде формы атрибут html_class со значением use-floating-validation-tip:

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

Менеджер длинных листов с Listo

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

Например:

Управлять такой "колбасой" сложно и вероятность допустить ошибку высока.

Для решения такой нелепицы есть плагин Listo , который предоставляет следующие списки:

• Страны - data:countries , data:countries.olympic
• Структурные подразделения США - data:us_subdivisions.states , data:us_subdivisions.districts
• Валюты - data:currencies
• Временные зоны

Contact Form 7 умеет работать с Listo (или наоборот этого никто не знает), который в свою очередь работает с полями: выпадающий список, чекбоксы и радио-кнопки. Благодаря такой связке не придётся болезненно редактировать длинные списки, а можно будет использовать короткие предопределенные параметры.

Как управлять параметрами длинного списка

К примеру, мы решили вывести список стран, для этого понадобится тег выпадающего списка :

Список пока пустой, мы не передали никаких параметров. Добавим их:

Всего один параметр и мы стали веганами - никакой "колбасы" с перечислением стран - за нас это сделал Listo.

Дополнительные настройки

Каждой форме можно указать доп. параметры во вкладке "Дополнительные настройки". Рассмотрим все такие настройки:

Режим "Только для подписчиков"

Subscribers_only: true

Данный режим (доступен с CF7 v7 4.9) позволяет отобразить форму только для зарегистрированных пользователей. Незарегистрированные пользователи увидят сообщение "Эта форма доступна только для зарегистрированных пользователей." и, соответственно, не смогут заполнить и отправить форму. Отличный способ избавиться от спама, если вам нужно принимать письма только от авторизованных пользователей.

Демо режим

Demo_mode: on

При использовании этого кода форма перейдёт в демонстрационной режим. В этом режиме контактная форма пропустит процесс отправки почты и просто отобразит «завершено успешно» в качестве ответного сообщения.

Пропустить письмо

Skip_mail: on

Параметр skip_mail работает почти так же, как demo_mode , но skip_mail пропускает только отправку сообщений. В отличие от demo_mode, skip_mail не влияет на другие действия, такие как сохранение сообщений с помощью Flamingo.

Принудительная проверка полей

Acceptance_as_validation: on

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

Запрет сохранения сообщений

Do_not_store: true

Этот параметр сообщает модулям хранения сообщений, таким как Flamingo , чтобы те не сохраняли сообщения через эту форму контакта.

Выполнение JavaScript кода

Этот функционал пригодится, когда нужно отслеживать поведение пользователей. К этим хукам можно прикрепить отслеживание через Google Analytics или другие системы статистики (об этом говорится выше).

on_sent_ok: "alert("sent ok");" on_submit: "alert("submit");" on_sent_ok переданный JavaScript будет выполнен после успешной отправки формы. on_submit переданный JavaScript будет выполнен при нажатии на кнопку "Отправить". Скрытие формы Contact Form 7 после успешной отправки сообщения

У нас есть настроенная и рабочая форма. И нужно, чтобы когда пользователь нажимает на кнопку "Отправить" и нам уходит письмо, форма пропадала, а на её месте появлялся текст "Отправлено!".

Делается это просто: для этого в дополнительных настройках плагина добавьте такую строку:

Document.addEventListener("wpcf7mailsent", function(event) { jQuery("#contactform").hide(); }, false);

где contactform - это ID формы которую нужно скрыть. Вместо #contactform можно указать другой селектор HTML элемента (формы), который нужно скрыть.

Как в теге select объединить похожие option в отдельные группы? Данный функционал может обеспечить html тег optgroup, но по умолчанию плагин Contact Form 7 это не умеет. Рассмотрим способы решения этой нестандартной для плагина задачи.

Способ 1 с использованием JavaScript

Данный способ подсмотрен на codepen.io и немного переработан. Суть способа в том, что JavaScript "считывает структуру тега select и преобразовывает в нужный формат. В примере будет рассмотрено поле для выбора движка:

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

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

Добавляем JavaScript

JQuery(document).ready(function($){ var selectEngines = $("select"); var foundin = $("option:contains("optgroup-")", selectEngines); $.each(foundin, function(value){ var updated = $(this).val().replace("optgroup-",""); $(this).nextUntil("option:contains("endoptgroup")").wrapAll(""); }); $("option:contains("optgroup-"), option:contains("endoptgroup")", selectEngines).remove(); });

Данный код реализован на jQuery. Вставлять его следует в js файл темы или создать новый js и подключить . Так как имя тега было engines , то в этом коде указываем именно его, то есть select .

Оригинальный html код поля select

optgroup-Бесплатные движки Wordpress Joomla! Drupal Grav endoptgroup optgroup-Платные движки 1С-Битрикс DLE (DataLife Engine) UMI.CMS NetCat ImageCMS Shop endoptgroup

Обработанный html код поля select

Wordpress Joomla! Drupal Grav 1С-Битрикс DLE (DataLife Engine) UMI.CMS NetCat ImageCMS Shop

Если у пользователя отключен JavaScript , то поле будет отображать все option. То есть даже те option, что должны были быть преобразованы в тег optgroup, станут видны как обычные option.

В этом материале будет детально описана настройка Contact Form 7 - плагина для такой популярной платформы по созданию и продвижению сайтов в Глобальной паутине, как «Вордпресс». Этот программный инструмент позволяет создавать и конфигурировать формы обратной связи.

Немножко о «Вордпрессе»

Одним из наиболее популярных и самых распространенных инструментов для разработки и наполнения информационных ресурсов является «Вордпресс». Изначально этот программный продукт был ориентирован на создание простеньких блогов. Но затем профильные специалисты дополнили его функционал, что позволило создавать с помощью этой системы управления контентом уже и другие интернет-ресурсы.

Сильные и слабые стороны данной платформы по созданию и продвижению сайтов

Плюсы этой программной платформы такие:

Простота и открытость исходных кодов.

Внушительное количество справочной информации.

Возможность разработки любого по степени сложности тематического ресурса в интернете за кратчайшие сроки.

Высокое быстродействие без дополнительных программных надстроек (плагинов).

А вот недостатки в этом случае следующие:

Сайты, созданные на основе «Вордпресс», не справятся с большой нагрузкой.

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

и зачем они нужны сайтам на базе платформы «Вордпресс»

Базовый функционал такой системы управления контентом, как «Вордпресс», весьма скромный. Его лишь достаточно для разработки наиболее простых блогов и сайтов. Чтобы хоть как-то улучшить ситуацию с функциональностью программной платформы и добавить ей гибкости, разработчикам приходиться доустанавливать специальные мини-программы, которые на профессиональном жаргоне называются плагинами. Одной из таких и является Contact Form 7. Настройка плагина позволяет на определенной странице системы управления контентом создать форму обратной связи с расширенным уровнем функциональности.

Специализация «Контакт форм 7»

Как было отмечено ранее, создание обратной связи между посетителем и администратором интернет-ресурса на базе платформы «Вордпресс» - это основная задача Contact Form 7. Настройка почты, редактирование шаблона, пересылка различных файлов — это далеко не полный перечень тех возможностей, которые предоставляет эта мини-программа. При этом нагрузка на аппаратные ресурсы сайта будет относительно небольшой и ее наличие не приведет к существенному снижению быстродействия сайта или блога.

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

Существует три способа установки плагинов на платформе «Вордпресс»:

Путем скачивания ZIP-архива из глобальной паутины и «заливки» его в соответствующий каталог интернет-ресурса.

С использованием различного рода FTP-клиентов.

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

Заходим в административную панель «Вордпресса».

Затем необходимо переместиться в раздел «Плагины».

В открывшемся окне выбираем пункт «Добавить новый».

В строке поиска вводим название плагина - Contact Form 7 - и после этого наводим указатель мышки на кнопку «Поиск» и делаем однократный клик. После этого начнется операция поиска необходимого программного обеспечения.

По ее окончании высветится список найденных плагинов. В этом списке находим тот, который нам нужен, и кликаем по кнопке с надписью «Установить», которая расположена напротив него.

После этого система управления контентом автоматически загрузить и установит этот плагин.

На следующем этапе необходимо активировать инсталлированного программное обеспечение. Для этого переходим на вкладку «Плагины» и в списке находим Contact Form7. Рядом с ним находится надпись: «Активировать», по ней и кликаем один раз мышкой.

Обновляем административную панель системы управления контентом и находим среди ее пунктов Contact Form7. Это и есть условие успешной инсталляции этого популярного и функционального плагина.



Алгоритм настройки «Контакт форм 7»

Настройка Contact Form 7 состоит из таких пунктов:

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

На следующем этапе выбираем язык формы и задаем ее название.

Затем нужно, при необходимости, переконфигурировать ее шаблон.

Сохраняем внесенные изменения.

Создаем новую страницу с полученным ранее кодом.

На завершающем этапе необходимо перейти на сайт и проверить корректную работу созданного элемента интерфейса интернет-ресурса.

Создаем новую форму

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

Заходим в меню этого плагина и выбираем пункт «Формы».

В окне, которое откроется после этого, необходимо поставить флажок напротив пункта «Контактная форма1».

Затем сверху над ней, в выпадающем списке «Действия», выбираем пункт «Удалить».

В ответ появится вопрос на подтверждение выполняемых действий. Необходимо подтвердить удаление формы и кликнуть мышкой на кнопке «Да».

На следующем выбираем пункт меню: «Создать новую» в административной панели «Вордпресс» «Contact Form7».

В открывшемся окне в выпадающем списке выбираем язык интерфейса будущей формы - «русский». После жмем кнопку «Создать».

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

Задаем название формы

После выполнения всех ранее приведенных действий появиться окно ввода названия новой формы в Contact Form 7 Style. Настройкаэтого именно и начинается с этой несложной операции с одной стороны. Но название формы лучше давать исходя из поисковой оптимизации. Поэтому наиболее оптимальным будет в этом случае, например, «Форма обратной связи» или «Задаем вопрос администратору сайта». Как только определились с названием этого элемента интерфейса, набираем его в соответствующем поле окна запроса.



Редактируем шаблон «Контакт форм 7»

В этом же самом окне с названием созданной формы есть 4 вкладки. Первая из них — «Шаблон». По умолчанию здесь сформировано лишь 5 элементов:

Место набора имени посетителя интернет-ресурса.

Поле набора адреса электронного почтового ящика посетителя, задавшего вопрос.

Еще одно поле позволяет набрать тему вопроса.

Последний элемент формы по умолчанию — это кнопка с надписью «Отправить».

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

Настройка длины полей и не только

В этом же самом месте можно изменить ввода в Contact Form 7. Настройка ширины любого текстового поля выполняется следующим образом:

Например, необходимо увеличить до 55 количество символов в имени посетителя интернет-ресурса. По умолчанию их 40.

Для этого в коде в конце добавляем цифры 60/55. В результате будет получен код . После сохранения внесенных изменений длина этого поля будет равна 60, а максимальное количество символов, которое в нем можно набрать — 55.

Аналогичным образом можно изменить размеры текстового поля сообщения. Только в этом случае необходим изменить код данного элемента следующим образом . В этом случае 40 — это количество букв в одной строке, а 30 — общее количество срок в этом элементе интерфейса в Contact Form 7. Настройка внешнего вида самой же формы осуществляется именно путем подбора значений параметров каждого отдельно взятого элемента. Поэтому рекомендуется в коде каждого элемента указывать конкретные значения каждого приведенного в этом разделе параметра.



Остальные вкладки формы

Как было отмечено, первая вкладка носит название «Шаблон формы». Следующая за ней в этом окне - «Письмо». В ней задаются параметры того места, в которое будет отправлять почта с этого интернет-ресурса. На вкладке «Уведомление» формируется текст сообщения, которое будет выводиться в случае успешной отправки письма. Тут же есть также возможность заготовить сообщение и на тот случай, если не получится связаться с администратором сайта с помощью средств. Последняя вкладка в Contact Form 7 - «Дополнительные настройки». В ней находятся те параметры, которые на практике используются весьма и весьма редко. Например, можно с ее помощью настроить отслеживание введенного пользователем текста средствами «Яндекс» - метрики.

Поля, которые можно добавить с помощью этого плагина в эту форму

Настройка Contact Form 7 для Wordpress позволяет добавить такие элементы интерфейса на форму обратной связи:

• Тестовое поле — универсальный элемент интерфейса, в который можно ввести любой набор символов.

  E-Mail - место ввода названия электронного почтового ящика.

  URL - поле набора адреса интернет-странички.

  Номер телефона — позволяет ввести номер телефона в международном формате.

  Элемент «Число (spinbox)» позволяет создать поле ввода любого целочисленного значения (например, возраста посетителя).

  Элемент «Число (Slider)» добавляет на форму ползунок, с помощью которого можно будет выбрать числовое значение из заданного диапазона.

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

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

  Следующий пункт - «Выпадающее меню» - позволяет из фиксированного списка выбрать необходимый параметр.

  А вот «CheckBoxes» предназначен для выбора одного или нескольких значений из заданного списка.

  Элемент интерфейса «Radio Buttons» практически идентичен предыдущему. Разница лишь в том, что в этом случае можно выбрать лишь один правильный вариант, в то время как «CheckBoxes» может иметь несколько правильных значений.

  Пункт «Acceptance» позволяет добавить всего один флажок на создаваемую форму. Как правило, он используется для ознакомления с какими - либо условиями и без их принятия в дальнейшем не будет возможна отправка электронного письма.

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

  Второй вариант защиты — это «CAPTCHA». При его выборе на форме добавиться отдельный раздел, в котором будет отображаться картинка с символами и дополнительное поле для их ввода.

  Следующий пункт - «Отправка файла». Позволяет добавить к тексту письма файл с различного рода пояснениями и комментариями для администратора ресурса.

  Последний пункт - «Кнопка отправки» - позволяет добавить соответствующий элемент интерфейса.

Сохраняем внесенные изменения

После того как необходимые значения заданы, а форма должны образом сконфигурирована, необходимо все это сохранить. Для этого в окне редактирования плагина подымаемся в его верхнюю часть. Здесь должна быть кнопка «Сохранить». Наводим указатель манипулятора на нее и делаем однократное нажатие на ней. В ответ появится код формы, который выделяем с помощью все того же указателя мышки и копируем. Далее перемещаемся в административной панели системы управления контентом в пункт «Страницы». Затем создаем новую страницу с необходимым названием (например, «обратная связь», «Контакты» или «Задать вопрос администратору ресурса»). Потом переводим курсор набора в поле ввода ее кода. При этом необходимо перевести режим набора кода в «Текст» на панели параметров. После этого вставляем ранее полученный код формы. Далее в правой части интерфейса находим кнопку «Опубликовать» и наводим на нее мышку. На следующем этапе совершаем однократное нажатие левой кнопки мышки на этом элементе интерфейса системы управления контентом.



Проверяем полученный результат

После выполнения ранее указанных манипуляций в интерфейс интернет-ресурса должна добавиться новая страница, на которой и будут отображены элементы, заданные в Contact Form 7. Настройка интерфейса, в принципе, на этом закончена. Необходимо лишь проверить правильность настройки программного обеспечения. Для этого необходимо перейти на главную страницу сайта, блога или портала. Затем в списке страниц находим ту, на которой и была размещена форма обратной связи. Переходим на нее, вводим во все поля сразу правильные параметры и отправляем себе на почту тестовое письмо. В ответ должно появиться информационное сообщение об успешном выполнении данной операции. Затем с пустыми полями пытаемся отправить еще одно письмо. После этого должно появиться сообщение о том, что необходимо задать все отмеченные параметры формы. Если в обоих случаях были получены результаты, указанные ранее, то созданная форма обратной связи функционирует корректно.

Плюсы и минусы плагина. Альтернативные варианты

Отличным решением для начинающего разработчика по созданию формы обратной связи является мини-программа Contact Form 7. Настройка отправки почты, создание элементов интерфейса и прочих важных элементов интерфейса в этом случае большей частью автоматизировано и требует минимальных знаний пользователя. Поэтому для простенького интернет-ресурса начального уровня и с начинающим администратором — это отличное решение. Но ведь любой плагин — это дополнительная нагрузка на ресурсы интернет-странички, которая снижает быстродействие. Как результат, более продвинутые пользователи рекомендуют уходить от такого простого способа создания формы обратной связи. Ее также можно и самостоятельно создать с помощью HTML, CSS и JS, пусть и с меньшим уровнем функциональности. При этом снизится потребность в вычислительных ресурсах сайта и существенно повысится уровень быстродействия.



Итоги

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

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

И сегодня рассмотрим плагин Contact Form 7 Style , который предназначен для того, чтобы визуально создавать стили для Contact Form 7. Изначально, кроме своего оформления, у плагина есть готовые стили формы в виде шаблонов. Где вы просто выбираете вариант шаблона и ставите галочку какой форме, созданной вами ранее, применить это оформление. Давайте разберем это на деле.

Настройка плагина Contact Form 7 Style

Пропускаем часть объяснения и создание форм, так как тема обзора направлена именно на стилизацию формы. Для этого, как говорилось выше, мы воспользуемся специальным плагином. После его установки в боковой панели добавится раздел «Contact Styles » с пяти подразделами.

В первом разделе «All Styles » находится уже готовые шаблоны стилей формы, и тут же будут сохраняться стили созданными вами. При наведении курсора мыши на один из шаблонов, появляются дополнительные кнопки управления: Изменить, Свойства, Удалить. При нажатии на кнопку «Свойства» отобразится все доступные формы связи имеющиеся на вашем сайте. Где нужно только поставить галочку напротив нужной формы и сохранить изменения.

В разделе «Add New » можно самостоятельно сделать шаблон для формы со своими стилями, как это показано выше на видео. Переключаясь между элементами формы и визуально оформлять все поля как в нормальном состоянии, так и в hover эффекте.