" class="glossaryLink " target="_blank" >CMS… Но нет… до сих пор приходится ставить несколько плагинов чтобы заиметь данный функционал на своем сайте. Итак, начнем!

Нужный нам плагин Easy FancyBox.

Заходим в Настройки -> Медиафайлы.

Сверху видим блок стандартных настроек медиафайлов, а ниже настройки плагина Easy FancyBox. По умолчанию активен попап при нажатии на изображение.

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

Ставим галку на пункт«Inline content»

Код с всплывающей контактной формой, установленный в коде файла шаблона (например в footer.php):

Если Вы вставляете код вызова формы сразу в Визуальном редакторе для редактирования текста в режиме ТЕКСТ, тогда код будет выглядеть так:

Код с всплывающей контактной формой, установленный в визуальном редакторе записи (в режиме Текст) в админке

Синонимы:

Интернет-сайт, Web-сайт

" class="glossaryLink cmtt_Общие понятия" target="_blank" >сайта:

Код кнопки, открывающей попап:

Заказать звонок

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

Победил это добавив пробел перед решеткой.

Для придания форме нужного фида необходимо обернуть поля в дивы, указать им классы. Это лучше делать непосредственно в редакторе форм CF7. Стили можно прописать в custom.css

Закрытие popup окна с формой обратной связи после успешной отправки

Добавляем такой код

On_sent_ok: $.fancybox.close();

в блок Дополнительные настройки вашей формы. У меня еще стоит отправка цели Яндекс.Метрики.

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

Документация и поддержка

Скриншоты

Установка

1. Загрузите всю папку contact-form-7 в директорию /wp-content/plugins/ .
2. Активируйте плагин на странице «Плагины» в панели управления WordPress.

В меню консоли WordPress вы найдёте вкладку ‘Обратная связь’.

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

Участники и разработчики

«Contact Form 7» - проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

Журнал изменений

Для получения дополнительной информации смотрите Релизы .

5.1.4

• reCAPTCHA: Представляем константы WPCF7_RECAPTCHA_SITEKEY и WPCF7_RECAPTCHA_SECRET.
• reCAPTCHA: Представляем перехватчики фильтра wpcf7_recaptcha_sitekey и wpcf7_recaptcha_secret.
• Добавление параметра $status к фильтру wpcf7_form_response_output.
• Создает случайный код, когда пользователь является зарегистрированным пользователем.
• Представляем WPCF7_ContactForm::unit_tag(), публичный метод, возвращающий тэг юнита.
• reCAPTCHA: выдаёт иное сообщение в спам-журнал в случаях, когда маркер ответа пуст.
• Флажок согласия: поддержка опции label_first в согласительном тэге формы.

5.1.3

• Исправлена ошибка, приводившая к невозможности отменить выбор параметра во вкладке Почта.

5.1.2

• Постоянный контакт: Представлен селектор списка контактов.
• Постоянный контакт: Представлена дополнительная настройка constant_contact.
• reCAPTCHA: представлены перехватчики фильтров wpcf7_recaptcha_actions и wpcf7_recaptcha_threshold.

5.1.1

• reCAPTCHA: Изменяет реакцию на пустые токены ответа.

5.1

• Представлен модуль интеграции Постоянный контакт.
• Обновлён модуль reCAPTCHA для поддержки reCAPTCHA v3.
• Добавляет правила стиля Тёмного режима.

5.0.5

• Исправлена проблема несоответствия между get_data_option() и get_default_option() в классе WPCF7_FormTag.
• Глушит ошибки PHP, возникающие при вызовах unlink().
• Представлена wpcf7_is_file_path_in_content_dir() для поддержки константы UPLOADS.

5.0.4

• Явно устанавливает аргумент power_type в вызове register_post_type(), для исправления проблемы, связанной с несанкционированным повышением привилегий.
• Вложение локального файла — запрещено указывать абсолютные пути к файлам, расположенным вне директории wp-content.
• Валидатор конфигурации — добавляет тестовый элемент для обнаружения некорректных настроек файлов вложений.
• Исправлена ошибка в функции обратной совместимости JavaScript для устаревших браузеров, которые не поддерживают атрибут-заполнитель HTML5.
• Чекбокс согласия — отключает функцию do-not-store форм-тэга.

5.0.3

• CSS: Применение стиля курсора «не разрешено» при наведение на кнопки отправки в неактивном состоянии.
• Флажок согласия: ревизия пользовательского интерфейса генератора тегов, для поощрения использования лучших опций защиты личных данных.
• Внедрение функции wpcf7_anonymize_ip_addr().
• Представлена опция consent_for:storage для всех типов форм-тэгов.

5.0.2

• Добавлен раздел «Уведомления о приватности» в файл readme.txt.
• Обновлен контент в мета-блоке Информация.
• Используйте get_user_locale() вместо get_locale(), где это более уместно.
• Флажок согласия: Сброс статуса отключенных кнопок отправки после успешного применения.

5.0.1

• Исправлено некорректное использование _n().
• Проверка конфигурации: исправлено неверное количество предупреждений на вкладке «Дополнительные параметры».
• Проверка конфигурации: исправлена неправильная обработка специального почтового тега [_site_admin_email] в поле заголовка «От».
• Флажок Acceptance: указанные атрибуты class и id были применены к неправильному элементу HTML.
• Проверка конфигурации: если для почтовых ящиков, таких как Cc или Reply-To, существует дополнительный почтовый заголовок, но возможное пустое значение, будет возвращена ошибка «Неверный синтаксис почтового ящика».
• Явно укажите четвертый параметр add_action(), чтобы избежать передачи непреднамеренных значений параметров.
• Проверьте, не является ли целевой каталог пустым, прежде чем удалять его.

5.0

• Дополнительные настройки: on_sent_ok и on_submit были удалены.
• Новая дополнительная настройка: skip_mail.
• Фламинго: заголовок входящего канала изменяется вместе с изменением заголовка соответствующей контактной формы.
• События DOM. Весь объект ответа API доступен через свойство event.detail.apiResponse.
• Почта HTML: добавляет атрибуты, связанные с языком, в заголовок HTML.
• Загрузка файла: Устанавливает атрибут принятия в поле загрузки.
• Представлен новый класс WPCF7_MailTag.
• Позволяет прервать попытку отправки почты, используя перехватчик действия wpcf7_before_send_mail. Кроме того, вы можете установить пользовательский статус и сообщение через перехватчик действия.
• Флажок Acceptance: позволяет указывать условия в части содержимого тега формы.
• Флажок Acceptance: Поддерживает параметр опциональности.
• Новые специальные почтовые теги: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname], and [_user_display_name].
• Новые перехватчики фильтров: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_{$type}, and wpcf7_mail_tag_replaced_{$type}
• Новые функции form-tag: zero-controls-container и not-for-mail

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

Зачем вам нужна контактная форма WordPress?

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

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

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

• – спам боты с завидной регулярностью выцепляют через свои парсеры адреса почты, где есть упоминание почтового домена и заносят его к себе в базу, чтобы потом слать вам нежелательную корреспонденцию. С другой стороны при использовании формы обратной связи для WordPress вы избавляетесь от проблемы засилия СПАМных писем на свой ящик.
• Полнота информации – при отправке почты люди не всегда посылают всю информацию, которая нужна вам. С помощью контактной формы вы сами определяете, какие поля вам нужны, чтобы облегчить пользователям возможность отправить вам письмо (имя, email, номер телефона, комментарий и многое другое).
• Экономия времени – форма обратной связи WordPress поможет вам сэкономить время. Помимо полноты информации, которую вы запросили у пользователя и которую он вам отправит, вы также можете указать, что ждет на следующем шаге, например «Ваша заявка будет рассмотрена в течение 24 часов» или Смотрите видео и много других полезностей.

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

Начнем-с, господа.

Шаг 1: Выбираем лучший плагин формы обратной связи для WordPress

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

Ниже приведены причины по которым WPForms является лучшим плагином обратной связи:

1. Во-первых это самый дружелюбный к новичкам плагин. Методом простого перетаскивания нужных блоков вы можете создать контактную форму в несколько кликов.
2. WPForms Lite полностью бесплатен.
3. Когда же вы будете готовы к более мощному функционалу и если он действительно для вас будет важным, тогда можете перейти на версию 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 полей делать не нужно и это бессмысленно, по той просто причине, что люди закроют ваш сайт и не оставят заявку. Им нужно упростить этот этап. Т.е если подумать, то нам от человека нужно что:

1. Его имя, чтобы к нему обратиться (персональное обращение)
2. Адрес почты (обратная связь, куда отправлять ему предложение)
3. Номер телефона, чтобы сразу позвонить (если это произойдет быстро, то он в любом случае станет вашим клиентом)
4. Собственно кнопка «Отправить»

Это основные данные, другие вы можете уже выяснить в ходе переписки или телефонного разговора. Логично? Я думаю, что да. Движемся дальше.

Создание полей контактной формы в плагине Contact Form 7

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

• Text (Любое текстовое поле, например «Имя», «Задать вопрос», или любое другое название, которые вы будете собирать через это поле)
• Email (тут предназначение одно, чтобы пользователь ввел )
• URL (в это поле будет вводиться адрес сайта, другие значения не приемлемы, будет выдаваться ошибка)
• Tel (поле с телефонным номером для нашей формы обратной связи на WordPress, допустимы числовые значения, текст даст ошибку)
• Number (Числовой диапазон значений, можно применить, например, к цене: «сколько вы готовы заплатить за сайт? От 23000 до 120000 рублей»)
• Date (Указываем дату, с какого по какое число. Пример: «Бронирование автомобиля с 13/04/2016 по 25/04/2016»)
• Text Area (Текстовая область, сюда можно вводить текст в качестве комментария)
• Drop-Down Menu (Выпадающий список). Реализовано на моем блоге, можете посмотреть. В конце каждой статьи я предлагаю пользователям создание или простого сайта, или интернет магазина. Именно такой функционал обеспечивает данная опция.
• Checkboxes (множественный выбор, например: Сайт + Создание логотипа + продвижение + контекстная реклама)
• 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» (Отправить данные). Она у меня вся в стилях.