Contact form 7 выбрать файл css
В этом материале будет детально описана настройка Contact Form 7 - плагина для такой популярной платформы по созданию и продвижению сайтов в Глобальной паутине, как «Вордпресс». Этот программный инструмент позволяет создавать и конфигурировать формы обратной связи.
Немножко о «Вордпрессе»
Одним из наиболее популярных и самых распространенных инструментов для разработки и наполнения информационных ресурсов является «Вордпресс». Изначально этот программный продукт был ориентирован на создание простеньких блогов. Но затем профильные специалисты дополнили его функционал, что позволило создавать с помощью этой системы управления контентом уже и другие интернет-ресурсы.
Сильные и слабые стороны данной платформы по созданию и продвижению сайтов
Плюсы этой программной платформы такие:
Простота и открытость исходных кодов.
Внушительное количество справочной информации.
Возможность разработки любого по степени сложности тематического ресурса в интернете за кратчайшие сроки.
Высокое быстродействие без дополнительных программных надстроек (плагинов).
А вот недостатки в этом случае следующие:
Сайты, созданные на основе «Вордпресс», не справятся с большой нагрузкой.
Наблюдается снижение быстродействия интернет-ресурса при установке дополнительных мини-программ или, как их еще называют, плагинов.
и зачем они нужны сайтам на базе платформы «Вордпресс»
Базовый функционал такой системы управления контентом, как «Вордпресс», весьма скромный. Его лишь достаточно для разработки наиболее простых блогов и сайтов. Чтобы хоть как-то улучшить ситуацию с функциональностью программной платформы и добавить ей гибкости, разработчикам приходиться доустанавливать специальные мини-программы, которые на профессиональном жаргоне называются плагинами. Одной из таких и является Contact Form 7. Настройка плагина позволяет на определенной странице системы управления контентом создать форму обратной связи с расширенным уровнем функциональности.
Специализация «Контакт форм 7»
Как было отмечено ранее, создание обратной связи между посетителем и администратором интернет-ресурса на базе платформы «Вордпресс» - это основная задача Contact Form 7. Настройка почты, редактирование шаблона, пересылка различных файлов — это далеко не полный перечень тех возможностей, которые предоставляет эта мини-программа. При этом нагрузка на аппаратные ресурсы сайта будет относительно небольшой и ее наличие не приведет к существенному снижению быстродействия сайта или блога.
Порядок установки плагина
Существует три способа установки плагинов на платформе «Вордпресс»:
Путем скачивания ZIP-архива из глобальной паутины и «заливки» его в соответствующий каталог интернет-ресурса.
С использованием различного рода FTP-клиентов.
Наиболее безопасным из приведенных трех вариантов инсталляции плагинов является последний. В этом случае программный код скачивается с официального сайта и в нем точно нет различного рода вредоносных, опасных фрагментов. Сам же порядок установки плагина в этом случае следующий:
Тестовое поле — универсальный элемент интерфейса, в который можно ввести любой набор символов.
E-Mail - место ввода названия электронного почтового ящика.
URL - поле набора адреса интернет-странички.
Номер телефона — позволяет ввести номер телефона в международном формате.
Элемент «Число (spinbox)» позволяет создать поле ввода любого целочисленного значения (например, возраста посетителя).
Элемент «Число (Slider)» добавляет на форму ползунок, с помощью которого можно будет выбрать числовое значение из заданного диапазона.
Пункт «Дата» создает специальное поле ввода, в котором можно указать необходимую дату. При активации этого элемента интерфейса внизу выпадает календарь, в котором можно сразу выбрать необходимую дату.
В свою очередь, пункт выпадающего меню «Текстовое поле» предназначен для набора текстовой части электронного письма.
Следующий пункт - «Выпадающее меню» - позволяет из фиксированного списка выбрать необходимый параметр.
А вот «CheckBoxes» предназначен для выбора одного или нескольких значений из заданного списка.
Элемент интерфейса «Radio Buttons» практически идентичен предыдущему. Разница лишь в том, что в этом случае можно выбрать лишь один правильный вариант, в то время как «CheckBoxes» может иметь несколько правильных значений.
Пункт «Acceptance» позволяет добавить всего один флажок на создаваемую форму. Как правило, он используется для ознакомления с какими - либо условиями и без их принятия в дальнейшем не будет возможна отправка электронного письма.
Пункт «Меню» позволяет создать специальный раздел в интерфейсе, который будет обеспечивать защиту почтового ящика от спама. В этом случае перед отправкой необходимо будет дать правильный ответ на поставленный вопрос.
Второй вариант защиты — это «CAPTCHA». При его выборе на форме добавиться отдельный раздел, в котором будет отображаться картинка с символами и дополнительное поле для их ввода.
Следующий пункт - «Отправка файла». Позволяет добавить к тексту письма файл с различного рода пояснениями и комментариями для администратора ресурса.
Последний пункт - «Кнопка отправки» - позволяет добавить соответствующий элемент интерфейса.
Заходим в административную панель «Вордпресса».
Затем необходимо переместиться в раздел «Плагины».
В открывшемся окне выбираем пункт «Добавить новый».
В строке поиска вводим название плагина - 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 позволяет добавить такие элементы интерфейса на форму обратной связи:
Сохраняем внесенные изменения
После того как необходимые значения заданы, а форма должны образом сконфигурирована, необходимо все это сохранить. Для этого в окне редактирования плагина подымаемся в его верхнюю часть. Здесь должна быть кнопка «Сохранить». Наводим указатель манипулятора на нее и делаем однократное нажатие на ней. В ответ появится код формы, который выделяем с помощью все того же указателя мышки и копируем. Далее перемещаемся в административной панели системы управления контентом в пункт «Страницы». Затем создаем новую страницу с необходимым названием (например, «обратная связь», «Контакты» или «Задать вопрос администратору ресурса»). Потом переводим курсор набора в поле ввода ее кода. При этом необходимо перевести режим набора кода в «Текст» на панели параметров. После этого вставляем ранее полученный код формы. Далее в правой части интерфейса находим кнопку «Опубликовать» и наводим на нее мышку. На следующем этапе совершаем однократное нажатие левой кнопки мышки на этом элементе интерфейса системы управления контентом.
Проверяем полученный результат
После выполнения ранее указанных манипуляций в интерфейс интернет-ресурса должна добавиться новая страница, на которой и будут отображены элементы, заданные в Contact Form 7. Настройка интерфейса, в принципе, на этом закончена. Необходимо лишь проверить правильность настройки программного обеспечения. Для этого необходимо перейти на главную страницу сайта, блога или портала. Затем в списке страниц находим ту, на которой и была размещена форма обратной связи. Переходим на нее, вводим во все поля сразу правильные параметры и отправляем себе на почту тестовое письмо. В ответ должно появиться информационное сообщение об успешном выполнении данной операции. Затем с пустыми полями пытаемся отправить еще одно письмо. После этого должно появиться сообщение о том, что необходимо задать все отмеченные параметры формы. Если в обоих случаях были получены результаты, указанные ранее, то созданная форма обратной связи функционирует корректно.
Плюсы и минусы плагина. Альтернативные варианты
Отличным решением для начинающего разработчика по созданию формы обратной связи является мини-программа Contact Form 7. Настройка отправки почты, создание элементов интерфейса и прочих важных элементов интерфейса в этом случае большей частью автоматизировано и требует минимальных знаний пользователя. Поэтому для простенького интернет-ресурса начального уровня и с начинающим администратором — это отличное решение. Но ведь любой плагин — это дополнительная нагрузка на ресурсы интернет-странички, которая снижает быстродействие. Как результат, более продвинутые пользователи рекомендуют уходить от такого простого способа создания формы обратной связи. Ее также можно и самостоятельно создать с помощью HTML, CSS и JS, пусть и с меньшим уровнем функциональности. При этом снизится потребность в вычислительных ресурсах сайта и существенно повысится уровень быстродействия.
Итоги
В этой статье поэтапно описана настройка Contact Form 7. Этот плагин действительно имеет высокий уровень функциональности, с его помощью можно создать любую форму обратной связи. С другой стороны, использование дополнительного плагина в составе системы управления контентом увеличивает уровень нагрузки на аппаратное обеспечение сайта. Поэтому начинающим администраторам сайтов на базе этой системы управления контентом рекомендуется использовать именно этот плагин для таких целей. Ну а более продвинутые пользователи могут обойтись и без Contact Form 7. Настройка плагина в этом случае точно не понадобится.
Добрый день дорогие читатели блога. Продолжаем тему форм обратной связи на WordPress. И раз реч зашла о них, предлагаю сегодня поговорить о плагине WP Contact Form 7. Далее я раскажу вам пошаговую настройку плагина, а также вкратце опишу дополнения для этого плагина.
Навигация по странице:
Описание WordPress Contact Form 7
2) Активировать плагин Contact Form 7 в админке WordPress.
3) Перейти на новую созданную вкладку, как показано на рисунке:
4) Нажать вкладку "Добавить новую" и указать язык формы по умолчанию, или выбрать нужный
5) Указываем имя контактной формы и нажимаем сохранить.
6) Теперь у нас появился шорткод, который уже можно скопировать и вставить в пост или сайдбар для того, чтобы вывести форму - contact-form-7 id="1252" title="Форма номер 1" (надо взять в квадратные скобки как на рисунке).
7) Вот как то так выглядит наша форма:
Конечно не очень красиво, но никто не мешает создать свои стили или сделать свою форму и туда вносить вставки.
Как вывести Contact Form 7 в произвольное место шаблона
В п.6 пошаговой настройки я показывал вам, как можно взять шорткод кода CF7 и далее описал что этот код можно выводить в виджет или в пост, страницу. В дополнение, хочу сказать, что вы можете вывести Contact form 7 в любое произвольное место шаблона. Для этого следует вставить вот такой несложный код:
Вот и все, если вы все сделали правильно, то получите вывод Contact Form 7 в произвольное место шаблона WordPress.
Настройка полей ввода Contact Form 7
Благодаря ему, у вас дополнительно появятся такие боксы как:
Настройка ответа reply-to для contact form 7
В новой версии плагина CF7 4.4 и выше, разработчик рекомендует вводить в поле from (вот оно на скине ниже)
правильный адрес, который соответствует вашему домену. Видно со скина, и эта рекомендация создает проблему:
Как сделать ответ пользователю с почтовика?
Если просто нажать ответить, то отвечать мы будем на свою же почту, по сути, ответим сами себе. Это очень не удобно, ведь нам нужно руками копировать адрес пользователя вставлять в почтовик и только потом отвечать.
Решение этой проблемы есть и как всегда простое. Вам нужно в поле Additional Headers добавить код:
Reply-To:
Разумеется your-email-sh нужно заменить на свой шорткод почты. Смотрите скин ниже:
Теперь, когда вам придет письмо с обратной связи вордпресс, вы сможете нажать в почтовике ответить и ваш ответ будет отправлен на правильный e-mail.
Если после этий действий вы столкнулись с проблемой - стоить прочесть пост перейдя по ссылке. Там описанные основные проблемы и причины траблов в плагине Contact Form 7.
На этом все. Надеюсь вам стало понятно как делается настройка плагина и его макетов.
Почти каждый блог, созданный на платформе WordPress, использует Contact Form 7. Он в своей области очень популярен, тем более разработчики постоянно его развивают. Перед остальными подомными модулями имеет ряд преимуществ, в частности, простоту настроек, локализацию, добавление и управление всеми возможными элементами формы.
И сегодня рассмотрим плагин Contact Form 7 Style , который предназначен для того, чтобы визуально создавать стили для Contact Form 7. Изначально, кроме своего оформления, у плагина есть готовые стили формы в виде шаблонов. Где вы просто выбираете вариант шаблона и ставите галочку какой форме, созданной вами ранее, применить это оформление. Давайте разберем это на деле.
Настройка плагина Contact Form 7 Style
Пропускаем часть объяснения и создание форм, так как тема обзора направлена именно на стилизацию формы. Для этого, как говорилось выше, мы воспользуемся специальным плагином. После его установки в боковой панели добавится раздел «Contact Styles » с пяти подразделами.
В первом разделе «All Styles » находится уже готовые шаблоны стилей формы, и тут же будут сохраняться стили созданными вами. При наведении курсора мыши на один из шаблонов, появляются дополнительные кнопки управления: Изменить, Свойства, Удалить. При нажатии на кнопку «Свойства» отобразится все доступные формы связи имеющиеся на вашем сайте. Где нужно только поставить галочку напротив нужной формы и сохранить изменения.
В разделе «Add New » можно самостоятельно сделать шаблон для формы со своими стилями, как это показано выше на видео. Переключаясь между элементами формы и визуально оформлять все поля как в нормальном состоянии, так и в hover эффекте.
Контактная форма - неотъемлемый атрибут большинства сайтов. Именно поэтому в каталоге 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. Но со временем пришло понимание того, что возможностей этого плагина явно не достаточно и самый большой минус — он позволяет создать лишь одну форму обратной связи.
Вроде бы и проблемы-то нет, на самом деле. Но некоторым владельцам сайтов необходимо больше одной формы обратной связи, которые могут располагаться не только на странице «Обратная связь» или «Контакты», но и на любых других страницах или записях.
В этой инструкции я хочу показать вам создание формы обратной связи с помощью другого плагина, более функционального и чуть более сложного, чем рассмотренный в прошлой заметке. Приступим?
Описание плагина
Плагин 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 .
