Почти каждый блог, созданный на платформе WordPress, использует Contact Form 7. Он в своей области очень популярен, тем более разработчики постоянно его развивают. Перед остальными подомными модулями имеет ряд преимуществ, в частности, простоту настроек, локализацию, добавление и управление всеми возможными элементами формы.
И сегодня рассмотрим плагин Contact Form 7 Style , который предназначен для того, чтобы визуально создавать стили для Contact Form 7. Изначально, кроме своего оформления, у плагина есть готовые стили формы в виде шаблонов. Где вы просто выбираете вариант шаблона и ставите галочку какой форме, созданной вами ранее, применить это оформление. Давайте разберем это на деле.
Настройка плагина Contact Form 7 Style
Пропускаем часть объяснения и создание форм, так как тема обзора направлена именно на стилизацию формы. Для этого, как говорилось выше, мы воспользуемся специальным плагином. После его установки в боковой панели добавится раздел «Contact Styles » с пяти подразделами.
В первом разделе «All Styles » находится уже готовые шаблоны стилей формы, и тут же будут сохраняться стили созданными вами. При наведении курсора мыши на один из шаблонов, появляются дополнительные кнопки управления: Изменить, Свойства, Удалить. При нажатии на кнопку «Свойства» отобразится все доступные формы связи имеющиеся на вашем сайте. Где нужно только поставить галочку напротив нужной формы и сохранить изменения.
В разделе «Add New » можно самостоятельно сделать шаблон для формы со своими стилями, как это показано выше на видео. Переключаясь между элементами формы и визуально оформлять все поля как в нормальном состоянии, так и в hover эффекте.
Потребовалось получить красивую форму для плагина , формы надо вчера, а сидеть и прописывать стили в ручную достаточно сложно, да и для многих проектов просто по бюджету не проходит. Поэтому отправился в поиски интересных плагинов для быстрой настройки css контактных форм.
Все дружно (это относится к поисковикам) порекомендовали — мудрые люди сказали — правь css и не морочь никому голову, «Блокнот» в руки и вперед. Забегая вперед — мудрые люди были правы.
Однако любопытство возобладало и решено было протестировать плагин более детально, ранее уже пробовал его, но он показался крайне унылым и неудобным. Плагин не обновлялся 11 месяцев, что грустно. Доверять свои формы ему рискнули чуть более 6К вебмастеров, тоже не велико число (из них я качнул его четыре или пять раз).
После установки создает в корне меню админки раздел «Contact style». В этом разделе есть два пункта содержащие шаблоны на день Валентина и Рождество и «Custom Style» где можно полностью настроить вывод формы. Собственно раздел «Custom Style» и интересует больше всего, подробнее о доступных настройках:
«GENERALS SETTINGS» — можно определить цвет фона, ширину формы (задается в px, % не пробовал), толщина бордюра, форма (пунктир, сплошная и т.д.), цвет, скругление.
«INPUTS AND LABELS SETTINGS» — фон полей ввода, цвет шрифта ввода, фонт (список не велик и с кириллицей там едва ли что-то будет) и его размер. Цвет границ полей, стиль (пунктир сплошная и т.д.), толщина, скругление. Фонт ввода и его размер. Параметры полей в px — высота/ширина, отступы. Фонт метки, стиль, размер, цвет.
«SUBMIT BUTTON SETTINGS» — настройки кнопки отправки формы. Доступные настройки — размер кнопки, скругление, цвет, тип и цвет границы.
Проблемы в использовании.
Ознакомившись с настройками можно прийти к выводу, что все очень хорошо — практика показала обратное. Настроек действительно много, но их не хватает — нет настроек отступа внутри формы, поэтому все блоки собираются на левой границе вплотную к краю форму. Странные настройки «по умолчанию» — где поле ввода размером 100*100 px. Если выставить правильно размеры полей, то выпадающего списка это не коснется и он потащит стиль основной темы. Сбросить на исходные настройки не получилось до удаления плагина…
Пока кроме как вручную поменять стили более менее пристойно не получилось… Чуда не произошло.
Важное примечание! Плагин недавно обновился и что то поменялось в настройках довольно значительно, так что надо смотреть и тестировать.
С помощью плагина Contact Form. Но со временем пришло понимание того, что возможностей этого плагина явно не достаточно и самый большой минус — он позволяет создать лишь одну форму обратной связи.
Вроде бы и проблемы-то нет, на самом деле. Но некоторым владельцам сайтов необходимо больше одной формы обратной связи, которые могут располагаться не только на странице «Обратная связь» или «Контакты», но и на любых других страницах или записях.
В этой инструкции я хочу показать вам создание формы обратной связи с помощью другого плагина, более функционального и чуть более сложного, чем рассмотренный в прошлой заметке. Приступим?
Описание плагина
Плагин Contact Form 7 позволяет создавать множество разных форм для отправки результатов на ваш электронный ящик. Настройке поддаётся абсолютно всё — внешний вид формы, порядок полей, название надписей, формат электронных сообщений, выбор получателей ответов. В общем, плагин действительно очень функциональный и классный.
Кроме этого, вы можете подключить к нему плагин Akismet для защиты от спама, реализовать , а так же использовать мультиязычность. Это, на мой взгляд, круто! :-)
Установка плагина Contact Form 7
Плагин устанавливается стандартным способом в WordPress. Заходим в раздел «Плагины» — «Добавить новый», вводим название Contact Form 7 и устанавливаем его из репозитория. Не забываем активировать сразу после установки.
Настройка Contact Form 7
После активации плагина в главном меню WordPress появится новый пункт «Контакты (CF7)», это основное место настроек ваших форм обратной связи. Количество форм ничем не ограничено.
Список существующих форм доступен в разделе «Contact Forms»:
Тут же можно скопировать нужный шорткод для вставки на страницу или в запись:
Добавление новой формы обратной связи
Как видите, каких-то особых дополнительных пунктов в меню нет, поэтому перейдём к созданию самой формы обратной связи. Для этого выбираем пункт «Добавить новую» в главном меню.
Первым делом нам предлагается выбрать язык интерфейса формы, которая будет создаваться. WordPress определяет установленную версию на вашем сайте и предлагает выбрать её по умолчанию:
Но вы можете выбрать из списка любой доступный язык:
После нажатия на кнопку «Добавить новую» появится конструктор формы.
Изменяем название формы
Первым делом нужно ввести название нашей формы, чтобы не потеряться в списке форм, когда их будет слишком много. Для этого достаточно нажать мышкой на слово «Заголовок» в верхней области экрана:
После этого появится текстовое поле, в котором введём название с описанием:
Как только страница обновится, вы увидите следующее сообщение:
Можно скопировать предложенный шорткод и вставить на нужную нам страницу.
Но вы можете сделать это и позже, как только настроите форму. Выбор за вами.
Изменяем шаблон формы
Шаблон формы — это обычный HTML-код, который формирует внешний вид вашей формы. По умолчанию он содержит 4 поля (имя, электронный адрес, тему и сообщение) и кнопку отправки формы. Выглядит это следующим образом:
Вы можете менять блоки местами, просто вырезая и вставляя их код в любое место.
Например, мы можем поменять местами поле электронного адреса и имя клиента:
Или же можем удалить поле «Тема», чтобы оно не высвечивалось в нашей форме. Для этого достаточно удалить соответствующий блок текста в нашем шаблоне:
«Звёздочка» возле кода элемента означает что это поле обязательное и пока клиент не введёт какое-то значение, форма не будет отправлена:
Как добавить новое поле в форму
Представьте, что вам необходимо в стандартную форму добавить поле с адресом сайта. Конструктор формы этого плагина позволяет безо всяких проблем реализовать задуманное. Достаточно воспользоваться кнопкой «Сгенерировать тэг»:
При нажатии вывалится огромный список возможных дополнительных полей:
Вам останется лишь выбрать тип нужного поля и выполнять ещё ряд простых действий.
Не пугайтесь. Настройки хоть и выглядят устрашающе, но на деле очень простые:-)
Признак «Обязательное поле» позволяет установить дополнительную проверку и пока это поле будет оставаться пустым или иметь некорректное значение, форма не будет отправлена. Эта настройка есть практически у всех типов полей:
Кроме этого, многие поля нашей формы имеют одинаковые настройки имени, указания ID элемента и класса CSS, через которые можно изменять внешний вид этих полей. Они присутствуют практически во всех полях:
Поле «Имя» самое важное, именно оно используется и в шаблоне формы, и в шаблоне письма.
Но за время пользования этим плагином мне ни разу не приходилось менять или устанавливать значения этих атрибутов. Скорее всего и вам не понадобится. Но рассказать и познакомить с ними я обязан:-)
Все текстовые поля в нашем конструкторе формы имеют дополнительные поля с размером самого поля и максимальной длиной значения, вот они:
Так же специфические поля, типа URL или каких-то других, отличных от обычных текстовых, имеют свои особенные настройки. Например, наше поле URL имеет дополнительную настройку:
Рассматривать абсолютно все настройки я не буду, т.к. их слишком много и они специфические для каждого типа поля. Ну, а если вдруг вам всё-таки понадобится эта информация, тогда напишите об этом в комментариях к этой заметке и я подготовлю дополнительный обзор настроек.
Теперь нам нужно добавить код этого поля в форму шаблона формы.
Для этого необходимо скопировать предложенный код и вставить его в форму слева:
Например, я хочу разместить поле с адресом сайта после имени клиента. Мне необходимо будет ввести код по аналогии с другими полями, то есть добавить абзац, перенос строки и вставить шорткод этого нового поля:
Ну и для того, чтобы значение этого поля пришло нам на электронный адрес, вот это значение нужно скопировать:
И вставить в текстовое поле ниже в «Шаблон письма»:
По аналогии добавляются и другие поля. Всё просто и понятно:-)
Адресат и шаблон письма
Теперь давайте рассмотрим настройки, которые учитываются при отправке сообщения. В нашем случае это получатель (практически всегда это вы и есть) и шаблон письма, которое будет приходить на указанный электронный адрес после отправки сообщения.
В первую очередь необходимо указать адресата, на чью электронную почту будут приходить сообщения с нашей формы. По умолчанию сюда подставляется электронный адрес из настроек WordPress.
Я думаю вы уже обратили внимание что в этих формах используются непонятные коды, типа , . Так вот, это то самое поле «Имя» из генератора поля, которое я рассматривал выше:
Ну и дальше вам останется лишь привести в порядок шаблон самого письма:
Вы можете использовать все те поля, которые создавали автоматически через кнопку «Сгенерировать тэг», либо же оставить стандартную форму, если вы ничего не изменяли в настройках.
P.S. В настройках этого плагина есть довольно интересная возможность — указать второго адресата сообщения. Честно говоря я сходу не могу придумать зачем это может понадобиться, но раз возможность есть, то кто-то её в любом случае воспользуется.
Настройка сообщений
Ну и какой же это плагин отправки сообщений, если он не позволяет изменить текст уведомлений или надписей? И плагин Contact Form 7 не исключение. Он позволяет перевести любую надпись или сообщение об ошибке:
Известные проблемы
Бывает так, что при использовании нестандартных контролов, типа email или url, внешний вид отдельных элементов на странице будет отличаться. Например, обратите внимание на поле «Адрес вашего сайта» в самой форме:
Не увидели? А я покажу поближе:
В общем, проблема в том, что внешний вид подобных полей визуально отличается от стандартных текстовых полей. Сравните с полем «Ваше имя», сразу всё поймёте.
Тут есть два варианта решения. Первое — добавить соответствующие стили в файл style.css вашей темы, либо изменить в шаблоне формы тип url на text, тогда всё будет нормально:
Заключение
Я думаю обзор способов создания форм обратной связи можно считать полностью закрытым, а саму тему рассмотренной вдоль и поперёк.
Конечно, обязательно появится кто-то, у кого либо что-то не получится, либо захочется предложить к рассмотрению какой-то другой, аналогичный плагин. Я всегда рад вопросам и предложениям! Не стесняйтесь задавать их в комментариях:-)
Если вы хотите поблагодарить меня за материал - можете сделать это здесь:-)
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter .
Практически на любом сайте должна присутствовать обратная связь, позволяющая читателям блога или клиентам компании обратиться напрямую к их владельцам. Это один из самых удобных способов взаимодействия с посетителями. Но, некоторые владельцы сайтов на 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 поможет заполнить все пробелы в общении между посетителями сайта и его владельцами, и, что немаловажно, не потребует много времени на реализацию этой возможности.