По причине того, что плагин Contact Form 7 очень широко используется пользователями WordPress, возникла необходимость написать подробное руководство по нему. В данной статье рассматриваются настройки Contact Form 7, методы внедрения и ответы на часто задаваемые вопросы по использованию плагина.
Для того чтобы добавить форму Contact Form 7в нужное место, нужно скопировать код вставки на участок страницы или поста. Делается это очень просто:
Каждая контактная форма имеет свой собственный короткий тег, такой как [ contact-form-7 id="71" title="Контактная форма 1"] . Чтобы вставить контактную форму в свой пост, скопируйте шорткод и вставьте его в содержание поста.
Если ваша форма не отображается и выдает ошибку contact-form-7 404 «Not Found»
Код является признаком того, что контактная форма заданная шорткодом, не может быть найдена. Убедитесь, что вы используете правильный код вставки. Попробуйте повторить вставку скопировав нужный код еще раз.
Как добавить или отредактировать поле для изменения внешнего вида формы Contact Form 7?
Чтобы добавить поле, добавить тег к форме текстового поля, полностью изменить или отредактировать форму нужно зайти в настройки и задать нужные вам параметры.
Каждый тег имеет строгий синтаксис, поддерживая несколько вариантов. Изучение синтаксиса может быть трудно, но вы можете легко сделать пользовательский тег с помощью генератора тегов вместо этого. Нажмите кнопку тега и после форматирования нажимайте «Создать Тэг».
Так же вы можете ознакомиться с тем в отдельной статье.
Внутренние настройки формы Contact Form 7.
В каждой форме доступны такие настройки:
- Настройка шаблона формы;
- Письмо;
- Уведомления при отправки формы.
В этих пунктах настроек вы может провести необходимы манипуляции с тегами формы ввода, настроить форму письма, которое будет получать пользователь, настройки уведомления при отправке писем.
Произведя все внутренние настройки Contact Form 7 вы получите отредактированный код для вставки, который будет внедрен вами в нужную область на сайте.
Как указать или изменить тему сообщения?
Просто измените поле «Тема» поле в разделе «Письмо». Для этого зайдите в нужное меню настроек и измените стандартный тег на свое название.
Как установить автоответчик к форме Contact Form 7?
Для того что бы установить автоответчик, который будет срабатывать после того как было успешно отправлено первое письмо нужно перейти в раздел «Письмо, опустится вниз настройки и поставить галочку возле «Письмо 2». После появления формы, настроить по нужным вам критериям, по аналогии с «Письмо 1».
Почта, которая приходит через контактную форму плагина Contact Form 7 показывает «WordPress», как имя отправителя. Как изменить это?
Адрес отправителя состоит из адреса электронной почты отправителя и дополнительного имени отправителя. WordPress присваивает «WordPress» в качестве имени отправителя, если параметр не отформатирован. Если вы хотите использовать другое имя, чтобы «WordPress» больше не появляется в качестве имени отправителя, вы должны явно указать имя отправителя в поле «От:» поле в разделе «письмо»:
Можно ли размещать контактную форму вне поста?
Да. Вы можете разместить контактную форму в текстовый виджет. мы уже рассматривали. Все что вам будет нужно, это создать виджет и поместить в него шорткод нужной вам формы.
Как вставлять контактную форму в файле шаблона?
Вы можете вставлять шорткод непосредственно в тему шаблона, для этого будет нужно воспользоваться функцией do_shortcode(). Это можно сделать с помощью такой строки:
Сообщение об ошибке «Не удалось отправить сообщение». Contact Form не отправляет письма. Что не так?
Причин для такого сообщения обычно может быть несколько:
- Первой актуальной причиной может быть почтовый сервер, с запретом на отправку почтовой формы. В этом случае сообщение об ошибке будет окружено красной линией. Свяжитесь с администратором сервера для решения.
- Второй возможной причиной является то, что форма отправки находится под подозрением спама. В этом случае сообщение об ошибке будет окружено оранжевой линией.
Сообщение ответа «Ваше сообщение было успешно отправлено», но письмо не доходит.
Если показано сообщение в зеленой окантовка это означает, что функция PHP для отправки почты, безусловно, успешно завершена. Так что, если вы не можете получить почту, то весьма возможно, что почта была похищена или удалена.
Если вы можете проверить журнал вашего почтового сервера, это может дать вам некоторые подсказки.Спам-фильтр часто вызывает проблемы такого рода.
Контактная форма перенаправляет на страницу ошибки 404 после отправки.
Эта проблема вызвана сочетанием двух ошибок конфигурации. Во-первых, AJAX JavaScript не работает на вашей контактной форме. Из-за этой проблемы, ваша контактная форма вынуждена перенаправлять после отправки. Во-вторых, ваша контактная форма использует недоступные слова в названиях полей ввода. Этот вопрос смущает WordPress, в результате чего появляются 404 («Not Found») ошибки.
Контактная форма ведет себя странно в некоторых браузерах.
Это может быть вызвано из-за неверного HTML, CSS, Javascript. Пожалуйста, проверьте Вашу страницу формы с валидаторов или инструментов отладки.
Полезные инструменты:
- Firebug — расширение Firefox. Хорошо для отладки JavaScript.
- W3C Markup Validation Service — служба проверки HTML.
- W3C CSS Validation Service — служба проверки CSS.
Как использовать контактную форму на нужном языке, а не на английском.
Contact Form 7 была переведена на многие языки. Смотрите, если имеется файл конфигурации языка для вашего сайта тогда и плагин Contact Form 7 будет использовать этот язык.
Contact Form 7 устанавливает параметр языка WordPress. После того, как вы измените языковые настройки WordPress, Contact Form 7 также изменяется.
CAPTCHA не работает, изображение не появляется.
Чтобы использовать CAPTCHA, нужно что бы GD и FreeType библиотеки были установлены на вашем сервере. Кроме того, убедитесь, что временная папка для CAPTCHA установлена с правами для записи.
Поле ввода текста для CAPTCHA работает на Internet Explorer, но не в Firefox. Невозможно ввести код.
Это хорошо известная проблема вызванная злоупотреблением тега
Enter the code:
[ captchac your - captcha ] < strong > & lt ; label & gt ; < / strong > Enter the code : [ captchar your - captcha ] < strong > & lt ; / label & gt ; < / strong > |
Это не будет работать правильно:
Enter the code:
Практически на любом сайте должна присутствовать обратная связь, позволяющая читателям блога или клиентам компании обратиться напрямую к их владельцам. Это один из самых удобных способов взаимодействия с посетителями. Но, некоторые владельцы сайтов на WordPress до сих пор ограничиваются простым размещением почтового адреса для связи, поскольку в этой системе управления контентом нет встроенной функции создания контактных форм. Такой подход может привлечь огромное количество интернет-ботов, которые буквально завалят почтовый ящик спамом.
Чтобы избежать подобных проблем, можно реализовать функцию обратной связи на WordPress с помощью специального плагина. Их достаточно много в каталоге WordPress, но одним из лучших считается Contact Form 7.
Это полностью бесплатный плагин, который существует лишь на добровольные пожертвования пользователей. Несмотря на это, он сильно выделяется среди подобных решений, поскольку обладает очень широкими возможностями.
Основные возможности плагина
- Тонкая настройка под любые потребности пользователя;
- Простой интерфейс и понятные опции;
- Удобный просмотр электронной почты;
- Поддержка множества языков, включая русский;
- Надежная защита от спама текстовым вопросом или капчей;
- Поддержка Ajax запросов;
- Настройка внешнего вида через CSS стили;
- Полезная документация, отвечающая на многие вопросы.
Использование плагина
После того, как вы установите Contact Form 7 на WordPress, у вас может возникнуть множество вопросов по его использованию. На самом деле, разобраться в нем не так уж сложно, тем более, что не все функции будут нужны на начальном этапе. В любом случае, новичкам потребуется некоторое количество времени на изучение основных опций, пусть и не очень большое.
Первое, что вы заметите после активации плагина, это появление нового пункта в административной панели WordPress под названием «Contact Form 7», где осуществляется вся настройка плагина. В качестве альтернативы, вы можете зайти туда через список установленных плагинов, найдя Contact Form 7 и нажав «Setting».
После того, как вы откроете главное окно Contact Form 7, вы увидите сообщение, отображающее различные ссылки помощи. Не спешите закрывать это сообщение, так как оно содержит ссылки на важные советы и инструкции. Например, неплохо было бы ознакомиться с основной инструкцией по работе с плагином, со страницей посвященной работе с тегами, с кратким описанием административного интерфейса, а также с тем, как осуществляется настройка писем. Вам не обязательно запоминать все эти материалы, но желательно держать ссылки на них под рукой, чтобы быстро решать возникающие проблемы.
Сознание новой формы
Для того, чтобы приступить к созданию новой контактной формы, нужно нажать кнопку «Добавить новую». Перед вами откроется окно, в котором, первым делом, нужно дать ей название. Ниже, вы увидите содержание текущего шаблона, в нем уже будет вставлено несколько тегов, чтобы дать вам общее представление о том, как это должно выглядеть. Вы можете использовать любые другие теги, такие как:
- Текстовое поле, адрес электронной почты (text, email);
- Ссылка (url);
- Номер телефона, диапазон чисел, дата (tel, number, date);
- Текстовое поле в несколько строк (textarea);
- Флажки, переключатели и выпадающее меню (checkbox, radio, select);
- Проверка капчей (captchac и captchar);
- Проверка контрольным вопросом (quiz);
- Флажок согласия (acceptance);
- Прикрепление файлов (file);
- Кнопка отправки (submit).
Кроме того, для каждого из них можно задать определенные параметры, например, сделать поле обязательным для заполнения, указать значение по умолчанию, а также добавить идентификатор или класс для того, чтобы воспользоваться им при оформлении через CSS стили.
В качестве примера, можно добавить к готовому шаблону такие поля, как: никнейм, номер телефона, текстовый вопрос для защиты от спама. Это будет самая простая форма отправки сообщения администратору сайта. Для ее создания понадобятся теги (text, tel, quiz).
Сперва добавим новое поле для никнейма автора сообщения, с именем «Ваш никнейм», как написано в других готовых полях (можно просто скопировать). Теперь, в разделе «Шаблон формы» выбираем «text» и задаем нужные параметры. Например, можно сделать обязательное заполнение, поставив галочку на «Required field». В качестве альтернативы, можно сделать это поле обязательным для заполнения просто добавив звездочку (text*).
Имя поля можно оставить по умолчанию или задать любое другое, например, «your-nickname». Чтобы поле имело содержание по умолчанию, которое поможет пользователю сориенироваться быстрее, нужно добавить его в строчку «Значение по умолчанию». Если поставить галочку на «Use this text as the placeholder of the field», то это содержание будет исчезать при нажатии. Далее, можно задать атрибуты «ID» или «Class», чтобы использовать их для оформления поля через CSS стили. Теперь остается только нажать «Insert Tag», и сгенерированный тег появится в содержимом. Он должен выглядеть так:
Ваш никнейм
(text your-nickname id: your-nickname placeholder "Никнейм")
Аналогичные действия нужно провести и при добавления остальных полей (tel, quiz). Только, в случае с вопросом для защиты от спама (quiz), нужно будет написать вопрос и ответ одной строкой, через разделитель «|». Это должно выглядеть примерно так (Сколько будет 2+3?|5). Обратите внимание, что очередность тегов в содержании шаблона определяет расположение полей на сайте.
Теперь, остается только нажать кнопку «Сохранить», после чего, наверху появится сгенерированный шорткод для вставки в пост, страницу, или текстовый виджет. Если все сделано правильно, то готовая форма отобразиться на вашем сайте WordPress там, где вы вставили этот шорткод.
Настройка адресата и содержания писем
В Contact Form 7 для WordPress доступна настройка шаблона писем, которые будут отправляться администратору. Для того, чтобы ее осуществить, нужно перейти во вкладку с соответствующим названием. Здесь вы увидите несколько строк для заполнения:
- «To» – адрес почтового ящика администратора;
- «From» – имя отправителя;
- «Тема» – тема письма;
- Additional Headers – дополнительные заголовки;
- Message Body – содержимое письма;
- Прикрепленные файлы.
Некоторые из них уже заполнены данными по умолчанию, но вы можете изменить их под свои нужны. Например, можно добавить телефон отправителя, скопировав название соответствующего тега из шаблона формы. Не забывайте нажать «Сохранить» после внесения изменений.
Настройка уведомлений при отправке
Любой посетитель может делать ошибки в некоторых полях при отправке сообщения, тогда ему должны отображаться соответствующие уведомления. Их можно найти в разделе «Уведомления при отправке формы». Они все на английском языке, поэтому нужно будет перевести их на русский, или заполнить собственным текстом. Это обязательно нужно сделать, иначе посетитель просто не поймет, что он делает не так.
Дополнительные параметры
Вы можете задать дополнительные параметры для каждой контактной формы, добавив часть кода, в определенном формате, в специальное поле раздела «Дополнительная настройка». К примеру, строка «demo_mode: on» включает демонстрационный режим, в котором не будут отправляться электронные письма, а будет только выводиться сообщение об успешной отправке. Кроме того, если вставить строку
acceptance_as_validation: on
то неотмеченные флажки будут отображать сообщение об ошибке, не позволяя завершить отправку.
Персонализация
По умолчанию, для всех полей в Contact Form 7 используется стандартная стилизация из шаблона WordPress, не отличающаяся особой красотой. Из-за этого, многие пользователи ищут альтернативные решения, с более привлекательным внешним видом. Но для тех, кто знаком с CSS, будет очень просто изменить внешний вид полей по своему вкусу. Для этого можно воспользоваться атрибутами «ID» и «Class», которые задаются в параметрах каждого тега.
Имейте ввиду, если вы будете добавлять пользовательские CSS стили в основную таблицу плагина или шаблона, то после их обновления все изменения будут удалены. Поэтому, желательно использовать либо отдельную таблицу стилей, либо специальную функцию в параметрах вашего шаблона, позволяющую добавлять пользовательские CSS стили через панель администратора.
Дополнение
В качестве дополнения, стоит упомянуть одну очень хорошую особенность в Contact Form 7 для WordPress, с помощью которой можно фильтровать большие потоки писем от посетителей. Бывают ситуации, когда их действительно очень много, поэтому быстро ответить на все невозможно, а фильтровать вручную очень долго. Конечно, в таком случае, можно использовать метки и фильтры непосредственно в почтовом ящике, но это тоже потребует много времени. Гораздо проще будет осуществить фильтрацию еще на стадии отправки, воспользовавшись тегом «select» в Contact Form 7, отображающим раскрывающийся список. В этом списке можно предоставить пользователю выбор категории сообщения, чтобы по ней определять важность приходящей корреспонденции.
Создайте новое поле, выбрав «drop-down menu», и установите ему обязательное заполнение. Затем, добавьте в строку «Options» несколько вариантов категорий для сообщений, в зависимости от направления деятельности вашего сайта (например, «Общие вопросы», «Отзывы по работе компании», «Верните мои деньги»). Каждая категория должна начинаться с новой строки. Также, желательно поставить галочку на «Insert a blank item as the first option», чтобы первым пунктом списка была пустая строка, и пользователю пришлось выбирать подходящую причину, а не оставлять первый вариант.
Теперь, нажмите «Insert Tag» и скопируйте его название. Затем, перейдите в раздел «Письмо», и вставьте скопированное в строку «Тема», обязательно перед «». Готово, теперь в теме каждого пришедшего письма будет значиться выбранная пользователем категория, что значительно облегчит фильтрацию.
Вывод
WordPress уже давно вырос из платформы только для блогов, теперь он может уверенно выступать в качестве основы как для сайтов компании, так и для профессиональных страниц пользователей. Каждый такой сайт должен предоставлять пользователям удобный способ для прямой связи с владельцами. Contact Form 7 поможет заполнить все пробелы в общении между посетителями сайта и его владельцами, и, что немаловажно, не потребует много времени на реализацию этой возможности.
Подробная инструкция по установке, настройке и использованию плагина формы обратной связи для сайта WordPress. Плагин Contact Form 7 на данный момент является наилучшим в своей категории.
То что явной альтернативы даже среди платных плагинов нет, можно судить по тому как часто используется плагин Contact Form 7. На момент написания поста только с официального сайта WordPress этот плагин был скачен более 28 800 000 раз, а средний рейтинг 4,5 из 5! Это действительно показатель большого успеха. Кроме того, если посмотреть на ТОП продаж премиум тем WP, то практически в каждой из них вы найдете плагин Contact Form 7 как рекомендуемый или установленный по умолчанию.
Плагин Contact Form 7 “живой”, обновляется автором с каждой новой версией WordPress. Баги и ошибки устраняются оперативно. Явных конфликтов с большинством часто используемых плагинов не выявлено.
Плагин Contact Form 7 полностью бесплатен в т.ч. для коммерческого использования. После установки плагина в панели настроек вы найдете обращение автора с просьбой о “пожертвовании”.
Установка плагина Contact Form 7
Плагин Contact Form 7 вы можете скачать с официального сайта WordPress (ссылка выше), или непосредственно через вкладку “Плагины” > “Добавить новый” > Строка “Поиск плагинов” > вбиваем “Contact Form 7” . Не забудьте активировать плагин перед началом работы: “Плагины” > “Установленные” > находим плагин Contact Form 7> жмем “Активировать” . В боковой административной панели вашего сайта появится новый пункт “Contact Form 7”.
Настройка плагина Contact Form 7
Что приятно, по умолчанию плагин Contact Form 7 поддерживает мультиязычность. Если ваша версия WordPress на русском языке, то плагин так же полностью будет на русском языке, при этом форму обратной связи вы можете создать на любом языке. Язык формы указывается в процессе создания каждой формы. Отдельного раздела для настроек нет, все настройки индивидуальный для каждой отдельной формы.
Пример добавления формы обратной связи
1. Выбираем в административной панели “Contact Form 7” > “Формы” > кнопка на странице “Добавить новую”
.
2. Вам будет предложено выбрать язык формы. По умолчанию “русский”. Жмем кнопку “Добавить новую”
3. Перед вами открылось окно где вы можете создать свою форму со своими настройками.
Возможности обширные, но сразу хочу указать на несколько особенностей. Окно в котор открылось содержит несколько вкладок: “Шаблон формы”, “Письмо”, “Уведомления при отправке формы”, “Дополнительные настройки”. Последняя вкладка вам не потребуется, это скорее кастомизация для продвинутых пользователей и программистов. Подробно разберем остальные.
“Уведомления при отправке формы” — это те сообщения которые будет видеть посетитель вашего сайта при отправки формы. Содержаться варианты сообщений как успешной отправки, так и с ошибками и сбоями. По своему усмотрению вы можете поменять эти системные сообщения.
“Шаблон формы” — в этом разделе вы будете генерировать Теги, которые и отвечают за наличие нужных полей в форме.
“Письмо” — это внешний вид и содержание письма которое вам будет приходить после заполнения формы посетителем.
ВНИМАНИЕ: сейчас мы разберем какие теги бывают и какие поля они создают. Все эти теги вносятся в вкладке “Шаблон формы”, но если “ответные теги” вы не вносите в ручную (!) во вкладке “Письмо”, то заполненные формы будут приходить к вам на почту не полные.
4. Варианты тегов в вкладке “Шаблон формы”.
— text:
добавляет текстовое поле (короткое).
— email:
поле для e-mail.
— URL:
поле для указание адреса сайта или любой ссылки.
— tel:
поле контактного телефона
— number:
поле в которое можно ввести только числовое значение
— date:
поле с форматом даты
— text area:
добавляет текстовое поле (длинное).
— drop-down menu:
выпадающий список. У поля есть дополнительные настройки. Список который будет выпадать указывается в поле “Options”. Причем один элемент списка в одну строку (не через запятую!). Если стоит галочка у “Allow multiple selections” — пользователь сможет выбрать из вашего списка более одного варианта. Если стоит галочка у “Insert a blank item as the first option” — то будет добавленно вверху по умолчанию пустое поле, которое так же может быть выбрано пользователем.
— checkboxes:
Чекбокс (галочки). Поле имеет несколько настроек. Список чекбоксов указывается в поле “Options”. Причем один чекбокс в одну строку (не через запятую!). Если стоит галочка у “Put a label first, a checkbox last” по умолчанию галка будет стоять у первого чекбокса. Если отмечен пункт “Make checkboxes exclusive”, то пользователю можно будет отметить только один из чекбоксов.
— radio buttons: радио кнопки. Радио кнопки позволяют всегда выбрать только один пункт из списка. Ввод списка аналогично чекбоксам в столбик. Из настроек можно включить “Put a label first, a checkbox last”, тогда по умолчанию будет выделена первая радио кнопка из списка.
— acceptance: поле чек бокс, без установки галочки в которое сообщение не будет отправлено. Фактически это возможность взять безоговорочное согласие пользователя с чем-то, в противном случае письмо отправлено не будет. Например “Вы соглашаетесь что переданная вами информация будет обрабатываться нашими операторами”.
— quiz: нововведение в плагине. Это поле позволяет создавать вопрос и ответ на него. Идеально использовать в качестве защиты от спама. Посмотрите на оформление вопроса и ответа в форме генерации тега.
Любое поле можно сделать обязательным (обычно такие поля отмечаются *) для заполнения, для этого надо поставить галочку в поле Field type > Required field
. Внимание!
Не забудьте текстом обозначить пользователям что поле надо заполнить обязательно!
— CAPTCHA: капча устанавливается только как дополнительный плагин. Но в принципе при наличии тега quiz необходимость в капле значительно меньше.
— file: поле создает тег дающий возможность пользователю прикрепить к сообщению файл. В настройках тега можно указать “File size limit (bytes)” максимальный размер прикрепляемого файла, разрешенные типы файлов (расширения через запятую). Внимание, если вы не указываете максимальный размер прикрепляемого файла, то по умолчанию он определяется возможностями вашего сервера. Точную информацию по ограничениям вы можете узнать у компании предоставляющей вам хостинг. Обычно максимальный размер ограничен 10 Мб.
submint: тег добавляет кнопку “Отправить” (название можно поменять).
Это скрин со всеми генерированными мною тегами, а ниже скрин формы на сайте. Обратите внимание, что “Шаблон формы” поддерживает HTML теги, поэтому пояснения для пользователей я оформляю с помощью HTML тегов.
5. Вкладка “Письмо”.
Теперь перейдем в форму генерации письма которое будет отправляться вам и добавим те теги которые мы использовали в “шаблоне формы”. Обратите внимание на скрин. Поля не внесенные в тело письма вынесены наверх вкладки черным цветом, а те которые присутствуют в теле письма — серые.
Вносим их в тело письма (поле “Message Body”): просто копируйте теги выделенные черным и вставляйте их в форму тела письма. Обратите внимание что номера обозначенные в тегах совпадают с уникальными номерами полей которые вы добавляли в шаблоне формы. Таки образом вы можете идентифицировать какое поле к чему относится и подписать их непосредственно в теле письма, что бы потом не запутаться.
Сохраняем изменения.
6. Установка формы на сайт.
C странице создания формы копируем шор код (обычно он выделен синим или коричневым цветом) и вставляем его в любую страницу или пост.
Плюсы и минусы кратко
Плюсы
+ большое количество типов полей
+ поддержка мультиязычности
+ простота использования
+ бесплатный
+ надежный
+ не конфликтует с другими плагинами
+ плагин Contact Form 7 развивается
Минусы:
— надо не забывать вносить дополнительные теги в генерированное письмо
— оформление формы и письма требует минимальные знания HTML
Вывод: безусловно отличный редактор, если не сказать — лучший! Радует гибкость, надежность и стабильность. Если бы он был платный, его все равно бы покупали, т.к. по качеству близкого к нему нет и рядом. Рекомендую плагин Contact Form 7.
Контактная форма - неотъемлемый атрибут большинства сайтов. Именно поэтому в каталоге WordPress так много плагинов для контактных форм. Один из самых популярных - это Contact Form 7. Плагин позволяет создавать формы любых видов; очень гибок и удобен в настройке; развивается уже много лет и содержит много наработок.
Создание и показ контактных форм
Создание форм в админке
После установки плагина появится пункт меню "Contact Form 7", через который можно создавать и удалять формы.
Форма на картинке создана при активации плагина автоматически.
Используем форму по умолчанию, для этого создадим страницу "Связаться со мной" и вставим туда шорткод формы.
Лицевая часть сайта
А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):
На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).
Настройка формы (создание сложных форм)
Пример выше показывает как вставить готовую и очень простую форму контактов. А теперь давайте рассмотрим как создать форму посложнее. Для этого вернемся в админку, в менеджер форм и зайдем в редактирование формы по умолчанию.
В верхнем поле - название формы (его видно только в админке), указываем понятное для себя название, например: "Отзыв о сайте", "Форма заявки на работу", "Форма обратной связи" и т.п.
Под заголовком - шорткод. Его используем в записях, для вывода формы.
И ниже - четыре вкладки:
- Шаблон формы
- Письмо
- Дополнительные настройки
Рассмотрим каждую вкладку отдельно.
Шаблон формы
В этой вкладке можно настроить поля и внешний вид формы. Рабочей областью является HTML редактор WP. Только вместо привычных кнопок мы видим кнопки вставки разных полей формы.
Вёрстка формы
Для верстки можно использовать html-теги и шорткоды плагина. Шорткоды добавляют поля формы, а html теги позволяют создать произвольную HTML структуру. К примеру, наша дефолтная форма выглядит так:
А при отображении в записи она превратится в такой HTML:
Синтаксис шорткодов
Давайте кликнем по кнопке «Текст». Открывается окно, где мы можем указать атрибуты текстовому полю. Указываем и жмем "Вставить тег".
Тег в последствии будет преобразован в текстовое поле с html кодом:
Шорткоды можно удобно создавать через конструктор шорткодов.
Но конструктор не дает возможность изменить шорткод (там можно только создать шорткод). Изменить шорткод можно двумя способами:
- удалить и создать с помощью конструктора новый.
- изучить синтаксис и исправить шорткод поля вручную.
С конструктором вы и сами разберетесь.
А тут мы разберем синтаксис шорткода.
Для примера рассмотрим тег текстового поля с дополнительными опциями:
Text(обязательный) Тип поля: text, select, password, number и т.д. (в данном случае поле текстовое). Определяет, в какой элемент формы будет преобразован наш тег, а значит какой вид данных он будет принимать. * Звёздочка делает поле обязательным для заполнения (форма не будет отправлена и отобразиться уведомление о том, что поле надо заполнить). client-name(обязательный) Имя поля, используется как атрибут name в input, а так же используется при формировании шаблона отправляемого письма. id:my-id Атрибут id в input со значением my-id. Используется для оформления. class:my-class Атрибут class в input со значением my-class. Используется для оформления. placeholder "Введите имя" Использовать текст "Введите имя" как placeholder.
Соблюдайте порядок атрибутов тега: сначала идёт тип поля, затем его имя и только потом дополнительные опции.
Типы полей
- Текстовые поля: text , email , tel , url , textarea
- Числовые поля: number , range
- Поля с датой: date
- Чекбоксы, радио, списки: checkbox , radio , select
- Поле с загрузкой файла: file
- CAPTCHA: captchac и captchar
- Опросы: quiz
- Поле "Принять": acceptance
- Кнопка "Отправить": submit
- Произвольный тип поля
Шаблон письма
Во второй вкладе можно тонко настроить шаблон (вёрстку) и свойства отправляемого письма. В полях данной вкладки можно использовать специальные теги полей формы - это дает возможность передавать в письме указанные в форме данные.
Теги состоят из имен полей из шаблона формы. Например, мы создали текстовое поле с именем: . Теперь в шаблоне письма можно использовать тег . В письме вместо этого тега будет подставлено значение поля, введенное пользователем (ФИО).
Заголовки письма:
- Дополнительные заголовки - По умолчанию тут прописано Reply-To: . Заголовок Reply-To говорит нам, что на этот электронный ящик можно ответить нажав кнопку "Ответить" в почтовой программе, а тег формы - это имя поля из шаблона. Указанный пользователем email будет вставлен вместо этого тега. Получится что-то типа Reply-To: [email protected] .
Кому - электронный ящик, куда будет отправлено письмо. Можно указать сколько угодно ящиков через запятую.
От кого - имя и электронный ящик, от кого пришло письмо. Обычно тут указывается почта сервера (например [email protected]).
Можно указать любую почту, но если домен почты будет отличаться от домена сайта - форма не пройдет проверку и будет «ругаться» на этот параметр, хотя письма всё равно будут отправляться.
Тема - Заголовок письма. По нему будет понятно с какой формы были отправлены данные. К примеру, тема письма "Ошибка на сайте", "Заказ обратного звонка" и так далее. Выбираете такой заголовок, чтобы проще было работать с полученными письмами.
Тело письма
Это следующая важная часть данной вкладки. Тут указывается сам текст письма. В тексте используем всё те же теги формы (имена полей из шаблона формы).
Разберем дефолтное письмо:
От: <> Тема: Сообщение: -- Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)
У нас было 4 поля, которые заполнял пользователь. После отправки письма теги превратятся в значения и мы получим такое письмо:
От: Дмитрий
Не обязательные поля в теле письма
Если юзер не заполнит поле, а оно используется в теле письма, то тело письма будет неполным. К примеру в теле написано Человек с города , но юзер не заполнил поле , а значит в письме мы получим Человек с города... Такая строка в письме лишняя. Чтобы убрать эту строку из письма, поставьте галочку на пункте "Исключить вывод строк с пустыми тегами сообщения". Обратите внимание, что это сработает только тогда, когда текст и шоткод поля находятся в одной и той же строке.
Опция "Использовать HTML-формат письма". Позволяет использовать в теле письма HTML теги. При этом можно использовать ограниченный список HTML тегов, потому что не все почтовые клиенты или сервисы умеют правильно обрабатывать сложную HTML разметку. Можно использовать: таблицы, маркированные списки, жирность, абзацы и так далее. Подробнее ищите в сети.
Contact Form 7 позволяет отправлять письмо на два адреса, причем настройки для каждого письма разные. Это может пригодиться, когда надо отправить администратору сайта письмо с полной информацией и дубликат менеджеру, где содержится только данные о заказе.
Уведомления при отправке формы
В данной вкладке вы можете отредактировать сообщения, которые выводит форма в той или иной ситуации: при удачной или неудачной отправке письма, или при ошибках.
Теги шаблона письма не работают в этих полях.
Дополнительные настройки
Эта вкладка предназначена для продвинутых пользователей и даёт возможность с помощью JS кода расширять возможности формы. К примеру, вешать события для аналитики.
Об использовании данного функционала я расскажу в отдельной статье.
Популярный плагин Contact form 7 не отличается особой красотой своей стандартной формы, по этому для многих пользователей встает вопрос, как изменить внешний вид. Именно этим мы сейчас и займемся, я попытаюсь дать вам универсальный вариант, который подойдет для любого сайта.
Ранее я уже рассказывал о том , сейчас не будем об этом говорить, а сразу перейдем к необходимым изменениям дизайна.
Для начала нам нужен и файлу style.css, его можно найти во вкладке «Внешний вид»/»Редактор». По умолчанию, именно нужный файл вам и откроется. Рекомендую открыть несколько вкладок в браузере:
- Вкладка Contact Form 7 для правки формы.
- Страницу на сайте с формой обратной связи.
- Редактор с открытым файлом CSS.
Вкладки открыты приступим к внесению изменений, для начала немного подправим нашу форму.
Добавляем классы к форме Contact Form 7.
Когда мы откроем форму для правки мы увидим примерно следующую картину:
Такая форма обратной связи будет выглядеть примерно так:
Скучно, не пропорционально, скажем прямо не красиво.
Для изменения внешнего вида формы нужно немного поработать со стилями, но для начала добавим несколько классов в шаблон формы. Для этого открываем форму для правки (как на картинке выше) и дописываем следующие классы:
Писать мало, поэтому ошибок наделать трудно. В сети вы наверное находили советы без применения и добавления классов. Все дело в том что без добавления классов может возникнуть несколько проблем. К примеру вы захотите добавить сразу несколько форм на сайт, все они примут идентичный вид, а это не всегда удобно, по этому стоит использовать именно предложенный мной вариант.
Классы добавлены, пока ничего не изменилось, следующим шагом будет определение id формы.
Определяем ID формы на странице.
Для начала нужно понять что одна и та же форма будет иметь разные id на разных страницах сайта, так устроен плагин, он добавляет дополнительный параметр при каждом вызове формы. Сейчас разберем поподробнее.
Для правки формы нужно ее добавить на страницу или в запись, в необходимом месте, то-есть вставить шорткод. После этого переходим на эту страницу и кликаем по форме правой кнопкой мыши и выбираем пункт «Просмотреть код» это для браузера Chrome, если у вас другой, то там примерно такой же текст.
В открывшемся коде ищем начало нашей формы, выглядит это так:
Именно это и будет id формы. Возвращаясь назад, покажу какой id имеет эта же форма на другой странице.
Как видим, идентификатор отличается всего несколькими цифрами. По этому для начала нужно определиться на какой странице будет расположена форма, а уж затем приступать к правке стилей.
Ну что, очередной шаг сделан, мы определили id, прописали наши классы, теперь приступим непосредственно к изменению внешнего вида.
Стилизация формы Contact Form 7, работа с файлом style.css
Забегая вперед скажу что предложенный мной вариант навряд покажется вам идеальным. Дело в том что каждый кто читает эти строки хочет видеть свою форму именно такой какой он ее представляет. Я не телепат, и не смогу угодить всем, но постараюсь дать вам наводку где и в каком месте искать информацию и что изменять. Так что простите сразу за возможное разочарование, панацеи нет, придется и вам немного поработать.
Изменяем цвет фона, отступы, шрифт формы.
После проделанной работы переходим к стилям. Сперва изменим (если это нужно) фоновый цвет формы, подгоним наши отступы, подберем необходимый шрифт и цвет текста. Все эти настройки будем проводить заранее зная ID. Как его узнать, мы рассматривали выше.
Сперва обратимся к файлу style.css, добавим первые правила для ID формы (добавлять нужно в самом низу файла), в моем случае это wpcf7-f172-p34-o1, вам же нужно подставить ваш идентификатор:
#wpcf7-f172-p34-o1 {
margin: 5px;
padding: 10px;
background: #B3AFAF;
font-family: Georgia, «Times New Roman», Times, serif;
color: #000;
}
Теперь разберем все подробнее:
- Вначале займемся отступами. Внешние отступы (от края до начала формы) - margin: 5px, внутренние отступы (от начала формы до внутренних элементов) -padding: 10px.
- Заливка формы или ее фон определяется свойством background: #B3AFAF, цвет можете подбирать какой угодно, просто заменив значение.
- Определяемся с семейством шрифта, если менять не хотите можно не прописывать это правило (font-family: Georgia, «Times New Roman», Times, serif).
- Цвет текста определяет свойство color, которое сейчас стоит в черном цвете (color: #000).
С данными параметрами можете экспериментировать сами, подбирать отступы, цвета и шрифты. Для этого нужно лишь изменить значение, сохранить новый вариант, обновить страницу и посмотреть изменения. Не бойтесь экспериментов, тут вы не сможете поломать ничего, в крайнем случае стили просто не сработают и вы легко все исправите как было.
Определяем отступы между полями, изменяем рамку.
Переходим к нашим полям, добавим отступов:
#wpcf7-f172-p34-o1 p{
margin:5px;
}
Это отступы по краям полей, что бы текст и блоки не сливались в одно целое.
Следующим этапом будут рамки, я дам свой вариант, а вы сможете найти в сети множество вариантов которые вам понравятся и заменить их.
#wpcf7-f172-p34-o1 input,textarea {
border: 3px double #000;
}
О рамках немного подробнее. Значение в 3px это ширина рамки, double двойное использование (если не нужно, можно удалить это слово), #000 цвет рамки так же можете подобрать свой.
Меняем ширину полей и их расположение.
Name-cf {
float:left;
padding: 2px;
}
.name-cf input {
width: 270px;
}
.thems-cf input {
width: 100%;
}
.clear-cf {
clear: both;
}
.text-cf textarea {
width: 100%;
}
Теперь разберем все поподробнее:
- Первый класс к которому мы обратимся name-cf он принадлежит полям с именем и емейлом. Для них задаем отступ в 2px (padding: 2px ) и обтекание (float:left ), что бы выровнять два поля в один ряд.
- Далее подправим ширину полей задав им оптимальный (для моего шаблона) размер в 270px (.name-cf input { width: 270px; } ). Если у вас поля все еще в одну строчку или же слишком маленький размер, подберите свой вариант.
- Поле с названием темы сделаем на всю ширину формы, так как текста там может быть больше (.thems-cf input { width: 100%;}). Если вы хотите свое, точное значение укажите его в пикселях.
- Следующий блок который мы добавили к форме предназначен для отмены обтекания (.thems-cf input {width: 100%; } ).
- Так же как и в предыдущем случае, поле с текстом сообщения делаем на всю ширину (text-cf textarea {width: 100%;} ).
Можно обновить файл стилей и посмотреть на изменения, если нужно, подогнать размеры под ваши нужды.
Выравниваем кнопку «Отправить» по центру, изменяем фон и ширину.
Переходим к нашей кнопке, выровняем по центру и добавим фон:
Submit-cf {
width: 200px; /*ширина блока*/
height: 25px; /*высота*/
margin: 0 auto; /* Отступ слева и справа */
}
.submit-cf input {
width: 200px;
background:#96B195;
}
Традиционно объясняю что к чему:
- Первым правилом мы определяем ширину и высоту блока в котором будет размещена кнопка и ставим ее по центру формы.
- Вторым правилом задаем цвет фона кнопки (background:#96B195, если не указать будет такого же цвета как и все остальные поля), устанавливаем ширину кнопки (width: 200px , желательно что бы была такого же размера, как ширина блока, что бы кнопка не двигалась в стороны).
Сохраняем наши настройки и смотрим что у нас получилось:
Соглашусь далеко не шик, но зато адекватно смотрится в целом, ниже форма по умолчанию, думаю эффект очевиден. В любом случае мы научились изменять внешний вид формы Contact Form 7 .
Надеюсь для вас статья была полезной, если же что-то не так или возникли проблемы оставьте свой комментарий и я постараюсь ответить (подправить).
