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

После того как импортируете формы не забудьте заменить на вкладке формы «Письмо» в поле «Кому» [email protected] на ваш Email, в поле «От кого» место [email protected] укажите адрес с Email с Вашего домена. Так же замените на Ваш полный путь к логотипу, то есть как пример укажите:

Файл экспорта импортируем обычным способом WordPress:

CSS Стили:

/*//////////////////////////////*/ /* Contact Form 7 */ /*//////////////////////////////*/ div.wpcf7-response-output { margin-top: -30px; } span.wpcf7-not-valid-tip { margin-top: -14px; margin-bottom: -10px; text-align: center; } span.wpcf7-not-valid-tip { color: #a01414; font-size: 1em; /* font-weight: normal; */ display: block; font-weight: 700 !IMPORTANT; } @media screen and (max-width:768px){ span.wpcf7-not-valid-tip { margin-bottom: 15px; } input.wpcf7-form-control.wpcf7-text { max-height: 30px; } } /* Loader */ /* div.wpcf7 .ajax-loader { margin-left: auto; vertical-align: middle; margin-right: auto; position: inherit; padding-right: 51%; background-repeat: no-repeat; background-position-x: right; margin-top: -31px; } */ /* Стили блоков с ошибкой ввода, для форм которые расположены на затемненном бекграунде: */ .wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors { color: aliceblue; font-weight: 800; } span.wpcf7-not-valid-tip { font-weight: 900; background-color: antiquewhite; } textarea { height:150px !Important; } /* Скрытие бульонов в эрор алерете */ .screen-reader-response ul { display: none; } .wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok { display: none !important; } .wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors { display: none !important; } /*Сообщение о ошибке - белые буквы*/ .screen-reader-response { color: white; margin-bottom: 10px; } /* Сообщение об ошибке - отступ нижнего сообщения */ /* span.wpcf7-form-control-wrap.textarea-102 span.wpcf7-not-valid-tip { margin-top: -30px; } */ /* Сообщение об ошибке - отступ нижнего сообщения */ .wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors { margin-top: -60px; } /*Оформление текста в INPUT*/ input.wpcf7-form-control, textarea#TextareaJA, input.wpcf7-form-control.wpcf7-submit { font-family: "Open Sans"; font-size: 15px; /* font-size: 20px; */ line-height: 30px; font-weight: 700; } } /*Оформление кнопки отправки*/ input.wpcf7-form-control.wpcf7-submit { margin-top: -15px; } /*//////////////////////////////*/ /*Contact Form 7 END*/ /*//////////////////////////////*/ /* N E W 2018-06-04*/ /* Стили при вставке курсора для обводки инпутов */ form.wpcf7-form input:focus, form.wpcf7-form textarea:focus, form.wpcf7-form input:focus { border-color: #709242; } /* Центруем прилоадер шагрузки ContactForm7 */ span.ajax-loader { margin-left: auto !important; margin-right: auto !important; float: inherit !important; width: 15px !important; display: block !important; margin-top: 10px !important; margin-bottom: -15px !important; } /* Google ReCapcha - центруем */ .wpcf7-form-control-wrap { width: 100%; } .wpcf7-form-control.g-recaptcha.wpcf7-recaptcha { margin-top: -28px; margin-left: auto; margin-right: auto; /* margin-right: 21px; */ width: 300px; } div#recapcha-popups .wpcf7-form-control-wrap { padding-top: 25px; margin-left: -11px; padding-bottom: 38px; } /* Плейсхолдеры - центруем */ span.wpcf7-form-control-wrap input#Email, span.wpcf7-form-control-wrap input#PhoneJA, input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required { text-align: center; } /* Делаем красивой кнопку отправки */ input.wpcf7-form-control.wpcf7-submit { color: #ffffff; background: #5a8f2b; font-weight: 600; border: 2px dashed #ffffff; margin-top: -25px; font-family: FuturaDemiC !Important; padding: 10px 30px; color: #fff; border-radius: 0px; position: relative; /* background: #42BCE2; */ transition: all .3s ease 0s; } input.wpcf7-form-control.wpcf7-submit:hover { background: #ffffff; color: #5a8f2b; /* color: #5a8f2b; */ border: 2px dashed #5a8f2b; } /* Выравниваем по центру плейсхолдер текстового поля,оставляя выравнивание по правому краю при печати текста */ textarea#TextareaJA::-webkit-input-placeholder { text-align: center; } textarea#TextareaJA:-moz-placeholder { /* Firefox 18- */ text-align: center; } textarea#TextareaJA::-moz-placeholder { /* Firefox 19+ */ text-align: center; } textarea#TextareaJA:-ms-input-placeholder { text-align: center; }

Полезности:

Заполнение вкладки Email письма:
Если Вам необходимы дополнительные теги для использования в письме, вы всегда можете их узнать здесь.

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

Скриншоты

Установка

1. Upload the entire contact-form-7-style folder to the /wp-content/plugins/ directory
2. Make sure that Contact Form 7 is installed and activated (an admin notice will check for this)
3. 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

В своих wordpress проектах я очень часто использую плагин contact form 7 . Он очень удобный, гибкий и обладает множеством плюсов, однако как и в большинстве бесплатных плагинов в нем есть свои «болезни». И одна из них — малое количество хуков и, как следствие трудная настройка contact form 7 полей, элементов ит.п. Поэтому далее я распишу как можно изменить внешний вид сообщений в contact form 7 при отправке формы …

Отключаем стандартные contact form 7 стили

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

Для этого, в файле functions.php добавляем следующий код:

Удаляем все стили

add_filter("wpcf7_load_css", "__return_false");

add_filter ("wpcf7_load_css" , "__return_false" ) ;

Теперь, когда старые стили удалены, можно сверстать/взять новые css стили сообщений (например ) и прикрутить их к contact form 7. Для примера, я уже имею свои готовые стили alert-ов и буду использовать их:

Отключение скриптов

Возвращаемся в functions.php файл и добавляем следующий код:

Регистрируем новый скрипт cf7

if (! function_exists("wpcf7_do_enqueue_scripts")) { function wpcf7_do_enqueue_scripts() { if (wpcf7_load_js()) { $in_footer = true; if ("header" === wpcf7_load_js()) { $in_footer = false; } wp_enqueue_script("contact-form-7", get_theme_file_uri("NEW_PATH"), array("jquery"), WPCF7_VERSION, $in_footer); } } add_action("wp_enqueue_scripts", "wpcf7_do_enqueue_scripts", 9); }

if (! function_exists ("wpcf7_do_enqueue_scripts" ) ) { function wpcf7_do_enqueue_scripts () { if (wpcf7_load_js () ) { $in_footer = true ; if ("header" === wpcf7_load_js () ) { $in_footer = false ; wp_enqueue_script ("contact-form-7" , get_theme_file_uri ("NEW_PATH" ) , array ("jquery" ) , WPCF7_VERSION , $in_footer ) ; add_action ("wp_enqueue_scripts" , "wpcf7_do_enqueue_scripts" , 9 ) ;

В коде выше, мы перезаписываем нативный скрипт contact form плагина на наш и подключаем его через функцию wp_enqueue_script . Кстати, если вы начинающий (или нет) разработчик и хотите узнать больше о встроенных функция в WordPress, то возможно вам будет интересна .

NEW_PATH — путь до нового js файла в теме, который нужно скопировать из wp-content/plugins/contact-form-7/includes/js/scripts.js

Зачем подключать новый скрипт?

Все просто. При отправке формы, сообщения/их статус «подтягиваются» через AJAX, т.е грубо говоря contact form после submit возвращает какой-то кусок html кода, который каждый раз перезаписывается, и естественно отслеживать постоянно на триггерах, когда обновится форма — неправильно. Можно конечно динамически отслеживать DOM через MutationObserver , но и он имеет свои определенные недостатки. Гораздо проще перезаписать главный скрипт cf7 плагина и уже внутри изменить js код под свои нужды.

Меняем внешний вид

Далее осталось только открыть скопированный js файл и внести нужные изменения. В моем случае, необходимо только добавлять/удалять классы для сообщений в зависимости от статуса — spam / mail_sent / mail_failed и т.д. Для этого в методе var ajaxSuccess = function(data, status, xhr, $form) { в case выборке просто манипулируем нужными классами. В итоге при отправке формы, получаем красивые стилизованные сообщения:

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

Согласитесь, не очень выразительно. Но её вид можно легко поправить.

Если вы умеетe изменять/добавлять стили CSS, вероятно, вы захотите начать со стилизации полей .

Wpcf7 input, .wpcf7 input, .wpcf7 textarea { /* здесь стили: цвет, фон, шрифт, размер, границы и др. */ }

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

Wpcf7 { /* здесь стили: цвет, фон, шрифт, размер, границы и др. */ }

Как задать стиль только для конкретного поля? Предположим, вы хотите изменить стили для необязательного поля ‘Тема ‘, которое присутствует в форме по умолчанию после активации плагина.

Всего лишь нужно добавить ID для нужного поля в шаблоне формы.

Тема [ text your-subject id:fb-subject ]

После чего можно прописывать свои стили CSS.

#fb-subject { /* здесь стили: цвет, фон, шрифт, размер, границы и др. */ }

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

Вот еще плагин Form Styles For Contact Form 7 с простыми, но симпатичными предустановленными стилями .

Простая и чистая форма контактов — Contact Form Clean and Simple — с разметкой Bootstrap, Google капчей и спам-фильтрами . Кстати, обратите внимание, довольно популярный плагин.

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

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

В этом материале будет детально описана настройка 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. Настройка плагина в этом случае точно не понадобится.