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


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

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

Это может звучать много, но не волнуйтесь – мы сделаем это просто!

Contents

Почему вы должны использовать контактную форму на вашем сайте WordPress?

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

  • Защита от почтового спама – Спам это вредитель. Вы заметите это быстро, когда у вас есть веб-сайт WordPress, который использует комментарии блога. Спамеры делают одно: автоматически сканируют веб-сайты на наличие незащищенных адресов электронной почты, чтобы они могли добавить их в свои списки рассылки. Контактные формы предотвращают это, предоставляя посетителям возможность войти в контакт, не публикуя свой адрес в Интернете..
  • Спросите правильную информацию – Люди, которые связываются с вами, не всегда отправляют всю необходимую вам информацию. С помощью контактной формы вы можете специально запросить ее заранее. Это также дает вам возможность фильтровать запросы, например, по типу. Это делает вашу жизнь проще и уменьшает много взад и вперед.
  • Сообщите своим клиентам – И наоборот, контактные формы также могут выступать в качестве первого пункта информации. Вы можете включить информацию для звонящих, чтобы сообщить им об ожидаемом времени ответа и шагах, которые они могут предпринять заранее, чтобы ответить на их запрос. Это снижает вероятность нескольких писем от одного нетерпеливого человека.

Убеждены, что контактные формы полезны? Тогда давайте перейдем к практической части этого урока.

Как добавить контактную форму в WordPress с контактной формой 7

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

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

Вот почему мы выбираем его, чтобы научить вас, как добавить контактную форму в WordPress..

Шаг 1. Установите плагин Contact Form 7

Установить контактную форму 7 так же просто, как и любой другой плагин WordPress. Просто войдите на свой сайт, перейдите на Плагины> Добавить новый и введите его имя в поле поиска.

установить контактную форму 7, чтобы добавить контактную форму в WordPress

Это должно появиться в первую очередь. Нажмите на Установить сейчас скачать его на свой сайт. Когда это будет сделано, нажмите Активировать начать использовать плагин.

Шаг 2. Создайте новую контактную форму

После установки вы найдете новый пункт меню с именем контакт в вашей боковой панели WordPress. Нажав на нее, вы попадете на этот экран.

контактная форма 7 главное меню

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

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

как добавить контактную форму в wordpress с контактной формой 7

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

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

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

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

Шаг 3. Настройте вашу форму

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

Конфигурация контактной формы
«Добавить контактную форму в WordPress» пример формы

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

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

Нажмите на раскрывающееся меню на панели инструментов в верхней части. Вы попадете в это меню:

контактная форма 7 создать выпадающее меню

Вот как можно заполнить различные поля:

  • Тип поля – Выберите, является ли поле обязательным для отправки контактной формы или нет.
  • имя – Это обозначает имя, используемое в теге. Он не будет отображаться для посетителей, но вам будет легче запомнить назначение тега, а также настроить электронную почту, отправленную на ваш счет позже..
  • Опции – Введите параметры, доступные для посетителей, используя раскрывающееся меню. Положите по одному в строке. У вас также есть возможность разрешить множественный выбор и использовать пустой элемент по умолчанию.
  • Атрибут Id / Class – В этом месте вы можете назначить класс CSS или идентификатор для поля. Это очень полезно для индивидуального оформления. Мы поговорим об этом позже.

Вот как мы заполнили это:

заполненная форма контактная форма генератора тегов 7

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

добавить теги формы для выпадающего меню в контактную форму 7

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

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

добавить HTML-код для формирования тегов в контактной форме 7

Шаг 4. Редактирование настроек электронной почты

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

настроить контактную форму 7 настройки почты

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

Вот что означает каждое поле:

  • к – Адрес электронной почты, на который будут отправляться сообщения. Обычно вы можете оставить это как есть.
  • От – Отправитель электронного письма. По умолчанию это имя человека, использующего вашу контактную форму.
  • Дополнительные заголовки – Место для дополнительных полей заголовка сообщения. Стандартные настройки отправляют ваш ответ на электронную почту человека, который с вами связывается, а не на адрес электронной почты, с которого он пришел (т. Е. С вашего сайта), когда вы нажимаете Ответить. Также возможно положить туда адресатов в ЦК или ВСС.
  • Тело сообщения – тело письма, которое вы получите.
  • Исключить строки с пустыми почтовыми тегами из вывода – Если вы отметите это, если какой-либо из использованных тегов будет пуст, плагин исключит их из сообщения..
  • Использовать тип содержимого HTML – По умолчанию сообщение отправляется в виде простого текста. Установите этот флажок, чтобы использовать HTML вместо.
  • Вложения файлов – Если ваша форма позволяет загружать файлы, теги для этих файлов принадлежат здесь. Вы также можете использовать его для прикрепите файлы, размещенные на вашем сервере.
  • Почта (2) – Дополнительный почтовый шаблон, часто используемый в качестве автоответчика. Проверьте, чтобы активировать.

Стандартные варианты довольно хороши. Единственное, что нам нужно изменить для нашего примера, это тема.

настроить фильтр в вашей почтовой программе

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

Шаг 5. Добавление формы сообщения

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

настроить форму сообщения для контактной формы 7

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

Шаг 6. Настройте дополнительные параметры

Наконец-то вы попадаете на дополнительные настройки.

контактная форма 7 дополнительных настроек

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

Шаг 7. Добавьте форму на свой сайт

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

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

После сохранения формы на экране появится шорткод:

контактная форма 7 короткий код, чтобы добавить контактную форму в WordPress

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

контактная форма 7 шорткод в редакторе WordPress

Теперь, когда вы публикуете страницу и переходите к интерфейсу:

Контактная форма 7 форма на странице

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

Просто, правда? Кроме того, вы можете использовать тот же метод, чтобы разместить форму в другом месте.

Шаг 8. Включите контактную форму на боковой панели (необязательно)

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

добавить контактную форму в WordPress виджет

Не забудьте сохранить виджет! Теперь, когда вы вернетесь в интерфейс вашего сайта, он будет:

контактная форма в виджете WordPress

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

Контактные формы в WordPress – следующие шаги

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

Изменение дизайна формы

В идеале, нет необходимости менять стиль вашей контактной формы. Это вероятно в нашем случае, потому что Контактная форма 7 использует стандартный HTML-код, такой как метка или входной [тип = «текст»] создавать поля формы.

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

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

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

изменить дизайн контактной формы через CSS

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

Если вы хотите стать более конкретным и изменить стиль только для определенных форм, вам повезло. Как видно на скриншоте выше, каждая форма Contact Form 7 получает свой собственный CSS-идентификатор.

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

добавить класс CSS и идентификатор в форму контакта 7

С их помощью вы можете нацеливать их еще более конкретно.

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

Внедрение защиты от спама

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

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

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

контактная форма 7 защита от спама через викторину

Тег викторины делает это возможным. Его так же легко использовать, как и все остальные теги в контактной форме 7, и вы можете найти дополнительную информацию Вот.

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

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

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

Есть и другие, например Форма обратной связи 7 Honeypot или WPBruiser. Для последнего вам нужен платное продление чтобы он работал с контактной формой 7. Есть и другие варианты, которые вы можете легко найти.

Важное примечание: контактные формы и GDPR

Возможно, вы знаете, что недавно в Европе произошли некоторые изменения в законах о конфиденциальности в Интернете. 25 мая 2018 года Общее положение о защите данных (GDPR) вступил в силу.

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

Почему это важно? Контактные формы собирают личные данные. По этой причине, если вы подпадаете под юрисдикцию правил (и большинство людей делают это сейчас), вы должны обратить внимание на некоторые вещи.

Перво наперво: мы не адвокатское бюро!

Ниже вы найдете несколько советов о том, как сделать вашу контактную форму совместимой с GDPR. Эти советы были составлены в меру наших возможностей.

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

Хорошо, спасибо за часть «если у тебя проблемы, пожалуйста, не возвращайся и не судись с нами». Давайте перейдем к советам!

Советы, чтобы сделать вашу контактную форму совместимой с GDPR

Вот как можно создать конфиденциальные контактные формы:

  1. Не собирайте данные, которые вам не нужны – Контактные формы дают вам выбор, какие поля для включения. Если есть какие-либо данные, которые вам на самом деле не нужны, прекратите их сбор. Таким образом, если есть нарушение, вы не можете его потерять.
  2. Отключить любое отслеживание – Если вы используете контактную форму для отслеживания файлов cookie, пользовательских агентов и / или пользовательских IP-адресов, вам необходимо отключить эту функцию, чтобы обеспечить совместимость с GDPR. Контактная форма 7, похоже, не делает ни того, ни другого, поэтому делать нечего. Проверьте свою контактную форму выбора, если вы используете что-нибудь еще.
  3. Получить абсолютное согласие – Добавьте в форму способ, чтобы люди давали согласие на сбор ваших данных. Например, контактная форма 7 предлагает приемная коробка. Важно: не устанавливайте флажок для включения по умолчанию. Пользователи должны сделать это сами. Также добавьте сообщение, в котором будет указано, что вы собираете и с какой целью, а также ссылка на вашу политику конфиденциальности..
  4. Иметь политику конфиденциальности на месте – Кстати, в рамках GDPR каждый профессиональный веб-сайт должен отображать политику конфиденциальности, которая объясняет, какие данные они собирают и как они их используют. Вы также должны дать посетителям возможность запрашивать их личные данные и удалять их. Это более сложная тема, чем мы можем затронуть здесь. Используйте ссылку ниже, чтобы найти больше информации.
  5. Внедрить HTTPS – Использование SSL / HTTPS шифрует обмен данными между браузером и сервером. Это важно для контактных форм, чтобы сохранить личные данные в безопасности. Это также считается обычной практикой в ​​настоящее время. Ознакомьтесь с нашим руководством о том, как его реализовать.

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

Другие отличные плагины контактной формы для WordPress

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

Джетпак Формы (бесплатно)

формы реактивного ранца

Jetpack – это набор мощных плагинов, созданных WordPress.com (см. Наше сравнение WordPress.org с WordPress.com). К ним относится модуль для создания контактных форм. Когда вы включите его, вы сможете начать вводить формы на свой сайт WordPress прямо из редактора постов и страниц..

Вот некоторые выдающиеся особенности:

  • Быстрый и простой в использовании
  • Уведомления по электронной почте, чтобы вы знали о отправке формы
  • Внесите любые изменения в редакторе WordPress
  • Отличное решение для создания простых форм

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

HappyForms (бесплатно)

Логотип HappyFormHappyForms является относительно новым на рынке. Он интегрируется с настройщиком WordPress, что облегчает начало работы. Помимо этого, он имеет следующие особенности:

  • Легкий и быстрый
  • Абсолютно бесплатно для использования (но поставляется с брендингом)
  • Позволяет создавать формы с помощью перетаскивания
  • Показывает отправку форм в панели управления WordPress
  • Поставляется со встроенной защитой от спама

Контактная форма 7 (бесплатно)

Контактная форма 7

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

  • Быстрый и простой в использовании
  • Вы можете внести изменения в WordPress
  • Условная логика для контактных форм

Отличный бесплатный вариант.

Формы ниндзя (Freemium)

Формы ниндзя

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

  • Легко подключайтесь к обычным почтовым маркетинговым сервисам
  • Возможность принимать платежи через ваши формы
  • Синхронизировать формы с CRM, как Salesforce

Членство в Ninja Forms стоит $ 99 / год и выше.

Гравитационные Формы (Премиум)

гравитационный логотип

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

  • Более 30 типов полей формы
  • Широкий спектр дополнения
  • Загрузка файлов
  • Возможность отображения пользовательских представлений в интерфейсе пользователя.
  • Многостраничные формы
  • Условная логика и сложные вычисления

Если вы заинтересованы в гравитационных формах, их планы начинаются с $ 59 / год.

Кальдера Формы (Freemium)

кальдерные формы

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

  • Дайте посетителям возможность отправлять свои собственные сообщения
  • Автоответчики
  • Антиспамовые функции
  • Полностью адаптивные веб-формы

Помимо бесплатной версии, есть также версия для начинающих от 6,24 долл. США в месяц до 74,99 долл. США в год.

WordPress контактные формы в двух словах

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

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me