Контактная форма – Как сделать форму обратной связи на сайте на примере с инструкцией

Содержание

10 критериев идеальной контактной формы для сайта

Клиенты не редко задают нам вопрос: «Если мы установим на сайте онлайн-чат, имеет ли смысл отказываться от контактной формы?» Сегодня мы решили подробно остановиться на особенностях контактной формы и задачах, которые она выполняет, а также рассказать о критериях, которым этот инструмент должен соответствовать.

Контактная форма или чат?

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

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

Но есть группа посетителей, которые привыкли пользоваться формой из раздела «Контакты», и это нужно учитывать.

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

landing

Третья группа веб-ресурсов, которым необходима контактная форма, – это посадочные страницы, так называемые лендинги.

Функции формы обратной связи

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

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

Контактная форма может стимулировать конверсию и, напротив, негативно влиять на ее показатели. Форма должна быть простой, удобной и приятной для взаимодействия – тогда ее КПД будет максимально высоким. Есть, как минимум, 10 критериев, по которым можно оценить эффективность контактной формы.

10

1Заголовок

Он должен быть кратким и понятным, чтобы посетитель сразу понял, чего вы от него хотите. Комплименты и прочие витиеватости в данном случае неуместны.

2Информативность

Этот критерий вытекает из предыдущего. Чтобы контактная форма была информативной, вы должны обозначить в ней 2 основных пункта:
- Что должен сделать пользователь: ввести e-mail, оставить номер телефона и т.д.
- Что он получит в итоге: сообщение зарегистрировано, ответ придет на электронную почту, ему перезвонят и т.д.

3Краткость

Пользователи не любят длинные формы. Не просите их зарегистрироваться на сайте, придумать и подтвердить пароль, подтвердить адрес электронной почты. Лишние действия отпугнут посетителей, поэтому используйте для них другие инструменты./>/> В идеале в форме должно быть 3 строки: имя, электронный адрес, само сообщение. Можно добавить к ним телефонный номер, но не помечать его красной звездочкой как строку, обязательную к заполнению.

4
Заголовки над полями

Оформляйте контактную форму так, чтобы заголовки были над каждым полем. Существует технология исследования eye tracking, которая показывает, что такая компоновка текста работает эффективнее, чем заголовки с выравниваем по правому краю или заголовки, расположенные слева от поля.

5Подсказки

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

6Работа с ошибками

Если пользователь ошибся в букве или цифре при введении электронного адреса, система обычно пишет, что при заполнении формы допущена ошибка, но не указывает, где именно. />/> Посетителей это раздражает, потому что им приходится заполнять форму повторно. Желательно сразу указать на ошибку, например, введен некорректный e-mail, выделить ее цветом и предложить исправить только это поле.

7Юзабилити

Желательно, чтобы заполняемое поле подсвечивалось другим цветом. Это позволит пользователю быстрее сориентироваться, если он отвлекся от заполнения формы. Подсветку можно заменить автоматическим размещение курсора в поле для заполнения.

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

Идеальным с точки зрения юзабилити считается текст высокой контрастности. Классический пример такого текста – черный шрифт на белом фоне. Чем ниже контрастность, тем сложнее взаимодействовать с текстом.

8Мобильность

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

9Откажитесь от капчи

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

Если вы все же используете капчу, упростите по максимуму символы – пусть это будут простые слова на русском языке или галочка в поле «Я не робот».

10Благодарность

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

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

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

cat

P.S.

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

276 629 сайтов доверяют JivoSite

JivoSite помогает превратить посетителей сайта в покупателей. Установите JivoSite сегодня и получите месяц Профессиональной версии бесплатно по промокоду BLOG2019

Установить JivoSite сейчас!

Дизайн контактных форм: 40+ оригинальных примеров

Редко какой веб-сайт обходится без формы контактов. И пускай форма для контактов — не первая страница сайта и не самый важный элемент дизайна, но все же именно этот элемент играет важнейшую роль в процессе взаимодействия пользователя с сайтом (и, соответственно, собственно с компанией-владельцем). Форма контактов должна быть предельно проста, прозрачна, удобна и функциональна. При этом —  броская и оригинальная (чтобы запомниться и не заскучать). Да, эти принципы всем известны. Но, согласитесь, иногда придумать что-то новое  - не так то и просто. Предлагаем вашему внимания подборку сайтов с интересным и простым решением формы контактов. 

1. Aterlier Detour 

Здесь форма контактов помещается в нижней части страницы при нажатии кнопки «связаться».Конструкция выглядит оригинально, особенно если сравнивать с другими подобными контактными формами. 

2. Try Triangle

Почему бы не оставить свои контакты на бумаге, как в старые добрые времена? Лаконично и понятно. 

3. Asvalia

Форма контактов в виде открытки — оригинально и броско. 

4. Фото Marcol

Творческое решение, которые создается с помощью использования оригинального шрифта. Имитация доски объявлений  - заметно, ярко и приятно взгляду. 

5. Square 1 Media

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

6. Stan Gursky

Оригинально. Согласитесь — напоминает чем-то наш рабочий стол.

7. Ctrln

Приятный внешний вид формы контактов настраивает на семейно-дружную атмосферу. Почтовый красный ящик — аллюзия к переписке по почте. 

8. Denise Chandler

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

9. Carsonified

Простой, несложный дизайн формы контактов, и к тому же — аллюзия к переписке с живым человеком (портрет) 

10. David Hellmann

Привычно и легко — напишите письмо и подпишите конверт. Всю информацию доставят адресату. 

11. Step2reality

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

12. Xruiz

Творческий дизайнер как и полагается разработал эту визуально привлекательную форму контактов — ненавязчивую, но интересную.

13. Silly Poems

Нет больших изображений, ни типографических элементов, а простая форма контакта с красивым и простым фоном, и этого, конечно, достаточно, чтобы захватить внимание.

14. Fseid

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

15. La Masa Mimatta

Несколько таинственная но привлекательная форма контактов, которая не требует много информации, чтобы отправить запрос к веб-мастеру. Между тем — имитация живого общения в письмах. 

16. Fundo Лос Paltos

Контактная информация также предоставляется в том случае, если вы хотите связаться с ними по телефону или факсу наряду с электронной почтой. Очередной вариант псевдо «обмена контактами» с пользователем. 

17. Five Cent Stand

Очень динамичная форма контактов с массой интерактивных элементов для создания пользовательского интереса  веб-сайта. Есть чему удивиться.

18. Red Bull Soapbox Racer

Случайная и непритязательная форма контактов, которая отличается от всех других форм в этой подборке. Имитация живово общения в формате писем. 

19. Camping ilfrutteto

Этот контакт —  простота в лучшем виде, легкость и свежесть.

20. Svn2ftp

Свежий подход к дизайну контактной формы. Некоторые элементы оживляют вебсайт, способстуют взаимодействию пользователя со страницей.

21. Just Dot

Вы просто должны перейти к нижней части веб-страницы, чтобы найти эту прекрасную форму контактов.

22. In my Bubble

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

23. Harmony Republic

Простой и чистый дизайн, и в тоже время алюзия к газетному объявлению.

24. Corvusart

Красивое сочитание цветов, предельная ясность  и четкость. При этом — отсутствие навязчивости. 

25. Rescueseo

Эта контактная форма работает вместе с определенным SEO пакетом, который вы выбираете, тем самым упрощая задачу пользователя объяснить, что именно он хочет получить от компании. 

26. Reverend Danger

Одно из правил создания контактных форм — придерживаться стилистики сайта. Для этого ресурса  - даже больше — придерживаться тематики сайта. При этом простая и несложная контактная форма не заставит вас долго мучиться над заполнением полей.  

27. Webfoo London

Новый и инновационный подход размещения контактной формы —  в верхней части веб-страницы, подчеркивая тем самым его важность.

28. Melonfree

Melonfree использует концепцию минимализма, сохраняя простой, но привлекательный дизайн. А фигурки дизайнера и разработчика напоминают, что это не абстрактный сайт, который спрашивает ваши контактные данные «для галочки», а компания действительно заинтересована в связи с пользователем. 

29. Hit Digital 

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

30. Zeropixel

Zeropixel контактная форма несколько отличается от других особенно в плане разработки и использования цвета.

31. 1minus1

У сайта 1minus1 нет отдельный контакт-страницы, но, скорее, контактные формы выглядят как вспывающие окна на экране при нажатии кнопки «контакт» .

32. Syropia

Syropia также использует концепцию «почтовый конверт», правда разрабатывает ее совершенно по своему. 

33. Agencyp

Кажется форма  контактов на этом сайте ничем не отличается от другихб но это не так.  Присмотритесь внимательнее.

34. Freestyle Night

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

35. Ultranoir

Связаться с нами? Что может быть проще — наберите телефонный номер и с вами пообщается девушка с приятным голосом. По меньшей мере именно на такую мысль наталкивает контактная форма на этом сайте, и, надо признать,  располагает оставить свои координаты. Очередной раз убеждаешься — психология в создании сайта играет не последнюю роль. 

36. CPLX

Отправка сообщений в облака. В стиле этого проекта, а, главное — непринужденно и со вкусом. 

37. Bio-Bak 

Пожалуй самая необычная и причудливая контактная форма. Проще заглянуть на сайт и все увидеть воочию. Скажу только одно: контактная форма вполне в стиле сайта и его названия.

38. Lunalunerafestival

Напишите ваше сообщение на бумаге, заполните имя и электронный адрес в конверт и отправьте письмо  веб-мастеру. Разве это не интересно?

39. ElectricPulp

В дополнение к контактной форме, на этом сайте представляется и другая информация от компании, такая ​​как номер телефона и адрес электронной почты,  чтобы пользователь мог связаться с компанием напрямую. Таким образом — это как будто диалог в контактной форме — мы вам свои контакты, а вы нам — ваши. 

40. Fabric Adecaricaturas

Уродливая карикатура в контактной форме — для  этого сайта весьма уместный штрих, который завершает рисунок сайта  и демонстрирует элемент игры. 

41. Z-Index Media

Концепт письма весьма охотно эксплуатируется в создании контактных форм. Это и не удивительно, ведь фраза «отправить письмо» даже у продвинутого юзера все равно ассоциируется с почтовым письмом.

42. Social Snack

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

 

43. World-Arcade

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

Автор - 1stwebdesigner

Перевод — Дежурка



Комментарии

Оставить ответ

Похожие статьи

Случайные статьи

Как быстро и просто создать контактную форму на сайте

Современный сайт невозможно представить без формы обратной связи. Это неотъемлемая часть должна присутствовать на любом сайте, независимо от его тематики. Контактная форма позволяет вебмастеру полноценно общаться со своими посетителями, при этом не публикуя в свободном доступе своих данных, таких как e-mail или номер телефона.

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

Какие задачи решает контактная форма на сайте?  

Тем не менее, спокойствие веб-владельца – это не единственная задача, с которой успешно справляется контактная форма. Ей удается достаточно успешно осуществлять еще несколько функций. Самыми важными из них можно назвать:

  1. Поддержание контакта с аудиторией сайта. Вряд ли кто-то будет спорить с тем, что просто так заполнять форму обратной связи никто не будет. Скорее всего, у человека, который идет на это, возник какой-то вопрос, который он бы хотел задать лично автору сайта. В итоге владелец сайта уже получает заинтересованного пользователя, а может быть даже и потенциального клиента, который поделился своими контактными данными. То есть дальше уже все будет зависеть от владельца сайта.
  2. Призыв к действию. Что такое призыв к действию и как он подталкивает пользователей к выполнению различных действий, пояснять не нужно. Но именно его можно связать с контактной формой на сайте. Например, в обмен на контактные данные пользователя, ему можно предложить закрытую рассылку с полезными материалами, скидку на покупку в интернет-магазине, участие в розыгрыше призов и т.д. Такие призывы могут не только помочь в сборе базы контактов для дальнейшего взаимодействия, но и привлечь новых потенциальных клиентов.
  3. Оживление страниц при помощи интерактивных форм. Контактные формы могут быть не только статичными. Всплывающие формы, хоть и кажутся многим пользователям сайтов навязчивыми, могут вполне «оживить» страницы сайта. Главное, при создании таких форм – не перестараться.

Как обзавестись контактной формой?

Снабдить свой сайт подобной формой несложно. Контактная форма html, которая имеет всего несколько полей – вполне решаемая задача для профессиональных фрилансеров, которые за небольшую сумму смогут ее сделать. Кроме того, код контактной формы можно найти и самостоятельно в интернете. Но вот только у таких методов есть немало недостатков. Дело в том, что такая интерактивная форма – это лицо сайта, а значит, она должна быть привлекательной. Что делать если в ней что-то не будет устраивать, особенно спустя какое-то время? Где искать того разработчика, который писал код формы, чтобы он внес нужные изменения? А если отправка формы php найдена на просторах глобальной сети, а навыков в программировании нет, то изменение формы кажется вообще делом невозможным.

Кроме того, контактная форма должна работать как часы, ведь все отправленные сообщения должны дойти адресату, а не потеряться по пути. Представьте, если крупный заказчик отправил через форму обратной связи предложение о сотрудничестве, а автор сайта и ли менеджер интернет-магазина его не получил? Наверное, не нужно объяснять, что повторно отправлять свое предложение он не будет, а уйдет к конкурентам, у которых контактная форма работает как нужно. Все это чревато потерей не только денег и клиентов, а и репутации, что в конечном итоге может быть еще хуже.

FormDesigner – идеальное решение для создания контактной формы

Благодаря использованию онлайн-конструктора форм FormDesigner создать свою интерактивную форму обратной связи стало просто, как никогда. Во-первых, это быстро, всего несколько кликов и форма готова для размещения на сайт. Во-вторых, работать с конструктором неимоверно просто, для этого не нужно быть программистом или иметь специальные навыки или знания. Форма отправки email благодаря конструктору будет создана даже начинающим вебмастером благодаря понятному и простому интерфейсу. В- третьих, в уже созданную форму всегда можно внести изменения в соответствии с новыми пожеланиями или необходимостью. Редактировать форму также просто, как и создавать новую, а благодаря отображению изменений в онлайн-режиме можно сразу видеть все изменения, которые вносятся в форму. Помимо этого, сайт FormDesigner.ru предоставляет и другие преимущества для пользователя, среди которых:

  • Создания контактных форм с возможность отправлять файл владельцу сайта;
  • Сообщения об ошибках при создании форм;
  • Возможность создания мультиязычных форм;
  • Визуальный дизайнер создаваемых форм;
  • Подробная статистика по всем заявкам и многое другое.

Работа с сервисом FormDesigner

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

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

Создание контактной формы для сайта

Второй раздел «Элементы» необходим для того, чтобы можно было добавлять, удалять или просто редактировать поля для заполнения. Их можно сделать не просто текстовыми, но и цифровыми и даже с изображениями. Также в этом разделе есть возможность установить кнопки социальных сетей.

Создание контактной формы html

После этого остается только получить код собственноручно подготовленной формы связи и установить на его сайте.

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

Настройка дизайна контактной формы на сайт

Отдельно стоит отметить, что если при работе с сервисом возникнут вопросы, то можно смело обращаться к технической поддержке, которая поможет решить возникшие проблемы. Начать использовать онлайн-конструктор можно абсолютно бесплатно, при этом получив доступ ко всем наиболее важным функциям онлайн конструктора. С использованием сервиса FormDesigner создание собственных веб-форм для сайта становится неимоверно простым и быстрым.

Видео урок по созданию контактной формы на сайте

Contact Form 7 начало — создание и настройка форм

Контактная форма - неотъемлемый атрибут большинства сайтов. Именно поэтому в каталоге WordPress так много плагинов для контактных форм. Один из самых популярных - это Contact Form 7. Плагин позволяет создавать формы любых видов; очень гибок и удобен в настройке; развивается уже много лет и содержит много наработок.

Создание и показ контактных форм

Создание форм в админке

После установки плагина появится пункт меню "Contact Form 7", через который можно создавать и удалять формы.

Форма на картинке создана при активации плагина автоматически.

Используем форму по умолчанию, для этого создадим страницу "Связаться со мной" и вставим туда шорткод формы.

меню
Лицевая часть сайта

А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):

На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).

Настройка формы (создание сложных форм)

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

В верхнем поле - название формы (его видно только в админке), указываем понятное для себя название, например: "Отзыв о сайте", "Форма заявки на работу", "Форма обратной связи" и т.п.

Под заголовком - шорткод. Его используем в записях, для вывода формы.

И ниже - четыре вкладки:

  1. Шаблон формы
  2. Письмо
  3. Уведомления при отправке формы
  4. Дополнительные настройки

Рассмотрим каждую вкладку отдельно.

меню

Шаблон формы

В этой вкладке можно настроить поля и внешний вид формы. Рабочей областью является HTML редактор WP. Только вместо привычных кнопок мы видим кнопки вставки разных полей формы.

Вёрстка формы

Для верстки можно использовать html-теги и шорткоды плагина. Шорткоды добавляют поля формы, а html теги позволяют создать произвольную HTML структуру. К примеру, наша дефолтная форма выглядит так:

<label> Ваше имя (обязательно)
	[text* your-name] </label>

<label> Ваш e-mail (обязательно)
	[email* your-email] </label>

<label> Тема
	[text your-subject] </label>

<label> Сообщение
	[textarea your-message] </label>

[submit "Отправить"]

А при отображении в записи она превратится в такой HTML:

<div role="form" lang="ru-RU" dir="ltr">
	<div></div>
	<form action="/contacts/#wpcf7-f5-p6-o1" method="post" novalidate="novalidate">
		<div>
			<input type="hidden" name="_wpcf7" value="5">
			<input type="hidden" name="_wpcf7_version" value="4.6">
			<input type="hidden" name="_wpcf7_locale" value="ru_RU">
			<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f5-p6-o1">
			<input type="hidden" name="_wpnonce" value="6947975280">
		</div>
		<p>
			<label> Ваше имя (обязательно) <br>
				<span>
					<input type="text" name="your-name" value="" size="40" aria-required="true" aria-invalid="false">
				</span>
			 </label>
		</p>
		<p>
			<label> Ваш e-mail (обязательно) <br>
				<span>
					<input type="email" name="your-email" value="" size="40" aria-required="true" aria-invalid="false">
				</span>
			</label>
		</p>
		<p>
			<label> Тема <br>
				<span>
					<input type="text" name="your-subject" value="" size="40" aria-invalid="false">
				</span>
			</label>
		</p>
		<p>
			<label> Сообщение <br>
				<span>
					<textarea name="your-message" cols="40" rows="10" aria-invalid="false"></textarea>
				</span>
			</label>
		</p>
		<p>
			<input type="submit" value="Отправить">
			<span></span>
		</p>
		<div></div>
	</form>
</div>
меню
Синтаксис шорткодов

Давайте кликнем по кнопке «Текст». Открывается окно, где мы можем указать атрибуты текстовому полю. Указываем и жмем "Вставить тег".

Тег [text* your-name] в последствии будет преобразован в текстовое поле с html кодом:

<span>
	<input type="text" name="your-name" value="" size="40" aria-required="true" aria-invalid="false">
</span>

Шорткоды можно удобно создавать через конструктор шорткодов.

Но конструктор не дает возможность изменить шорткод (там можно только создать шорткод). Изменить шорткод можно двумя способами:

  1. удалить и создать с помощью конструктора новый.
  2. изучить синтаксис и исправить шорткод поля вручную.

С конструктором вы и сами разберетесь.

А тут мы разберем синтаксис шорткода.

Для примера рассмотрим тег текстового поля с дополнительными опциями:

[text* client-name id:my-id class:my-class placeholder "Введите имя"]
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
  • Произвольный тип поля

Шаблон письма

Во второй вкладе можно тонко настроить шаблон (вёрстку) и свойства отправляемого письма. В полях данной вкладки можно использовать специальные теги полей формы - это дает возможность передавать в письме указанные в форме данные.

Теги состоят из имен полей из шаблона формы. Например, мы создали текстовое поле с именем: [text fio]. Теперь в шаблоне письма можно использовать тег [fio]. В письме вместо этого тега будет подставлено значение поля, введенное пользователем (ФИО).

Заголовки письма:
  • Кому - электронный ящик, куда будет отправлено письмо. Можно указать сколько угодно ящиков через запятую.

  • От кого - имя и электронный ящик, от кого пришло письмо. Обычно тут указывается почта сервера (например [email protected]).

    Можно указать любую почту, но если домен почты будет отличаться от домена сайта - форма не пройдет проверку и будет «ругаться» на этот параметр, хотя письма всё равно будут отправляться.

  • Тема - Заголовок письма. По нему будет понятно с какой формы были отправлены данные. К примеру, тема письма "Ошибка на сайте", "Заказ обратного звонка" и так далее. Выбираете такой заголовок, чтобы проще было работать с полученными письмами.

  • Дополнительные заголовки - По умолчанию тут прописано Reply-To: [your-email]. Заголовок Reply-To говорит нам, что на этот электронный ящик можно ответить нажав кнопку "Ответить" в почтовой программе, а тег формы [your-email] - это имя поля из шаблона. Указанный пользователем email будет вставлен вместо этого тега. Получится что-то типа Reply-To: [email protected].
Тело письма

Это следующая важная часть данной вкладки. Тут указывается сам текст письма. В тексте используем всё те же теги формы (имена полей из шаблона формы).

Разберем дефолтное письмо:

От: [your-name] <[your-email]>
Тема: [your-subject]

Сообщение:
[your-message] 

--
Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)

У нас было 4 поля, которые заполнял пользователь. После отправки письма теги превратятся в значения и мы получим такое письмо:

От: Дмитрий <[email protected]>
Тема: Вопрос про Contact Form 7

Сообщение:
Привет! У меня возник вопрос по плагину Contact Form 7. Как его настроить?

--
Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)

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

Не обязательные поля в теле письма

Если юзер не заполнит поле, а оно используется в теле письма, то тело письма будет неполным. К примеру в теле написано Человек с города [city], но юзер не заполнил поле [city], а значит в письме мы получим Человек с города ... Такая строка в письме лишняя. Чтобы убрать эту строку из письма, поставьте галочку на пункте "Исключить вывод строк с пустыми тегами сообщения". Обратите внимание, что это сработает только тогда, когда текст и шоткод поля находятся в одной и той же строке.

Опция "Использовать HTML-формат письма". Позволяет использовать в теле письма HTML теги. При этом можно использовать ограниченный список HTML тегов, потому что не все почтовые клиенты или сервисы умеют правильно обрабатывать сложную HTML разметку. Можно использовать: таблицы, маркированные списки, жирность, абзацы и так далее. Подробнее ищите в сети.

Contact Form 7 позволяет отправлять письмо на два адреса, причем настройки для каждого письма разные. Это может пригодиться, когда надо отправить администратору сайта письмо с полной информацией и дубликат менеджеру, где содержится только данные о заказе.

меню

Уведомления при отправке формы

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

Теги шаблона письма не работают в этих полях.

Дополнительные настройки

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

Об использовании данного функционала я расскажу в отдельной статье.

Настройка Contact Form 7

По просьбам читателей WordPress-book.ru привожу подробную инструкцию по настройке плагина формы обратной связи - Contact Form 7. Плагин часто обновляется, подавляющее большинство материала в сети по его настройке уже устарело, и, следовательно, пост будет актуален.

Контактная форма для WordPress

Повышенный интерес к расширению не случаен:

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

Содержание:

 Добавление простой контактной формы на сайт

Настройка Contact Form 7

Ошибка при отправке сообщения. Попытайтесь позже или обратитесь к администратору сайта.

Я уже писал про подобный и очень простой Плагин формы обратной связи WP-ContactForm. Но, к сожалению, по сравнению с Contact Form 7, его возможности слишком ограничены, поэтому пришлось от него отказаться в пользу последнего.

Итак, начнем. Скачать плагин можно с его страницы официального депозитария WordPress здесь. После стандартной процедуры установки и активации, в левой части панели администратора появится новая вкладка – "Contact Form 7". Если навести на нее курсор, откроются три ссылки - "Формы", "Добавить новую" и "Integration".

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

Добавить новую форму в Contact-Form-7

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

После нажатия вышеуказанной кнопки откроется уже готовая стандартная форма обратной связи, которая подойдет для большинства сайтов и блогов. Она включает в себя поля - "Ваше имя", "Ваш Email", "Тема", "Сообщение" и кнопку "Отправить".

Форма контактов в Contact-Form-7

Обратите внимание, все шорткоды и их названия заключены в тэги <p>…</p>. Тэг <p> определяет текстовый абзац, а <br/> отвечает за перенос строки.

  1. В это поле введите название своей новой контактной формы, например - "Моя форма контактов".
  2. Нажмите кнопку "Сохранить".
  3. После последнего действия будет доступен код формы. Просто скопируйте его и вставьте в то место страницы или записи, где должна быть ваша контактная форма.

Вот как она будет выглядеть на странице сайта.

Стандартная контактная форма

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

Настройка Contact Form 7

Тут нам придется разобраться в четырех вкладках - "Шаблон формы", "Письмо", "Уведомления при отправке формы" и "Дополнительные настройки". Рассмотрим каждую в отдельности.

Шаблон формы

Пожалуй, самая важная из вкладок настроек плагина. Шаблон формы представляет из себя редактор кодов плагина. Тут уже находятся существующие короткие коды стандартной контактной формы. Можно их удалять или добавлять новые. Рассмотрим назначение всех кодов, доступных в редакторе.

Тэги Contact-Form-7

1. text - текстовое поле для ввода короткого текста в одну стоку (имя, тема сообщения и т.д.).

2. email – поле для ввода адреса email. Письмо с некорректным адресом не удастся отправить, именно этим и отличается поле от простого текстового. (Оба этих поля обычно обязательны к заполнению, что исключает рассылку анонимных сообщений).

3. URL - адрес сайта или страницы.

4. tel - номер телефона, не надо объяснять что это такое.

5.1 number - число (spinbox), количество чего-либо, например заказываемого товара.

5.2 number - число (slider), что это за шляпа, я так и не понял. Скажу спасибо тому, кто мне объяснит в комментариях его назначение.

6. date  - дата в формате дд.мм.гггг.

7. text area - текстовое поле, вмещает в себя текст большого объема, собственно само сообщение.

8. drop-down menu -  выпадающее меню, создаст выпадающее меню.

9. Checkboxes – генерирует "чекбоксы". Пользователь выбирает нужное установкой галочек.

10. Radio buttons – в буквальном переводе "радиокнопки". Настройка, как и в выпадающем меню. Пользователь выбирает нужный вариант из предложенных.

11. Acceptance – по принципу "С правилами ознакомлен и согласен". Пока пользователь не поставит галочку, кнопка отправки сообщения будет не активна.

12. quiz - вопрос, защита от спам-роботов. Перед отправкой сообщения необходимо ответить на однозначный вопрос, который вы зададите в настройках. Перед вертикальным слешем пишется вопрос, а за ним правильный ответ.

13. reCaptcha – тоже защита от спама, но с помощью генерируемой картинки с символами, которые необходимо ввести в поле перед отправкой сообщения. (Спам через контактную форму рассылается очень редко. Советую не использовать защиту, чтобы не раздражать отправителя).

14. file - отправка файла, генерирует код для создания кнопки выбора файла и прикрепления его к письму.

15. submit - кнопка отправки, сама кнопка, нажатием на которую, сообщение отправляется.

!!! Для наглядности, ближе к концу статьи, я размещаю форму, созданную из всех вышеперечисленных тегов, кроме каптчи. Можете оценить их в действии. Ни одно поле в форме необязательно к заполнению! Разрешаю вам наслать мне разных анонимных сообщений 🙂 🙂 :-). Цензура отсутствует.

Для примера рассмотрим процедуру добавления кода прикрепления файла "file" в контактную форму. Процесс этот довольно прост. Выполните следующие действия:

  • - Поставьте курсор в то место редактора, куда должна встать кнопка прикрепления файла к письму.
  • - Нажмите на кнопку "file" в верхней панели редактора шаблона формы. Откроется следующее окно.

добавление кнопки прикрепления файла к письму в контактной форме

  1. Если поставить тут галочку, пользователь не сможет отправить сообщение без прикрепленного файла. Обратите внимание, в коде кнопки за file появится звездочка. Эту опцию можно назначить любому полю вашей контактной формы.
  2. Тут итак все понятно. Скопируйте надпись в этом поле, вам она обязательно понадобится на следующей вкладке "Письмо". Иначе прикрепленный файл просто не дойдет до адресата.
  3. Сюда впишите разрешенный размер файла. Если оставить поле пустым, то по умолчанию ограничитель будет равен 1 mb . Допускается вписывать только целые числа просто в байтах, в mb или в kb.
  4. Разрешенные типы файлов вписывайте через вертикальный слэш. Если ничего не писать, то по умолчанию будут разрешены файлы с расширениями jpg, jpeg, png, gif,pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, wmv.
  5. Если не знаете для чего нужны поля Id attribute и Class attribute, то и заполнять их не следует. А завершающим действием останется только нажатие кнопки "Insert Tag".

В редакторе формы можно дописать над кодом "Прикрепить файл", чтобы посетители не ломали голову о назначении этой кнопки. И не забудьте вставить теги абзаца и переноса строки, о которых я упоминал выше.

Приступим к рассмотрению следующей вкладки - "Письмо".

Письмо

Итак, после создания своей контактной формы перейдите на вкладку "Письмо". Эта часть настроек отвечает за доставку, внешний вид и информативность писем, пришедших адресату, то есть Вам.

Настройки вкладки "письмо" в Contact-Form-7

  1. Обязательно впишите сюда адрес своей электронной почты, на который будут приходить сообщения. Иначе, почта просто не дойдет.
  2. Два коротких кода "[your-name]" и "<[your-email]>" сообщат имя отправителя и его E-mail.
  3. Тема сообщения, с которой к вам обращается посетитель.
  4. -----
  5. Само тело сообщения. Вы можете использовать для информативности любые коды, которые использовали в шаблоне (они представлены в шапке вкладки, сразу под надписью "In the following fields, you can use these mail-tags:". Сопровождайте коды в теле сообщения понятными пояснениями, например От кого, Тема сообщения, Тело сообщения.
  6. Можно не получать пустые строки с полей, необязательных к заполнению, если отправитель их не заполнил. Попробуйте также опцию HTML  формата письма.
  7. В поле "File Attachments" обязательно вставьте код для вложения, если вы поставили кнопку прикрепления файла. Об этом я говорил выше.
  8. Опцию "Письмо 2" активируют в качестве дополнительного почтового шаблона для автоответчика. Об этой опции и как ей пользоваться я напишу немного позже.

Уведомления при отправке формы

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

С переводом на русский язык тут пока проблем нет. Однако, с каждым обновлением плагина картина может меняться, как на других вкладках. Если это произойдет, сообщите в комментариях, переведем.

Дополнительные настройки

Эта часть статьи еще не готова к публикации. Скажу лишь, что тут вы можете настроить отслеживание заполнения форм пользователями, например в Яндекс метрике.

Можно еще изменить размер полей в контактной форме. Размер текстового поля в одну строчку задается числовыми значениями в конце тега перед закрывающейся квадратной скобкой. Например, вот тег для имени с новыми размерами -  [text* your-name 50/41]. Здесь 50 - длина текстового поля, а 41 - количество символов, которое можно в это поле прописать. Если ничего не прописывать, длина текстового поля по умолчанию равняется 40, а разрешенное количество символов до бесконечности.

Вот тег с измененными размерами для сообщения -  [textarea your-message 80x10]. Здесь 80 - длина поля в символах, а 10 - его высота в строчках. Экспериментируйте с этими циферками пока размеры полей вашей контактной формы не будут гармонично вписываться в дизайн страницы. Ниже картинка для наглядности со стандартной контактной формой.

Размер полей в Contact Form 7

Вот и все настройки плагина Contact Form 7.


Ошибка при отправке сообщения. Попытайтесь позже или обратитесь к администратору сайта

Ошибка при отправке сообщения

Вот такое сообщение всплывает под формой Contact Form 7 в некоторых случаях после попытки отправить сообщение администратору сайта.

1. Почти всегда ошибка кроется не в плагине, а в php функции mail() сервера. Либо эту функцию хостинг не поддерживает, либо функция не включена или работает с ошибками. Если функция php_mail() поддерживается хостингом, то очень часто причиной сбоя отправки сообщений является:

  • - Тестовый период хостинга. В этот период функция отправки почты выключена по умолчанию. Решение – оплатить услуги хостинга;
  • - Сбой функции на сервере. Решение – обратиться в службу поддержки хостинга. Часто, для восстановления функции, достаточно отлинковать домен, а затем прилинковать его обратно.

2. Намного реже ошибки в отправке сообщений возникают из-за конфликта Contact Form 7 с другим плагином. В этом случае помогает поочередная деактивация плагинов. После деактивации которого Contact Form 7 заработает, тот и является конфликтным.

3. проверяйте папку СПАМ вашего почтового ящика после отправки письма самому себе при тестировании работы плагина. Это самая распространенная причина "недоставки" писем адресату, особенно на gmail.

Contact form 7 recaptcha настройка

Заметил я на днях, что давненько не приходили мне письма с контактных форм от подписчиков и клиентов. После проверки папки «Спам», они все нашлись там. Оказалось, что, с контактных форм начал поступать спам и почтовик, не мешкая, все письма подряд пометил этим страшным ярлыком.

Решение проблемы оказалось до безобразия простым. В своей панели администратора в меню «Contact Form 7» в разделе «reCAPTCHA» кликните по кнопке «Настройки интеграции».

Настройка интеграции в Contact form 7

В поля открывшейся формы введите «Ключ сайта» и «Секретный ключ».

Настройка recaptcha в Contact form 7

Ключи эти получить можно менее чем за минуту и как это сделать я описал в статье «Установка reCAPTCHA на сайт - лучшей капчи от Google».

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

Contact form 7 настройка внешнего вида

Изменить стили Contact Form 7

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

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

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

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

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

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

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

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

Изменить стили формы с помощью Contact Form 7 Style — для ленивых

Скачайте плагин и установите. В меню ‘Contact Style’ нажмите ‘Add New’.

Выберите элемент для стилизации.

Настройки стилизации идентичны для каждого элемента.

choose element state — normal — обычное состояние, hover — вид при наведении

width / height — ширина/высота элемента

background — color — цвет фона, image — картинка в качестве фона, position — положение, size — размер, repeat — повтор

margin / padding — отступы/поля

border — width — толщина границы, style — стиль границы, color — цвет, radius — скругление

position — позиция элемента

Настройки кликабельны и интуитивны, экспериментируйте.

Вы можете смотреть превью во время стилизации. Отметьте вверху страницы контактную форму и нажмите Generate Preview. Область просмотра находится внизу.

Вид формы ‘После’ 5 минут экспериментирования:

Готовые стили для Contact Form 7

Вам неохота морочить себе голову, создавая собственный стиль? Хотя я не рекомендую это, вы можете выбрать уже готовый стиль для вашей формы.

Плагин Contact Form 7 Style содержит несколько предустановленных стилей. Правда они относятся к праздничным событиям.

Для более повседнего использования обратите внимание на плагин Contact Form 7 Skins. Образцы бесплатных скинов вы можете посмотреть здесь //cf7skins.com/skins/styles/

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

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

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

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

Приветствую вас, уважаемый читатель! Сегодня я покажу вам, как создать форму обратной связи с автором сайта/блога в вордпресс, при помощи популярного плагина Contact Form 7 (более 5 млн. установок). В пост включено: правильная настройка Contact Form 7, защита от спама, как изменить и настроить внешний вид формы. А также указал на основные причины — почему не работает и не отправляет письма контактная форма .

Контактная форма является важным средством для поддержки связи со своими читателями и наоборот. Чиркнуть личное письмецо, сделать предложение автору (от которого он не сможет отказаться), задать вопрос, отправить какой нибудь файл и многое другое. Все это возьмет на себя и не разгласит посторонним ценную информацию, наша контактная форма WordPress Contact Form 7. Вот, как то, так. Написал так написал, самому аж понравилось.

О, письмо пришло! Контактная форма 7 молодец

Не буду вас утомлять, уважаемый читатель, всякой писаниной — перейдем к делу. Установка и правильная настройка модуля для Вордпресс — контактная форма 7.

Плагин WordPress Contact Form 7

Плагин для WP Contact Form 7

Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.

Все манипуляции производим в админке вордпресс. Для того, чтобы установить плагинчик, в разделе "Плагины" нажимаем "Добавить новый". Вводим в окошко "Поиска" Contact Form 7. Естественно он отобразится первым. Кликаем кнопку "Установить:

Как установить плагин

После успешной установки не забудьте его активировать. Полдела сделано. Следующий шаг, это — настройка вашей контактной формы.

Contact form 7 настройка

Находим в панели управления появившийся новый раздел "Contact Form 7" — пункт "Контактные формы". На данной странице у вас уже будет готовая по умолчанию форма контактов. С номером 1.

Контактная форма № 1 по умолчанию

Из картинки видно, что по умолчанию представлена стандартный вариант формы для связи и готовый шорткод для вставки на новую страницу, запись или на боковую панель (через текстовый виджет). Contact form 7 внешний вид по умолчанию, установленная на отдельной странице сайта:

Внешний вид: Стандартная контактная форма на сайте WordPress

Если вы хотите просто посмотреть, проверить или изменить, то есть, добавить к ней дополнительные поля, тогда нажмите пункт "Изменить". Скрин выше.

Откроется страница "Редактировать контактную форму". Плагин на русском языке и поэтому вам разобраться что к чему, будет очень легко. Вкладка "Шаблон формы". Вы можете изменить шаблон формы под свои нужды.

Например, чтобы добавить в шаблон формы тег поле для загрузки файла, нужно: Отметить мышкой место для вставки тега (лучше всего после сообщения) и нажать соответствующею вкладку "файл". С помощью этой функции вы можете разрешить пользователям загружать свои файлы через вашу форму, а затем вам будет отправлено электронное письмо с вложениями файлов:

Редактировать контактную форму. Вкладка файл

Откроется окно — Генератор тега формы: файл:

Чтобы прикрепить файл загруженный к почте, вам нужно вставить тег ([file-767])

Контактная форма 7 применяет ограничения по умолчанию для типа файла и размера файла. Когда вы не устанавливаете свои параметры, то по умолчанию расширения файлов являются: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. А допустимый размер файла составляет 1 МБ (1048576 байт). Жмём кнопочку "Вставить тег":

Тег файл вставлен в шаблон формы

Где отметили курсором мышки там и появится дополнительный тег. Если вставился не в том месте, то просто копируете его и помещаете в нужное. Таким же способом добавьте нужные теги в вашу форму. Обязательно после добавления дополнительных тегов нажимайте синею кнопку "Сохранить". А вот так, будет выглядеть кнопка для прикрепления файла к письму, после поля сообщения:

Кнопка Выберите файл в контактной форме

Если всё правильно делаете, то проблем с дополнительными полями, у вас не будет.

Ещё проверьте вкладки Письмо, Уведомления при отправке формы и Дополнительные настройки. По моему там и менять ничего не надо. Если только в Дополнительных настройках можно указать параметр — только для подписчиков — subscribers_only: true . Для подробной информации будет ссылка на страницу настроек дополнительных параметров.

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

Размещаем контактную форму на отдельной странице сайта/блога

После всех настроек и сохранения формы, скопируйте шорткод на странице Контактные формы или Редактировать контактную форму. После этого, создайте новую страницу — раздел Страницы — Добавить новую. Вписываем название страницы, например "Контакты". Переключаем редактор сообщений в режим "Текст" и вставляем шорткод в поле сообщений:

Новая станица с контактной формой

Если у вас новая страница автоматически добавляется в меню, то выставляем "Порядок" 1, 2 или 3 (какая по счету в меню, будет отображаться страница Контакт). Нажимаем кнопку "Опубликовать". Всё. Готово. Так же вы можете добавить страницу в меню вручную. Теперь у вас установлена форма для связи с автором блога/сайта.

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

Получаете спам через Contact Form 7?

Есть защита. Спамеры затрагивают всё, ваши контактные формы не являются исключением. Прежде чем вас заспамят, защитите ваши контактные формы с помощью мощных анти-спам функций Contact Form 7.

Contact Form 7 поддерживает фильтрацию спама с Akismet. Интеллектуальная reCAPTCHA блокирует раздражающих спам ботов. Используя черный список комментариев вы можете также блокировать сообщения, содержащие определенные ключевые слова или отправляемые с определённых IP адресов.

Нажмите пункт "Интеграция". Сервис Google reCAPTCHA защищает вас от спама и других видов автоматического злоупотребления. С модулем интеграции reCAPTCHA Контактной формы 7 вы можете заблокировать форму отправку спам-ботами.

Интеграция Google reCAPTCHA v3: защита от спама

Интеграция плагина с другими сервисами recaptcha

Топчите Setup Integration, а после перейдите по ссылке, чтобы получить ключи ReCaptcha API:

reCAPTCHA — это сервис Google

Чтобы начать использовать reCAPTCHA, сначала необходимо зарегистрировать ваш сайт WordPress. reCAPTCHA — это сервис Google, поэтому для его использования вам необходим аккаунт Google. Войдите в Google, используя учетную запись, и перейдите по ссылке https://www.google.com/recaptcha/admin . Вы увидите простую регистрационную форму, такую ​​как:

Зарегистрировать сайт WordPress. Goodle reCAPTCHA

Укажите название. Выберите reCAPTCHA v3 (для работы reCAPTCHA v3 не нужен виджет CAPTCHA (флажок «Я не робот», используемый в reCAPTCHA v2)) и введите домен сайта в поле Домены. После регистрации сайта вы получите ключ сайта и секретный ключ. Введите их (скриншот выше) и сохраните настройки. Вот и все. Теперь ваша контактная форма используют счет reCAPTCHA, чтобы проверить, была ли отправлена сообщение от человека или от спам-бота.

Если вы решите установить Contact Form 7, то я советую дополнительно к нему установить аддон Contact Form 7 Style. Он позволит вам редактировать внешний вид вашей формы. Вы сможете не только выбрать один из готовых шаблонов, но и создать свой собственный уникальный дизайн. Хотите изменить внешний вид? Тогда продолжение специально для вас, ценителей красоты.

Внешний вид контактной формы — Contact Form 7 Style

Стили для форм обратной связи 7

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

Готовые шаблоны для формы

Пример, я изменил стандартный внешний на такой симпатичный:

Внешний вид формы для связи

Не забывайте, что можно задать свои, пользовательские параметры стиля:

Плагин поддерживает пользовательские стили, которыми можно управлять через админпанель

И в заключение:

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

Почему не работает (не отправляет письма) Contact Form 7?

  1. Проблемы вашего хостинга. Важно отметить, что отправка и получение электронных писем в значительной степени зависит от сервера, на котором размещен ваш сайт WordPress;
  2. Убедитесь, что используется правильный обратный электронный адрес;
  3. Ваше письмо может рассматриваться как спам;
  4. Плагины или тема конфликтует с Contact Form 7;
  5. Конфликты Javascript.

Если вы не можете отправлять электронные письма из этого плагина, вполне вероятно, что вы не можете отправлять электронные письма из WordPress в целом. В случае чего, господа, получить на часто задаваемые вопросы по работе плагина вы можете на странице https://contactform7.com/faq/.

Или на форуме поддержки https://wordpress.org/support/plugin/contact-form-7/ . Английский язык не беда, с переводом любимого браузера будет всё понятно.

На этом у меня всё. Вроде, ни чего не забыл. Всего доброго. Удачи, друзья.

Популярный плагин Contact form 7 не отличается особой красотой своей стандартной формы, по этому для многих пользователей встает вопрос, как изменить внешний вид. Именно этим мы сейчас и займемся, я попытаюсь дать вам универсальный вариант, который подойдет для любого сайта.

Ранее я уже рассказывал о том как установить и настроить Contact Form 7, сейчас не будем об этом говорить, а сразу перейдем к необходимым изменениям дизайна.

Для начала нам нужен доступ к админке и файлу style.css, его можно найти во вкладке «Внешний вид»/»Редактор». По умолчанию, именно нужный файл вам и откроется. Рекомендую открыть несколько вкладок в браузере:

  1. Вкладка Contact Form 7 для правки формы.
  2. Страницу на сайте с формой обратной связи.
  3. Редактор с открытым файлом 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;
>

Теперь разберем все подробнее:

  1. Вначале займемся отступами. Внешние отступы (от края до начала формы) — margin: 5px, внутренние отступы (от начала формы до внутренних элементов) —padding: 10px.
  2. Заливка формы или ее фон определяется свойством background: #B3AFAF, цвет можете подбирать какой угодно, просто заменив значение.
  3. Определяемся с семейством шрифта, если менять не хотите можно не прописывать это правило (font-family: Georgia, «Times New Roman», Times, serif).
  4. Цвет текста определяет свойство 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%;
>

Теперь разберем все поподробнее:

  1. Первый класс к которому мы обратимся name-cf он принадлежит полям с именем и емейлом. Для них задаем отступ в 2px (padding: 2px) и обтекание (float:left), что бы выровнять два поля в один ряд.
  2. Далее подправим ширину полей задав им оптимальный (для моего шаблона) размер в 270px (.name-cf input ). Если у вас поля все еще в одну строчку или же слишком маленький размер, подберите свой вариант.
  3. Поле с названием темы сделаем на всю ширину формы, так как текста там может быть больше (.thems-cf input ). Если вы хотите свое, точное значение укажите его в пикселях.
  4. Следующий блок который мы добавили к форме предназначен для отмены обтекания (.thems-cf input ).
  5. Так же как и в предыдущем случае, поле с текстом сообщения делаем на всю ширину (text-cf textarea ).

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

Выравниваем кнопку «Отправить» по центру, изменяем фон и ширину.

Переходим к нашей кнопке, выровняем по центру и добавим фон:

.submit-cf width: 200px; /*ширина блока*/
height: 25px; /*высота*/
margin: 0 auto; /* Отступ слева и справа */
>
.submit-cf input width: 200px;
background:#96B195;
>

Традиционно объясняю что к чему:

  1. Первым правилом мы определяем ширину и высоту блока в котором будет размещена кнопка и ставим ее по центру формы.
  2. Вторым правилом задаем цвет фона кнопки (background:#96B195, если не указать будет такого же цвета как и все остальные поля), устанавливаем ширину кнопки (width: 200px, желательно что бы была такого же размера, как ширина блока, что бы кнопка не двигалась в стороны).

Сохраняем наши настройки и смотрим что у нас получилось:

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

Надеюсь для вас статья была полезной, если же что-то не так или возникли проблемы оставьте свой комментарий и я постараюсь ответить (подправить).

«>

Рекомендуем к прочтению

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *