Настройка contact form 7. Добавление полей

Приветствую вас, дорогой читатель!

У вас уже бывали ситуации, когда вам не хватает стандартных полей Contact form 7 и нужно добавить ещё чтобы расширить функционал вашей формы?

Если да, то эта статья именно для вас.

Из этой статьи вы узнаете про  про особенности настройки  Contact form 7, научитесь добавлять и настраивать разные типы полей, раскрывающиеся списки, а также элементы checkbox и radio button.

Для чего нужны дополнительные поля в Contact form 7?

Когда вы устанавливаете плагин ContactForm7, то в форме обратной связи? которая создается по умолчанию есть всего четыре поля: ваше имя, ваш e-mail, тема сообщения, само сообщение и кнопка отправить. Иногда этих полей бывает не достаточно. Например, вы создаете форму оформления заказа и вам необходимо ввести еще номер телефона, время, когда удобнее всего позвонить, адрес, дополнительный e-mail, добавить возможность выбора определённых опций из выпадающего списка, и т.д.

Устанавливаем плагин Сontact form 7

Устанавливается он как обычно. Переходим в административную часть нашего сайта, заходим в меню «Плагины» => «Добавить новый». Вводим название в строку поиска, нажимаем «Enter» и теперь нажимаем на кнопку «Установить». А затем активируем плагин.

Создаём и настраиваем новую форму Contact form 7

Для создания новых полей и их настройки создадим новую форму.

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

Нажимаем кнопку «Добавить новую», и вводим название формы.

Рассмотрим интерфейс настроек Contact form 7. Здесь мы видим четыре вкладки:

—  «Шаблон формы» — здесь мы создаем поля и выводим какой-то текст.

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

— «Уведомления при отправке формы» — на этой вкладке мы можем редактировать сообщений, которые выводятся при отправке письма. Например сообщение об успешной отправке или возникновении определённой ошибки.

— «Дополнительные настройки» — на этой вкладке можно вводить специальные фрагменты кода, которые позволяют расширить функционал Contact Form 7.

Для того, что бы подробнее об этом узнать, вы можете нажить на ссылку «Дополнительные настройки». У вас откроется страница с описанием. Правда она на английском :)

Добавление и настройка текстового поля в Contact Form 7

Возвращаемся во вкладку «шаблон формы». И рассмотрим варианты полей, которые мы можем добавить.
Самое первое поля – это поле «Текст». Выглядит это поле следующим образом:

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

Открывается такое окно для генерации специального шорт-кода, который позволит вставить поле в вашу форму:

Давайте рассмотрим, какие настройки здесь есть:
Field type — required field — если нужно чтобы это поле было обязательным для заполнения, то поставьте здесь галочку.
Поле «Имя» – генерируется автоматически и должно обязательно быть уникальным. Здесь ни чего не меняем.
Значение по умолчанию – если вы хотите что бы в вашем поле, по умолчанию было написано, к примеру, «Имя», или «Введите имя», или что то еще, то вы задаёте это здесь.
И еще здесь можно поставить галочку на «Use this text as the placeholder of the field».
Эта позволить вам сделать так чтобы внутри вашего поля по умолчанию уже был какой то текст, который исчезает при заполнении. Такая штука называется placeholder (плейсхолдер)
Если есть необходимость проверять поле при помощи плагина Akismet, то ставите галочку напротив «Это поле требует имя автора»
Id attribute и class attribute –здесь можно вписать название класса или идентификатор для данного элемента, после чего вы сможете прописать для него стили в CSS файле вашей темы.
После того, как мы здесь все ввели, нажимаем на кнопку «Insert tag».
Для того чтобы ваши поля находились одно под другим, и между ними было какое-то расстояние, каждый из этих шорт-кодов я советую оборачивать в тег

.

Добавление и настройка поля e-mail в Contact Form 7

Поле e-mail выглядит абсолютно точно так же, как и поле текст, единственное его отличие заключается в том, что на этапе отправки формы, когда проверяется корректность введённых данных, используются другие правила проверки этого поля, т.е. какие угодно данные мы уже не можем сюда вводить, нужно обязательно чтобы данные были на английском языке, с символом «@» и с нормальным адресом почтовой службы
Для его добавления щёлкаем по кнопке «email» на панели генерации полей.

Здесь настройки абсолютно точно такие же, как и для поля «text». Задаете нужные настройки и жмете «Insert tag».

Добавление и настройка полей URL и tel

Следующее два поля «URL» и «tel» выглядят также, как и предыдущие два. Единственное отличие заключается в правилах при проверке этих полей на корректность введенных данных, т.е. такая же история, как с полем e-mail.

URL – служит для ввода адреса сайте
Tel – используется для ввода номера телефона
Добавление и настройка происходит так же как и у предыдущих полей.

Добавление и настройка поля number

Следующее поле – поле «Number» -это поле отличается от остальных тем, что в него вводятся числовые данные, и эти данные пользователь может изменять путем нажатия на специальные стрелочки, вверх и вниз.

Для его вставки нажимаем на кнопку «Number» на панели генерирования полей.
У него уже немножко другие настройки:
Field type –у нас возможны два варианта: spinbox и slider.
Spinbox – представляет собой поле со стрелочками вверх и вниз.
Slider – выглядит как ползунок и почему то работает некорректно. Возможно в следующих версиях плагина это поправят :)

Здесь можно выставить значение по умолчанию, а также минимальное и максимальное значение поля. Такое поля удобно использовать для выбора количества.

Добавление и настройка поля date

Данное поле предназначено для ввода даты в определенном формате.
Генерируется оно, так же как и остальные, но изначально оно представляет собой просто обычное пустое поле, в которое нужно вводить дату в определённом формате, что не очень удобно для посетителя сайта.

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

Добавление и настройка Drop-down Menu

При помощи данного поля мы можем создавать и настраивать выпадающие списки в Contact form 7. Для его добавления нажимаем на кнопку с его названием.

Для данного поля доступны следующие настойки:

Field type, Имя, Id attribute и Class attribute – настраиваются так же как и для остальных полей Contact form 7.
Options – здесь нам нужно будет ввести все варианты, которые будут отображаться в выпадающем списке. При этом каждый вариант вводим с новой строки. Например, если я делаю форму с которой можно заказывать услуги, я напишу здесь перечень услуг.
Allow multiple selection – если поставить здесь галочку, то у вас получится выпадающий список, который всегда находится в развёрнутом состоянии и не сворачивается (странновато выглядит, если чесно).
Insert a blank item as the first option — этот параметр вы можете выбирать тогда, когда вам нужно, что бы по умолчанию первый выбранный пункт был у вас пустым.
После того как все настройки заданы нажимаете «Insert tag». И сохраняете форму.

Добавляем и настраиваем checkboxes

Данное поле предназначено для того чтобы пользователь мог отмечать галочками нужные ему значения.

Генерируется аналогично предыдущим.
Из настроек нужно обратить внимание на пункт «Options» в котором нам нужно ввести значения подписей для элементов checkbox при этом
Генерируются они следующим образом. Нажимаем на кнопку «Check Boxes». И дальше в поле «Options» нам нужно привести значение наших чек-боксов, при этом каждое значение должно стоять с новой строки.

Put a label first, a checkbox last – позволяет разместить сначала текст подписи, а потом уже сам checkbox. Если у вас в форме используется выравнивание по правому краю, то можно воспользоваться этой настройкой. В остальных случаях от неё не много пользы.
Wrap each item with label element – позволяет обернуть каждый checkbox в тег . Это нужно в том случае, если вы хотите чтобы ваши checkbox размещались не в строку а в столбик. Правда для этого помимо этой опции нужно ещё прописать некоторый код в файл стилей вашей темы.
А вот и этот код:

Make checkboxes exclusive – поставив галочку возле этого пункта вы не сможете поставить галочку в форме больше чем у одного элемента (по умолчанию можно выбирать сколько угодно элементов)

Добавляем и настраиваем radio buttons

Данные элементы формы очень похожи на checkbox, но они сделаны в виде кружочков и за раз вы можете выбрать только один из этих кружочков.

Эти элементы удобно использовать для переключения между способами оплаты и доставки и так далее.

Добавление кнопки отправки и настройка отправки сообщения

Теперь добавим кнопку отправки сообщения, для этого на панели генерирования тегов нажмём кнопку «submit»
У этого элемента минимум настроек.

Теперь для того чтобы поля заработали нам необходимо перейти на вкладку «Письмо»
И настроить само тело письма, чтобы мы могли получать на свой почтовый ящик те данные, которые буде водить пользователь в сгенерированные нами поля.
Если этой настройки не сделать, то вы будете получать пустое письмо.
Для этого в поле «Message Body»
Вписываем и подписываем шоткоды всех полей, которые мы негерировали.
Список этих шоткодов находится в верхней части вкладки. Должно получиться как на скриншоте, но только с Вашими значениями щоткодов и подписей к ним.

Также не забудьте изменить значение поля «From».
Для нормальной работы оно должно быть заполнено так: impuls-web.ru wordpress@impuls-web.ru
Только вместо «impuls-web.ru» — название вашего домена.
Также не забудьте указать тему письма и там где «Reply-To:» подставить шоткод поля, которое вы генерировали для ввода е-mail. Если вы не генерировали этого поля, то можно оставить как есть.

Теперь можно всё это сохранить, обновить страницу с формой и проверить её работу.
Надеюсь, что у вас всё работает!

Помимо полей, рассмотренных в данной статье, в Contact form 7 есть ещё несколько, которые можно использовать для защиты от спама и для отправки файлов. Более подробно об этом вы можете прочитать в этой статье.

Видеоинструкция

Если у вас остались вопросы, то посмотрите видеоинструкцию, в которой я показываю как всё это делается.

Если данная статья была Вам полезна, то оставляйте комментарии и подписывайтесь на обновления блога.
Желаю удачи в создании и настройке форм для вашего сайта! До новых встреч :)