Форма обратной связи FormGet Contact Form. Как в форме обратной связи Wordpress передать адрес страницы, с которой отправлено сообщение? Сорванец contact form id
Форма обратной связи присутствует на каждом сайте, это что-то вроде неотъёмная часть веб-ресурса. Поскольку она служит обращением к администратору с каким-либо предложением или претензией в области своих интересов. А такие случаи бывают часто, тем более, если вы являетесь фирмой, организацией или просто частным предприятиям выпускающий какой-то продукт.
Для создания формы обратной связи на WordPress вам не придется самому писать код или заказывать у специалиста его написание. Это уже реализовано и даже неоднократно, все что нужно сделать лишь подобрать плагин, отвечающий вашим требованиям. В статье рассматривается 5 более популярных плагинов, которые пользуются спросом на должном уровне.
Одним из наиболее широко используемых плагинов для создания форм обратной связи является Contact form 7. Он быстро набрал популярность благодаря своей простоте в настраивание содержимым формы. Плюс поддерживает фильтрацию спама и позволяет установить CAPTCHA с помощью дополнительного плагина Really Simple CAPTCHA. Также плагин поддерживает технологию Ajax, что в обработке выполнения запроса веб-страница не перезагружается.
После установки и активации Contact form 7 в панели управления появиться новая вкладка для управления форм. Чтобы найти с ним общий язык долго возиться не придётся, плагин мультиязычный и русский имеется в том числе. Контактная форма стилизуется в зависимости от установленной вами темы, но со знаниями CSS возможно отредактировать на свой вкус.
Пример формы.
2. Form Maker
Form Maker является современным и продвинутым инструментом для быстрого создания форм связи. Он предлагает множество типов полей, установка капчи, шаблоны готовых форм, открытый код для правки стилей и результат можно сразу увидеть в предварительном просмотре. При обретении коммерческой версии будет доступна интеграция с Google Maps, а также поле загрузки файлов. Плагин поддерживает большое количество языков.
Пример формы.
3. Fast Secure Contact Form
Простая и в то же время мощная форма обратной связи имеет ряд положительных функций и настроек. Вам не придется беспокоиться о наводнении спама, потому что плагин поддерживает Akismet и позволяет установить CAPTCHA. Также есть возможность экспорта и импорта настроек, переадресация пользователя после отправки письма на любой адрес, отправка файлов, редактирование стилей и многое другое. Частичный русский перевод.
Пример формы.
4. Visual Form Builder
Очень удобная и простая форма обратной связи. Все настройки и функции доступны на одной странице что и создает удобство в управлении. Имеет множество полей, которые с легкостью добавляются при одном нажатие мыши. Также есть возможность переадресации после отправки письма, анти-спам, адаптивность формы и многое другое.
Окно настроек.
Пример формы.
5. Slick contact forms
Очень простая форма в ней нет кучи настроек, огромной функциональности, только 4 поля и ничего лишнего. Плагин отличается от остальных тем, что форма выводится через виджет и создает эффект плавающей или скользящей формы по странице. При нажатии она плавная появляется сбоку, сверху и т.д. зависит от выбранных вами настроек.
Пример формы.
Добрый день друзья! В этом уроке я научу вас как создать контактную форму на WordPress с помощью плагинов. Форма обратной связи на WordPress служит идеальным решением для тех, кто хочет поддерживать контакт со своей аудиторией или получать заявки на адрес электронной почты на заказ каких-либо услуг. Мы научимся с вами делать всплывающую форму в модальном окне. После прочтения этой статьи вы сможете самостоятельно вставлять форму на свои сайты. Итак, поехали.
Зачем вам нужна контактная форма WordPress?
Вы возможно будете удивлены вопросом почему мне нужна форма обратной связи на сайт вордпресс? Почему бы просто не добавить адрес электронной почты на сайт, чтоб люди просто мне написали?
Это наиболее распространенный вопрос от новичков, которые боятся добавлять код формы на сайт, без знания программирования. По правде сказать вам вообще не нужен код при создании формы обратной связи на WordPress. В этом руководстве мы шаг за шагом создадим контактную форму и сделать ее может даже самый абсолютный новичок.
Ниже приведу 3 главные причины, почему использование формы лучше, чем просто добавить адрес почты на сайт.
– спам боты с завидной регулярностью выцепляют через свои парсеры адреса почты, где есть упоминание почтового домена и заносят его к себе в базу, чтобы потом слать вам нежелательную корреспонденцию. С другой стороны при использовании формы обратной связи для WordPress вы избавляетесь от проблемы засилия СПАМных писем на свой ящик.
Полнота информации – при отправке почты люди не всегда посылают всю информацию, которая нужна вам. С помощью контактной формы вы сами определяете, какие поля вам нужны, чтобы облегчить пользователям возможность отправить вам письмо (имя, email, номер телефона, комментарий и многое другое).
Экономия времени – форма обратной связи WordPress поможет вам сэкономить время. Помимо полноты информации, которую вы запросили у пользователя и которую он вам отправит, вы также можете указать, что ждет на следующем шаге, например «Ваша заявка будет рассмотрена в течение 24 часов» или Смотрите видео и много других полезностей.
Ниже приведен пример контактной формы, которую мы будем создавать в этом пособии.
Начнем-с, господа.
Шаг 1: Выбираем лучший плагин формы обратной связи для WordPress
На данном шаге нам необходимо определиться с выбором соответствующего плагина формы. Их существует великое множество как бесплатных, так и платных. В этом уроке я расскажу вам про разные плагины, чтобы у вас богатый был выбор. В первом случае будет задействован плагин WPForms.
Ниже приведены причины по которым WPForms является лучшим плагином обратной связи:
Во-первых это самый дружелюбный к новичкам плагин. Методом простого перетаскивания нужных блоков вы можете создать контактную форму в несколько кликов.
WPForms Lite полностью бесплатен.
Когда же вы будете готовы к более мощному функционалу и если он действительно для вас будет важным, тогда можете перейти на версию Pro.
Отлично, если эти причины оказались достаточными и я вас убедил, тогда движемся вперед.
Шаг 2: Установка плагина контактной формы WordPress
Для этого урока мы используем версию Lite, потому что это бесплатно и удобно в работе. Вы можете установить его войдя в блога и перейдя в Плагины – Добавить новый.
В строчке поиска набираем название нашего плагина и жмем Install now (Установить сейчас).
После установки плагина убедитесь, что вы его активировали. Это показано здесь:
Шаг 3: Создание контактной формы в WordPress
Итак, после успешного завершения активации плагина, самое время создать нашу форму обратной связи. Для этого в панели администратора блога кликните на вкладку WPForms Menu и перейдите в Add New (Добавить новую).
Это позволит открыть вам конструктор Wpforms, где простым перетаскиванием нужных блоков вы можете создать контактную форму обратной связи WordPress. В бесплатной версии Lite доступны два предварительно встроенных шаблона (пустой и простая форма). Вы же можете использовать их вместе, чтобы составить нужную и удобную для вас. В этом примере для вас мы выбрали второй вариант, т.е простой контактной формы. В нее добавим имя, Email и текстовое поле.
Вы можете кликнуть на каждое поле, чтобы отредактировать его. Также с помощью мыши вы можете перетаскивать и менять порядок полей формы.
Если вы хотите добавить новое поле, просто выберите нужно из списка слева и перетащите в рабочую область.
Когда все сделано, просто нажмите кнопку Сохранить (Save).
Шаг 4: Настройка уведомлений и Подтверждений
После того, как вы успешно создали форму обратной связи на WordPress, очень важно правильно настроить формы уведомлений и подтверждений.
Форма подтверждения это то, что видят ваши пользователи, когда отправляют вам заявку с формы. Это может быть сообщение благодарности или вы их можете перенаправить на другую специальную страницу.
Форма уведомления – это сообщения, которые получаете вы, когда к вам приходит новая заявка или email письмо с вашего WordPress сайта.
Вы можете настроить оба этих поля, перейдя в Настройки (Setting) внутри плагина конструктора фор WPForms.
Мы по умолчанию не ставили трогать и оставили как есть поле Формы Подтверждения с сообщением «Спасибо за ваше обращение». Однако, вы вправе поменять его на другой текст или перенаправить пользователя на отдельную страницу.
Лучшим в этом плагине является то, что настройки, которые идут по умолчанию, просто идеальны для новичков. Им не нужно додумывать, что сделать или что поменять. Все очень интуитивно понятно и просто. Когда вы переходите в настройку уведомлений, все поля будут предзаполнены динамически.
Уведомления по умолчанию отправляются на ту почту, которую в настройках указали вы. Если вы хотите изменить адресат для отправки уведомлений, то его также можно легко изменить. Если хотите указать несколько адресов почты (указываются через запятую), то пожалуйста, карты в руки, как говорится 🙂
Поле Тема email будет автоматически заполнено c вашим именем формы. Поле имя будет браться из имени пользователя (вашего имени). Когда вы будете отвечать на письмо, то оно будет идти на почту с именем пользователя, который заполнил контактную форму.
Шаг 5: Добавление контактной формы WordPress на страницу
На данном шаге, когда вы построили и настроили форму обратной связи, нужно создать для нее отдельную страницу «Контакты», куда вы сможете ее поместить. Либо вы создаете новую, либо редактируете уже существующую страницу, где вы можете ее добавить.
Мы будем использовать простой шорткод для вставки формы на страницу. Просто кликните на кнопку «Add form» и выберите название вашей формы, чтобы вставить ее на страницу.
Отлично. Теперь сохраняете и страницу и открываете предпросмотр, чтобы увидеть изменения.
Вот как примерно будет выглядеть форма на простой WordPress странице:
Если вы хотите просто добавить форму на страницу, то поздравляю вас. Все шаги сделано успешно. Если вы хотие добавить ее в виде виджета в сайдбар, то продолжение ниже.
Шаг 6: Добавление контактной формы WordPress в сайдбар
Плагин WPForms поставляется с встроенным виджетом формы обратной связи, который вы можете добавить в сайдбар или любую другую область на сайте (например в подвал).
Для этого нам нужно перейти в раздел «Внешний Вид» (Appearance)-> Виджеты (Widgets). Там вы увидите предустановленный виджет плагина формы в левой части. Просто берем и обычным перетаскиванием задаем порядок отображения в нужной области в сайдбаре.
Следующим шагом указываете название виджета и сохраняете. Переходите на сайт и смотрите результат.
На этом обзор нашего плагина формы обратной связи WPForms завершен. Но, специально для вас я подготовил еще обзор одного бесплатного плагина, с помощью которого мы можем сделать всплывающую форму обратной связи и все те же фишки, что и в предыдущем. Называется он Contact Form 7. Он реально очень мощный и козырь его в том, что он полностью БЕСПЛАТЕН!
Его можно также сделать адаптивным, т.е форма обратной связи будет приспосабливаться к размерам экрана вашего устройства.
Так, на всякий случай, чтобы вы знали, что они естьJ
Как сделать контактную форму обратной связи с помощью Contact Form 7
Продолжаем разбираться в вопросе создания форм для приема заявок с вашего сайта. Впереди у нас еще один плагин контактной формы вордпресс под названием Contact Form 7. Давайте его установим к себе на блог и активируем, как мы это умеем делать.
Она уже установлена на моем сайте, не на этом блоге. Процедура стандартная. Теперь нам нужно зайти в админку блога и создать новую форму, которая будет собирать нам заявки и другую полезную информацию. Переходим в раздел «Contact Form 7» -> Добавить новую.
Отлично! Теперь давайте дадим ей соответствующее название, в моем случае этих контактных форм очень много. Выберем одну, например «Форма заказа продвижения сайта»
Вкратце расскажу, что нам здесь будет нужно. В первую очередь, нам нужно определиться сколько полей форм мы хотим сделать. Сразу скажу, что 100500 полей делать не нужно и это бессмысленно, по той просто причине, что люди закроют ваш сайт и не оставят заявку. Им нужно упростить этот этап. Т.е если подумать, то нам от человека нужно что:
Его имя, чтобы к нему обратиться (персональное обращение)
Адрес почты (обратная связь, куда отправлять ему предложение)
Номер телефона, чтобы сразу позвонить (если это произойдет быстро, то он в любом случае станет вашим клиентом)
Собственно кнопка «Отправить»
Это основные данные, другие вы можете уже выяснить в ходе переписки или телефонного разговора. Логично? Я думаю, что да. Движемся дальше.
Создание полей контактной формы в плагине Contact Form 7
Так, с количеством полей определились, теперь нам нужно эти поля создать. Нам доступны следующие табы:
Text (Любое текстовое поле, например «Имя», «Задать вопрос», или любое другое название, которые вы будете собирать через это поле)
Email (тут предназначение одно, чтобы пользователь ввел )
URL (в это поле будет вводиться адрес сайта, другие значения не приемлемы, будет выдаваться ошибка)
Tel (поле с телефонным номером для нашей формы обратной связи на WordPress, допустимы числовые значения, текст даст ошибку)
Number (Числовой диапазон значений, можно применить, например, к цене: «сколько вы готовы заплатить за сайт? От 23000 до 120000 рублей»)
Date (Указываем дату, с какого по какое число. Пример: «Бронирование автомобиля с 13/04/2016 по 25/04/2016»)
Text Area (Текстовая область, сюда можно вводить текст в качестве комментария)
Drop-Down Menu (Выпадающий список). Реализовано на моем блоге, можете посмотреть. В конце каждой статьи я предлагаю пользователям создание или простого сайта, или интернет магазина. Именно такой функционал обеспечивает данная опция.
Radio buttons (Выбор какого-то одного пункта, например: «Вы заказываете или контекстную рекламу или таргетированную»)
Acceptance (Принимаете условия соглашения, т.е пользовательская информация, типо публичной оферты)
Quiz (Викторина – серия коротких вопросов, тоже можно вставить в контактную форму).
reCaptcha (Подтверждение, что вы не робот и не будете спамить.) Хорошая защита от СПАМА. Примечание: данная опция работает, если вы подключили плагин Really Simple Captcha.
File (Если вы хотите дать возможность пользователям загрузить вам файл, например: «Прикрепите ТЗ на разработоку сайта»).
Submit (Отправить данные на почту)
Итак, с полями мы определились, значение каждого вы тоже знаете. Давайте приступим к сборке нашей контактной формы на WordPress.
В примере ниже я использовал 2 поля: Имя, Email. Соответственно вам потребуются эти вкладки:
Нажав на текстовую вкладку (Text) мы попадаем в диалоговое окно:
Здесь нам нужно нажать на галочку Тип Поля – Обязательное. Сделано для того, что если пользователь не введет в него имя, то заявку он вам прислать не сможет, будет ошибка отправки, что не все поля заполнены корректно.
Затем вы увидите шорткод для вставки этого поля и рядом с ним синяя кнопка «Вставить тэг». Таким образом вы добавите одно новое поле контактной формы.
Чтобы вы не запутались я выделил его стилем. Код ниже:
<
div
class
=
"col-md-4"
>
<
label
class
=
"sr-only"
>
Full
Name
<
/
label
>
[
text*
text
-
658
class
:
form
-
control
placeholder
"Ваше имя"
]
<
/
div
>
А вот скрин:
Аналогичную операцию проделываем для поле «Email». Кликаем на соответствующую вкладку и попадаем вот в такое диалоговое окошко.
Абсолютно ничем не отличается от предыдущего, просто повторяем наши с вами действия. У меня поле емэйла также имеет стиль. Привожу ниже код:
<
div
class
=
"col-md-4"
>
<
label
class
=
"sr-only"
>
Full
Email
<
/
label
>
[
email*
email
-
447
class
:
form
-
control
placeholder
"Ваш Email"
]
<
/
div
>
А вот скрин:
И, наконец, кнопка «Submit» (Отправить данные). Она у меня вся в стилях.
<
div
class
=
"col-md-4"
>
[
submit
class
:
btn
-
flat
class
:
col
-
xs
-
12
"Заказать"
]
<
/
div
>
<
/
div
>
Важное примечание:
Дорогие друзья, в этом примере я использую адаптивные стили для создания контактной формы на WordPress, т. е она может принимать формы любого размера экрана.
Кнопку вы увидите в правом верхнем углу. Уж точно не промахнетесь. 🙂
Часть работ мы сделали, теперь переходим к следующему этапу.
Настройка почтового адреса для приема заявок
На этом шаге нам нужно сделать некоторые настройки, чтобы письма уходили именно нам на наш почтовый ящик. Как этого достичь я расскажу ниже.
Нам необходимо нажать на большую вкладку «Письмо». Она будет второй после Шаблона формы.
Первое, что увидите, это ваши теги, которые вы добавили, их нам необходим вставить в тело письма, именно они будут подставлять данные, которые вводит пользователь с формы. Думаю, что объяснил доходчиво.
Теперь по полям:
To (Куда будет отправляться заявка, в моем случае, это мой адрес почты, можно указывать несколько адресов, куда присылать заявки)
From (Поле Откуда, т.е будет подставляться значение, что заявка идет с моего студийного сайта)
Тема (Служит для определения, с какой формы приходит заявка, в нашем случае это заявка с формы продвижения сайта).
Additional Headers (Дополнительные заголовки, их не трогаем, они нужны для корректности отправки формы)
Message Body (Тело сообщения, здесь вы указываете, От кого пришло письмо и с какого адреса, например: «От: Ивана» «Адрес почты:
vasya
@
mail
.
ru
»)
File Attachments (Приложения к файлу, не трогаю)
Теперь нам необходимо настроить уведомления об успешной или неуспешной отправки письма с контактной формы WordPress.
Это будут сообщения, которые будут показываться пользователю в ответ на его действия с формой. По умолчанию они идут на английском языке. Я сделал перевод на русских самых необходимых для вас. Их будет более, чем достаточно, а если нет, то переводчик Гугла вам в помощь. Итак, приступим.
При успешной отправки сообщения: «Ваше сообщение было отправлено успешно. Спасибо.»
При некорректной отправке сообщения с формы: «Ошибка при отправке сообщения. Пожалуйста, попробуйте позже или обратитесь к администратору сайта.»
Ошибка заполнения: «Ошибки заполнения. Пожалуйста, проверьте все поля и отправьте снова.»
Отправленные данные определены как спам: «Ошибка при отправке сообщения. Пожалуйста, попробуйте позже или обратитесь к администратору сайта.»
Некоторые условия должны быть приняты: «Пожалуйста, примите условия для продолжения.»
Некоторые поля должны быть заполнены: «Пожалуйста, заполните обязательное поле.»
Превышена длина символов в поле: «Указано слишком много данных.»
Недостаточная длина символов в поле: «Указано слишком мало данных.»
Неверный формат даты: «Формат даты некорректен.»
Ранняя дата в минимальном пределе: «Указана слишком ранняя дата.»
Поздняя дата в максимальном пределе: «Указана слишком поздняя дата.»
Неудачная загрузка файла: «Не удалось загрузить файл.»
Неразрешенный тип файлов: «Этот тип файла не разрешен.»
Загрузка слишком большого файла: «Этот файл слишком большой.»
Загрузка файла не удалась из-за ошибки PHP: «Отправка файла не удалась. Возникла ошибка.»
Номер телефона, введенный отправителем, неверен: «Некорректный номер телефона.»
Очень хорошо. С настройкой формы мы закончили, теперь необходимо вставить ее на сайт. Для этого по уже известной технологии, зайдем на уже существующую страницу или создадим новую. В своем примере я покажу вам пример существующей формы на странице сайта WordPress.
Так как наша форма собирает заявки на продвижение сайта, то зайдем на аналогичную страницу.
Чтобы вставить нашу контактную форму, нам нужно скопировать, присвоенный ей плагином, шорткод. Он доступен под названием вашей формы.
Копируем и вставляем в нашу страницу, предварительно перейдя в текстовый редактор (не визуальный). Представлено на скриншоте ниже:
Сохраним нашу страницу и посмотрим, что получилось в итоге в браузере:
Супер! Теперь давайте попробуем отправить форму ничего в нее не заполнив. И вот, что мы увидим.
Произошла ошибка отправки с формы, поскольку пользователь не указал нужные данные в полях. Теперь давайте введем корректные данные и посмотрим, что у нас получится в этом случае.
Нажимаем отправить и вот, что пишет наша форма:
Теперь посмотрим, как выглядит наша заявка. Они приходят у меня на мэйловскую почту. Проверим доставку:
Зайдем внутрь, чтобы убедиться в корректности кодировки и всех данных.
Все просто отлично. Форма работает исправно и отправляет данные. Теперь мы можем собирать заявки, которые будут приходить вам когда вы займетесь , если мы говорим про региональное продвижение.
Итак, мы рассказали как сделать контактную форму на WordPress на странице сайта. Сейчас я расскажу как сделать всплывающую адаптивную форму обратной связи
с помощью нашего плагина Contact form 7.
Делаем всплывающую адаптивную контактную форму обратной связи на WordPress
Для того, чтобы наша форма стала адаптивной, т.е «резиновой», нам необходимо подключить еще один плагин, а точнее его дополнение к Contact Form 7 – называется он Bootstrap Contact Form 7. Устанавливаем и просто активируем и все – он работает. С ним никаких настроек делать не нужно. Установили и забыли.
На следующем шаге я расскажу, какие изменения нужно внести, чтобы наша форма стала всплывающей и адаптивной. Подобную реализацию я сделал на главной странице своего студийного сайта. Для этого перейдем в шаблон index.php, который находится в разделе «Внешний Вид — Редактор». Мы будем работать только с кодом, вручную.
Наша всплывающая форма будет отображаться в модальном диалоговом окне примерно так:
Чтобы достичь этого результата вам понадобится следующий код, я представлю его полностью в сниппете:
Заказать
Оставить заявку
<
a
href
=
"#"
class
=
"btn btn-primary btn-flat"
data
-
toggle
=
"modal"
data
-
target
=
"#modal2"
>
Заказать<
/
a
>
<
!
--
Modal
--
>
<
div
class
=
"modal contact-modal fade"
tabindex
=
"-1"
id
=
"modal2"
role
=
"dialog"
aria
-
labelledby
=
"myModalLabel"
aria
-
hidden
=
"true"
>
<
div
class
=
"modal-dialog"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
button
type
=
"button"
class
=
"close"
data
-
dismiss
=
"modal"
>
<
span
aria
-
hidden
=
"true"
>
&
times
;
<
/
span
>
<
span
class
=
"sr-only"
>
Close
<
/
span
>
<
/
button
>
<
h4
class
=
"modal-title black"
id
=
"myModalLabel"
>
Оставитьзаявку<
/
h4
>
<
/
div
>
Flector
5
Это плагин создания контактных форм. Он чрезвычайно популярен (по скачиваниям уступает только плагинам и ) среди пользователей, так как удачно сочетает простоту использования и мощнейшие возможности по настройке и конструированию контактных форм. Я попытаюсь максимально подробно рассмотреть все возможности плагина.
1
Распаковываем архив.
2
Копируем папку contact-form-7
в /wp-content/plugins/
.
3
Заходим в админку блога на вкладку "Плагины
" и активируем плагин.
При своей активации плагин создает отдельное меню в админке блога под названием "", также при этом создается дефолтная контактная форма, которую вы можете увидеть в "Contact Form 7\Формы
":
Если использовать предложенный "код вставки", то форма в блоге будет такая:
Конечно, внешний вид этой контактной формы будет зависеть от стилей, используемых в вашем шаблоне, но в целом она будет выглядеть именно так.
Для вывода этой простейшей формы вам понадобится всего пара минут. И именно из-за такой легкости добавления контактной формы многие пользователи и любят этот плагин.
Однако, плагин обладает кучей возможностей по созданию продвинутых контактных форм любой сложности. Но начнем с простого, с создания своей собственной формы, которая будет лишь немного отличаться от встроенной в плагин формы по умолчанию. Кликаем на ссылку "Добавить новую":
Откроется вот такая начальная страница добавления формы:
Плагин автоматически определяет используемую в блоге локаль, поэтому необходимости выбирать язык нет, просто кликайте на кнопку "". После этого появится страница конструктора форм. Первое, что вы должны сделать здесь - это переименовать заголовок формы:
Заголовок не имеет никакого значения, он нужен только для того, чтобы вы сами не запутались в своих собственных формах. Установили название своей формы, нажали на кнопку "Сохранить
", получили в итоге "код вставки":
Теперь можно вставить предложенный код в любую свою запись или страницу (в режиме "Текст", конечно), чтобы вывести в ней контактную форму. Однако она ничем не будет отличаться от формы по умолчанию, поэтому продолжим работать с конструктором форм. В правой части страницы конструктора расположена кнопка "Сгенерировать тэг
", клик на нее выдаст:
Выберем, к примеру, номер телефона. Откроется такое окно:
Собственно, тут можно вообще ничего не менять. Размеры, классы и прочее это второстепенные опции и в большинстве случаев вам им редактировать не надо. Однако, опция "" может быть полезна в качестве подсказки посетителям, как именно надо заполнять это поле.
Например, задаем такие значения:
При выводе контактной формы поле будет выглядеть так:
При клике на это поле введенный там текст исчезнет, так как он служит лишь подсказкой для заполнения. Но я пропустил момент добавления выбранного тэга в саму контактную форму. Вот этот тэг:
Необходимо вставить в левую часть страницы конструктора форм, где расположен сам код контактной формы:
Создавать код формы надо вручную, то есть расставляйте заголовки, теги абзацев и переносов строк сами, должно получиться что-то типа:
Сохраняем код формы и получаем в итоге вот такую контактную форму:
Собственно, таким же способом можно легко за пару минут добавить в вашу контактную форму любой тэг, используемый плагином. Не буду заставлять вас вручную пробовать каждый тэг, сразу приведу их вывод:
1
Текстовое поле.
Обычное текстовое поле, можно использовать для имени, темы и т.д.
2
E-mail.
Используется только для ввода e-mail адреса.
3
URL.
4
Номер телефона.
Используется только для ввода номера телефона (цифры и дефизы).
5
Число (spinbox).
Используется только для ввода числа (можно использовать для указания возраста, количества заказываемых единиц товара и т.д.).
6
Число (slider).
Работает некорректно. Для вывода этого числового слайдера используется HTML5, а это, во-первых, означает, что такой слайдер выглядит по-разному в разных браузерах, а во-вторых, он все равно толком не работает. На форумах поддержки плагина я видел решения , исправляющие работу данного тэга, но мне они не помогли – заставить этот слайдер отображать какие-либо цифры я так и не смог. Рекомендую не использовать данный тэг.
7
Дата.
Используется только для ввода даты.
8
Текстовое поле.
В русском переводе данный тэг тоже получил название "Текстовое поле", но в терминологии HTML это textarea, что, по сути, обозначает лишь увеличенное текстовое поле. Используется для ввода текста сообщения.
9
Выпадающее меню.
Используется для выбора пункта (или нескольких пунктов) из выпадающего меню. Можно использовать для чего угодно – от вопроса о цвете заказываемого товара до выбора пола человека.
10
Checkboxes.
Используется для выбора одного или нескольких пунктов из предложенных вариантов.
11
Radio buttons.
Используется для выбора только одного пункта из предложенных вариантов.
12
Acceptance.
Используется для согласия с условиями.
13
Вопрос.
Используется для ответа на указанные вопросы (вопрос выбирается случайно из указанных вариантов). В основном, данный тэг используется в качестве защиты от спама. И если на числовой вопрос спам-боты легко могут ответить, то на вопросы типа "на какой планете мы живем?" они ответить не в состоянии.
14
CAPTCHA.
Используется для вывода полноценной капчи. Для использования данного тэга необходима установка плагина Really Simple CAPTCHA . Капча вполне читаемая, а поэтому легко пробивается продвинутыми спам-ботами вроде Хрумера.
15
Отправка файла.
Используется для отправки файла. Можно указать максимальный размер и форматы допустимых файлов.
16
Кнопка отправки.
Используется для отправки данных контактной формы. Это обязательный тэг.
С тэгами, используемыми непосредственно в контактной форме, разобрались. Теперь рассмотрим, как эти самые тэги из контактной формы получить на свой email. Чуть ниже кода контактной формы в конструкторе находится шаблон отсылаемого вам письма и именно в нем вы должны сделать необходимые изменения. Это важно, так как неправильное заполнение этого шаблона не позволит вам узнать, что именно написал посетитель в вашей форме. В качестве примера возьму тэг номера телефона. Скажем, в вашей контактной форме он вставлен через такой код:
Значит, в шаблоне отсылаемого письма надо вставить такой код:
Смысл, думаю, понятен. В коде контактной формы , а в письме только название этого поля . Плагин формирует цифровые названия тэгов вроде , но никто не мешает вам использовать свои имена. И по поводу остальных тегов в шаблоне письма – они тоже формируются по такому же принципу – вместо используется и т.д.
Тексты, которые выдает контактная форма можно также поправить в конструкторе форм в разделе "Сообщения":
Часто задаваемые вопросы по плагину :
1
Ошибка вида "
", как исправить?
Это значит, что либо указанная форма удалена, либо неправильно указан заголовок формы (title в коде вызова критичен для вызова формы).
2
В письме я вижу тэги вроде вместо текста, как исправить?
Это значит, что посетитель не заполнил данное поле. В таком случае, тэг не заменяется, а выводится, как есть.
3
Есть ли ограничения при выборе имени для тэга?
Есть. Если цикле WordPress
используется имя "name", то вы не можете его использовать в качестве имени для тэга. Лучшим способом избежать проблем будет добавление префиксов для имен, вроде слова "your". С именем тэга проблем точно не будет.
4
Можно ли сообщить посетителю по email, что его форма была получена?
Можно. Используйте в конструкторе форм опцию "Адресат 2":
Данную опцию вполне можно использовать в качестве автоответчика.
5
Можно ли отправить заполненную форму по нескольким адресам?
Можно. Используйте в опции "Адресат" поле "":
Где [email protected] ваш дополнительный email, на который будет отослана копия заполненной посетителем формы (команда "cc" отправляет скрытую копию).
6
Можно ли вывести форму не в записи или странице?
Да. Вставьте код вызова формы в текстовой виджет.
7
Можно ли вывести форму напрямую кодом в файлах шаблона?
Да. Используйте код вида:
""
)
;
?>
8
Форма не отсылается, выдается ошибка в красной рамке, как исправить?
Обратиться к вашему хостеру, возможно в PHP запрещен вызов функции mail().
9
При отправке формы выдается ошибка в оранжевой рамке, как исправить?
Оранжевая рамка сигнализирует о спаме. Ложное срабатывание защиты от спама могут вызвать плагины кэширования. Настройте в вашем плагине кэширования периодическую очистку файлов кэша (24 часов достаточно).
10
Поле для ввода email выглядит иначе, чем другие поля в форме, как исправить?
Плагин использует HTML5 код для ввода email-адреса ( вместо ), а подобный код зачастую не оформлен в старых шаблонах. Вам необходимо внести изменения в styles.css
вашего шаблона, добавив туда необходимый код для селектора input .
11
Как в email вставить прикрепленный пользователем файл?
Использовать для этого специальное поле "Прикрепленные файлы:"
Действительно заслуживает вашего внимания. В отличие от многих других популярных плагинов он не заставляет вас покупать какую-нибудь Pro
версию - все его возможности доступны сразу. Популярность плагина (свыше 19 миллионов скачиваний) вполне заслужена – при всей своей функциональности он чрезвычайно прост в настройке и доступен даже для начинающих пользователей движка WordPress
.
Но все же помните – это плагин создания контактных форм, а не плагин создания просто форм. При всех своих возможностях он не позволит вам создать продвинутую форму на основе каких-либо условий. Его основное назначение именно создание контактных форм и не больше. Для создания динамических форм, форм создания записей и тому подобных вещей используйте плагины вроде Ninja Forms , они для этого более подходят.
Если у вас остались какие-нибудь вопросы по настройке плагина – спрашивайте в комментариях, обязательно постараюсь вам помочь.
Автор плагина: Takayuki Miyoshi Рассматриваемая версия: 3.9.1
от 31.07.2014 Текущая версия: 5.1.4
от 04.08.2019
Совместимость с версией WordPress: 4.9
и выше Активных установок плагина: 5 000 000+
Скачать плагин версии 5.1.4
(всего скачено 121 112 956
раз)
Понравился пост? Подпишись на обновления по или
Добавляет на сайт страницу с политикой конфиденциальности. Также, добавляет под Контакт Форм 7 согласие на обработку персональных данных. Плагин предназначен только для русскоязычных сайтов. При входе пользователям показывает оповещение о использовании сайтом cookies. Подходит для 152ФЗ.
По вопросам работы плагина пишите на это почту: [email protected]. Через онлайн консультант на нашем сайте консультации не даем.
Установка
Установите плагин.
Заполните обязательные данные о компании.
Участники и разработчики
«Политика конфиденциальности для сайта. Согласие под формами Contact-Form 7» - проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
Журнал изменений
1.28 Проверка совместимости с WP 5.0. Добавлена скрытие заголовка из текста политики
1.27 Проверка наличия кук для плашки, которая выплывает снизу при входе на сайт переведено на js
1.26 Добавлен rel=nofollow ссылкам плагина
1.25 Добавлен текст соглашения под стандартной формой комментирования
1.24 Исправлена ошибка в Java scriptе
1.22 Исправлены мелкие баги в админке и вывод текста имени кнопки под contact form 7 на странице
1.21 Класс container, которым обрамлен текст политики, заменен на container-ppcf7
1.2 Добавлен класс к тегу
p> под формами
1.1 Добавлена опция показать/скрыть ссылку на политику конфиденциальности в подвале
1.01 Убран лишний тег p в сообщении cookie
1.0 Первая версия в репозитории
Привет всем. Как, то у меня через чур много энергии и я решил сегодня написать еще одну статейку, которая будет посвящена одному из плагинов WordPress. Довольно таки интересный и функциональный плагин, со своими обязанностями справляется на все 100% и лучше я пока не нашел, что бы оформить обратную связь.
Не хочу долго Вас томить, я думаю Вы и так уже поняли про, что пойдет речь в статье. И так, сегодня будем разбираться и настраивать плагин Contact Form 7 для WordPress
, а именно создавать форму обратной связи.
Долго сидел и думал, какие есть минусы в плагина и в голову так ничего и не пришло, а вот плюсов у данного творения очень много.
Плюсы плагина Contact Form 7.
Понятность и простота настройки. Человек, который первый раз сталкивается с данным плагином без проблем сможет разобраться.
Создание большого количества разных форм и интеграция их на сайт.
Форма вставляется с помощью шорткода на страницу и в любое место сайта. Это очень удобно.
Поддержка русского и других языков.
Поддержка Ajax запросов.
Защита от спама с помощью текстового вопроса или капчи. Для капчи необходимо дополнительно будет установить Really Simple CAPTCHA.
Настройка внешнего вида формы с помощью css стилей.
Интеграция с сервисом Akismet, для защиты от спама.
У нас на сайте Вы можете увидеть и поюзать такую форму если нажмете на пункт меню “Связаться с нами”, выпадет окно, где можно увидеть наглядный пример.
Дайте начинать!
Для начала нам необходимо скачать данный плагин. Можно с нашего сервера вот ссылка — >или же с официального сайта вот ссылка — > Скачать с официального сайта
.
После, того как скачали необходимо его установить на . Как устанавливать, я не буду описывать, думаю Вы должны этот процесс знать от А до Я. Скачали, установили, теперь непосредственно переходим в сам , что бы разобраться и настроить его.
Настройка плагина Contact Form 7 и создание формы обратной связи.
Теперь когда вы скачали и установили всё как нужно, переходим в административную панель WordPress и находим пункт Contact Form 7
, кликаем по нему и мы попадаем на страницу добавления новой формы.
Создание формы.
Для того, что бы создать новую форму необходимо нажать на “Добавить новую
”, далее выбираем язык (русский по умолчанию) и нажимаем “Добавить новую”. После всех проделанных шагов у Вас должно быть вот такая картина:
Форма создана, теперь будем ее настраивать, под ваши нужды и для начала даем ей название. В моем случае я назову “Тест форма
”, вы называйте как хотите и после этого нажимайте «Cохранить». Теперь вы можете увидеть, шорткод который необходимо будет вставлять в код сайта, где будет выводится данная форма.
Понадобится код нам немного позже, так как необходимо сначала настроить форму. Переходим к шаблону формы и настраиваем его.
Справа выпадающий список “Сгенерировать тег
”, если его раскрыть можно увидеть много полей которые добавляются в форму.
Поле «Сгенерировать тег»
Слева можно увидеть поля которые уже добавлены в форму.
Давайте для примера, сделаем простенькую форму в которой будет имя, почта, телефон, текстовый вопрос для защиты от спама, сообщение и кнопка отправить.
Приступает.
Делаем текстовое поле для имени. В выпадающем списке “Сгенерировать тег” выбираем “Текстовое поле
”. Ставим галочку обязательное поле, даем ему название в моем случае “NAME” и присваиваем id, что бы можно было поле оформить с помощью css стилей. У меня получилось id=”name”. Внизу можно увидеть текст “Скопируйте этот код и вставьте его в шаблон формы слева
”. Берем этот код и копируем в шаблон формы, как на картинке:
Для почты (e-mail) аналогично делаем, для телефона выбираем из списка “Сгенерировать тег”, поле “Номер телефона
” и тоже по аналогии делаем.
Для настройки сообщения выбираем “Текстовое поле
” и делаем тоже по аналогии со всем выше описанным.
Теперь добавляем поле «Вопроc
«. Для этого в выпадающем списке выбираем пункт “Вопрос
”, задаем ему название. В поле Вопрос|Ответ, можно задавать разные вопросы и ответы, под полем приведен пример логического вопроса, можно задавать текстовый, например “3 по счету месяц года?| Март” и т.д. Код вставляем как и раньше.
поле «Вопрос»
И последнее что нам необходимо, это кнопка “Отправить
”, можно оставить ту, которая в шаблоне или в списке “Сгенерировать тег” выбираем “Кнопка отправки”. Шаблон готов, нажимаем кнопку “Сохранить
”.
Давайте проверим, что у нас получилось, копируем шорткод и вставляем его на страницу или в любую часть кода куда необходимо. Я вставлю на тестовую страницу.
Вот что у меня получилось:
У Вас должно быть, что-то похожее.
Настройка адресата формы и сообщений
Опускаемся немного ниже шаблона формы и видим настройки адресата.
Поле адресат. Вводим почту с которой будут приходить письма посетителям которые заполнят форму.
Поле отправитель. Вместо <>, подставляем свои шорткоды (названия которые давали полям). Посмотреть их можно выше. В моем случае будет <>.
Поле тема. Я всегда пишу Форма обратной связи и указываю сайт.
Поле шаблон письма. Здесь можно выводить, то что душа пожелает. Для нашего примера делаю поле От: <> и данные Телефон: , Сообщение ..
Остальные поля пустые.
В конце не забываем сохранятся.
Если опуститься еще ниже, то можно увидеть настройки сообщений. Здесь всё на русском, поэтому можете править под свои нужды, как хотите. Здесь думаю сами разберетесь
Форма готова, можно переходить тестировать и смотреть приходит ли сообщение на почту, которую Вы указали.
У меня всё работает отлично, после нажатия кнопки “Отправить”, вижу сообщение “Сообщение было успешно отправлено. Спасибо
.
” Можете тестировать и смотреть какие ошибки форма будет выдавать если не правильно ввести данные.
Что касается css стилей, их можно добавить в главный css файл style.css. С помощью firebag, можете посмотреть id и классы полей и присвоить им соответствующие стили.
Плагин Contact Form 7 для WordPress
очень функциональный, можно сделать форму любой сложности, я уверен Вы в этом убедились. На этом я буду заканчивать, если какие-то моменты не до конца ясны, пишите в комментарии буду пытаться помочь разобраться. Спасибо.
Поле «Сгенерировать тег» 
поле «Вопрос» 
