Как добавить контактные формы с помощью плагина - P1: использовать контактную форму 7

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

В первой части серии «Контактная форма» мы узнаем:

• Что такое контактная форма?
• Преимущества контактной формы
• Как использовать плагин Contact Form 7 для создания формы?

Что такое контактная форма и ее преимущества?

Что такое контактная форма?

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

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

Преимущества контактной формы

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

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

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

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

Как создать контактную форму

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

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

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

Создание формы с помощью контактной формы 7

В этой первой статье из серии «Создание контактной формы с помощью плагинов» я использую Contact Form 7 - один из самых популярных бесплатных плагинов для контактных форм, доступных сегодня.

Прежде всего, загрузите и установите этот плагин из репозитория плагинов на wordpress.org или перейдите в Панель управления > Плагин > Добавить новый, чтобы установить и активировать его.

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

Автор (ы): Такаюки Миёси

Текущая версия: 5.5.3

Последнее обновление: 28 ноября 2021 г.

contact-form-7.5.5.3.zip

82% Рейтинги 5 000 000+ Установлен WP 5.7+ Требуется

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

Интерфейс

Перейдите в Личный кабинет > Контакт > Добавить, чтобы создать новую контактную форму. Вот интерфейс, с которым вы будете работать:

(1): введите имя контактной формы
(2): вкладки для создания и настройки контактной формы, в том числе:

• Вкладка Форма : создание полей для контактной формы
• Вкладка « Почта »: настройте электронные письма, которые вы будете получать из контактной формы.
• Вкладка « Сообщение »: включает уведомления, которые пользователи получают, когда возникает ошибка при вводе данных, форма не может быть отправлена, отправка формы успешно,…
• Вкладка Дополнительные настройки : добавьте другие элементы в контактную форму.

Создать поля для контактной формы

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

(1) состоит из полей для добавления в форму, таких как имя, адрес электронной почты, номер, кнопка отправки,… Чтобы добавить любое поле, просто щелкните имя соответствующего поля.

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

Общая инструкция для полей

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

Имя : атрибут имени
Значение по умолчанию: значение поля по умолчанию.
Атрибут Id : ID поля
Атрибут класса : класс поля

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

После заполнения этой информации вы увидите тег поля, которое вы создали, внизу этого поля. Щелкните « Вставить тег», чтобы вставить это поле в HTML-код формы.

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

 [поле * name_attribute id: field_id class: field_class «значение поля по умолчанию»]

Пояснения:

• field * - это тип поля, который вы выбираете. Это самая важная и обязательная часть поля.
• * означает, что это поле обязательно для заполнения. Если вы не хотите заставлять пользователей вводить его, удалите * .

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

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

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

Ниже приведены подробные инструкции для каждого поля.

Создайте поле для ввода имени

Выделите текстовое поле и введите в него основную информацию о поле:

В разделе Тип поля вы можете выбрать требовать, чтобы это поле было обязательным для заполнения (это необязательно).

Примечание . В разделе « Значение по умолчанию » выберите « Использовать этот текст в качестве заполнителя поля», чтобы отображать это содержимое в поле до того, как пользователи вводят данные. Вы должны использовать этот режим, чтобы объяснить пользователям, что им нужно заполнить в поле.

Раздел Akismet связан с плагином Akismet - плагином для защиты от спама. Если у вас нет этого плагина, не обращайте внимания на этот раздел.

Создайте поле для ввода номера телефона

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

В разделе Тип поля выберите тип для этого поля. Есть два типа полей: Spinbox и Slider .

Ползунок отобразит шкалу для выбора числа следующим образом:

Этот стиль подходит для подсчета очков или выбора чисел на основе определенной шкалы.

Между тем, Spinbox позволяет вам вводить любой номер, последовательность цифр в поле, например номер телефона, номер карты, номер ID-карты ... Итак, в этом примере я выбираю Spinbox.

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

Создайте поле для выбора специальностей и мест обучения

В этом поле выберите раскрывающееся меню .

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

Если вы хотите разрешить пользователям выбирать несколько вариантов одновременно, щелкните Разрешить множественный выбор .

Создайте поле для выбора цели регистрации

Установите флажок в поле.

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

• Сначала ставьте ярлык, а затем - флажок
• Оберните каждый элемент этикеткой
• Сделайте флажки эксклюзивными (вы можете выбрать только 1 вариант).

Создайте кнопку отправки

Наконец, выберите поле отправки и просто заполните информацию в соответствии со следующим требованием (обратите внимание, что метка - это слово, которое будет отображаться на этой кнопке, например, «Отправить», «Зарегистрироваться», «Подтвердить»).

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

Добавить ярлыки для полей

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

Следовательно, вам необходимо добавить метки к полям, вставив следующую структуру кода в HTML-часть формы:

 <label> Метка поля
[Тег поля] </label>

Затем напишите метку поля в разделе « Метка поля ». Затем введите всю указанную выше информацию и нажмите « Сохранить» .

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

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

<label> Ваш номер телефона
[номер телефона заполнитель "введите свой номер телефона"] </label> <label> Ваш адрес электронной почты (обязательно)
[email * your-email «введите свой адрес электронной почты»] </label>

<label> Майор
[выберите * специальность «Информатика» «Лингвистика» «Сельское хозяйство» «Инженерное дело» «Электронная коммерция»] </label>
<label> Место для изучения 
[выберите * Местоположение для изучения "Нью-Йорк" "Чикаго" "Лос-Анджелес" "Вашингтон, округ Колумбия" "Хьюстон" "Филадельфия"] </label>

</label> Зарегистрируйтесь, чтобы
[checkbox * register label_first "Study" "Take a tour" "Consult"] </label>

[отправить «Отправить»]

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

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

Настроить электронную почту

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

Пояснения:

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

Другие настройки

Вкладка сообщений

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

Вкладка дополнительных настроек

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

• Режим только для подписчиков
• Демонстрационный режим
• Пропуск почты
• Принятие в качестве подтверждения
• Настройки фламинго
• Подавление хранения сообщений
• Код JavaScript

Есть несколько довольно полезных частей, которые вам следует использовать, например:

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

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

Отображение контактной формы на веб-сайте

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

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

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

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

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

 <div class = "form__field form__full-width">
<label> Ваше имя (обязательно)
[текст * заполнитель ваше-имя «введите ваше имя»]
</label>
</div>
<div class = "form__field">
<label> Ваш номер телефона
[заполнитель номера телефона "введите свой номер телефона"]
</label>
</div>
<div class = "form__field">
<label> Ваш адрес электронной почты (обязательно)
[email * ваш-адрес электронной почты заполнитель «введите свой адрес электронной почты»]
</label>
</div>
<div class = "form__field">
<label> Майор
[выберите * специальность «Информатика» «Лингвистика» «Сельское хозяйство» «Инженерное дело» «Электронная коммерция»]
</label>
</div>
<div class = "form__field">
<label> Место для изучения
[выберите * Место исследования "Нью-Йорк" "Чикаго" "Лос-Анджелес" "Вашингтон, округ Колумбия" "Хьюстон" "Филадельфия"]
</label>
</div>
<div class = "form__field form__full-width">
<label> Зарегистрируйтесь в
[checkbox * register use_label_element "Study" "Take a tour" "Consult"]
</label>
</div>
<div class = "form__field form__full-width">
[отправить «Отправить»] </div>

Затем перейдите в Настройщик вашей темы> Дополнительный CSS и вставьте следующий код:

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

Наконец, нажмите « Опубликовать», чтобы сохранить.

Последние слова

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

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