Рубрики

Как добавить контактную форму на свой веб-сайт или блог WordPress

Contact-Form-7

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

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

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

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

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

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

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

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

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

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

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

1. Установка

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

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

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

2. Создание формы

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

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

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

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

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

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

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

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

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

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-код, такой как labelили, input[type="text"]для создания полей формы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете использовать тег reCAPTCHA, чтобы добавить его в форму. Создатель контактной формы 7 также имеет плагин Captcha под названием  Really Simple 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 (бесплатно)

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

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

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

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

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

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

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

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

WPForms (freemium)

WPforms

Еще одно решение для перетаскивания, которое особенно удобно для начинающих. WPForms имеет бесплатную версию в каталоге, и вы получаете премиум-функции с платной версией . Они включают:

  • Связаться со всеми основными почтовыми службами
  • Возможность разбивать длинные формы на несколько страниц
  • Условная логика для контактных форм
  • Легко сделать совместимость с GDPR

Плюс, плагин контактной формы вполне доступен. Планы начинаются с $ 49 / год.

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

Формы ниндзя

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

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

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

Гравитационные формы (премиум)

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

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

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

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

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

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

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

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

Помимо бесплатной версии, существует также премиум-версия, начинающаяся с $ 6,24 / месяц.

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

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

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

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

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

Также читают

Понравилась статья? Поделись с другом!!!

Оставить комментарий

 ;-)  :|  :x  :twisted:  :smile:  :shock:  :sad:  :roll:  :razz:  :oops:  :o  :lol:  :idea:  :grin:  :evil:  :cry:  :cool:  :???:

5 × 1 =