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

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

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

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

Шаг 1. Установите и активируйте плагин WPForms

У этого плагина есть бесплатная версия на wordpress.org, поэтому вам просто нужно установить и активировать плагин прямо на панели администратора .

Контактная форма от WPForms - конструктор форм перетаскивания для WordPress

Автор (ы): WPForms

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

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

wpforms-lite.1.7.1.2.zip

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

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

На панели управления администратора перейдите в WPForms > Добавить новый .

Вот интерфейс, с которым вам предстоит работать:

На левой боковой панели вы можете увидеть 5 разделов:

1. Настройка : назовите контактную форму и выберите ее шаблон.
2. Поля : добавьте и настройте поля для контактной формы.
3. Настройки : настройка уведомлений, подтверждений и общих настроек.
4. Маркетинг : связь с инструментами электронного маркетинга, такими как Constant Contact, Campaign Monitor, Mailchimp,…
5. Платежи : добавьте платеж из PayPal Standard, Stripe и Authorize.Net.

Примечание . Я не провожу маркетинговую кампанию по электронной почте, и моя форма не требует платежной информации. Поэтому разделы " Маркетинг" и " Платежи" мне не нужны.

В разделе « Настройка » введите имя вашей формы и выберите желаемый шаблон.

Есть четыре шаблона по умолчанию:

• Простая контактная форма
• Форма подписки на рассылку новостей
• Предложение для
• Пустая форма

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

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

Шаг 3. Добавьте поля для контактной формы

Добавить поля

Выбрав шаблон пустой формы на шаге 2, вы перейдете в раздел « Поля ».

Чтобы добавить поля для контактной формы, перетащите нужные поля со вкладки « Добавить поля » в контактную форму.

Затем, чтобы настроить поле, щелкните его, а затем отредактируйте его параметры на вкладке « Параметры полей ».

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

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

После добавления всех этих полей вам необходимо настроить каждое поле на следующих шагах.

Настроить общие параметры для каждого поля

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

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

• Ярлык : введите имя поля, которое вы хотите отобразить.
• Описание : это текст, отображаемый под полем, чтобы сообщить пользователям, что делать.
• Обязательно : это необязательно! Установите этот флажок, чтобы сделать это поле обязательным для заполнения.

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

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

• Текст-заполнитель : отображение текста внутри полей перед вводом данных пользователями. Этот текст можно использовать в качестве руководства или примера, чтобы помочь пользователям легко понять, что им нужно заполнить. Например, вы можете установить текст заполнителя в поле электронной почты как «Введите свой адрес электронной почты».
• Значение по умолчанию : если у многих людей один и тот же ответ, вы можете установить ответ по умолчанию, чтобы сэкономить время и усилия пользователей. Например, вы создаете контактную форму для людей, которые живут в Нью-Йорке, поэтому вы можете ввести значение по умолчанию «Нью-Йорк» в поле «Местоположение».
• Классы CSS : введите в это поле классы CSS, чтобы задать стиль для поля. На следующем этапе я добавлю в этот раздел код для стилизации контактной формы.

Примечание :

• В контактной форме 7 вы можете использовать значение по умолчанию в качестве текста-заполнителя. Но в WPForms это удобнее, потому что у вас есть разделенный текст- заполнитель. Кроме того, в WPForms есть раздел « Описание », в котором отображается текст под полем. Я использую этот способ, потому что он делает мою контактную форму лучше.

• Вы можете нажать кнопку со знаком вопроса рядом с опциями / полями, чтобы прочитать инструкции WPForms для них.

Кроме того, в зависимости от каждого поля есть несколько разных вариантов. Давайте узнаем, что это такое!

Настройте поле «Ваше имя»

Выберите поле Simple Line Text и просто введите основную информацию:

В этом поле есть еще 2 опции в разделе Advanced Options :

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

Настройте поле «Ваш номер телефона»

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

Настройте поле «Ваш адрес электронной почты»

Выберите поле Электронная почта и заполните основную информацию для поля:

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

Настройте поля «Местоположение для изучения» и «Основные»

Сначала выберите раскрывающееся поле. В разделе "Выбор" введите параметры поля. Вы можете нажать (+) (-), чтобы добавить / удалить варианты.

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

Кроме того, в этом поле есть 2 дополнительных параметра, о которых вам следует позаботиться:

• Стиль . В раскрывающемся меню можно выбрать один из двух вариантов: классический и современный. Современный стиль позволяет искать по ключевым словам. Поэтому он хорошо работает с меню с большим количеством опций (более 10 опций).
• Динамический выбор : позволяет пользователям выбирать варианты из типов сообщений или таксономий. Например, если вы выберете « Источник динамического типа сообщения» как « Сообщения» , каждый вариант в раскрывающемся меню - это публикация на вашем веб-сайте.

Настройте поле «Зарегистрироваться в»

Установите флажки в полях и введите варианты, такие как поля раскрывающегося списка .

В этом поле есть 2 дополнительных параметра, о которых вам следует позаботиться:

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

Шаг 4. Настройте контактную форму

После создания контактной формы нам необходимо ее настроить. В бесплатной версии WPForms вы можете настроить три раздела ниже:

Настроить общие параметры

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

• Текст кнопки «Отправить» : в контактной форме 7 необходимо создать поле « Отправить» . Но в WPForms кнопка отправки встроена. Вы можете изменить текст этой кнопки в этом разделе на все, что захотите, например «Зарегистрироваться на», «Отправить электронное письмо» и т. Д.
• Включите защиту от спама . Иногда спамеры могут беспокоить вас тоннами «мусорной формы». В этом случае вам следует включить эту функцию защиты от спама.

Настроить уведомления

Если вы хотите получать уведомление по электронной почте всякий раз, когда пользователь отправляет контактную форму, перейдите в « Настройки» > « Уведомления» .

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

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

Это пример моих настроек:

Настройте подтверждения

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

Когда вы закончите всю настройку, просто нажмите Сохранить .

Шаг 5. Отображение формы на страницах / сообщениях

Чтобы отобразить ваши формы на страницах / сообщениях, есть 2 способа.

Первый способ - нажать « Вставить», чтобы отобразить форму на странице:

После этого вставьте контактную форму на новую или существующую страницу своего сайта.

Второй способ - вставить шорткод контактной формы на страницы / сообщения. Я рекомендую вам выбрать второй способ, потому что он может отображать контактную форму как в сообщениях, так и на страницах . Для этого на панели управления администратора перейдите в WPForms > Все формы , найдите свою контактную форму и скопируйте ее шорткод.

Затем вставьте этот шорткод в нужные сообщения / страницы.

И вот результат:

Он пока не похож на образец контактной формы, поэтому мне нужно немного его стилизовать.

Шаг 6: стилизуйте форму

На панели управления администратора перейдите в WPForms > Все формы , найдите свою контактную форму и нажмите « Изменить» .

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

• Ваше имя и зарегистрируйтесь на : ip-100
• Ваш номер телефона, электронная почта, Место для изучения, майор: ip-50

Затем перейдите в Customizer > Addition CSS , добавьте этот код:

 .wpforms-field-container {
    дисплей: гибкий;
    flex-wrap: обертка;
		justify-content: пробел между
}

.ip-50 {
    ширина: 48%! важно;
}

.ip-100 {
		ширина: 100%! важно;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	максимальная ширина: 100%;
}

.ip-100 ul {
	дисплей: гибкий;
	justify-content: пробел между;
}

div.wpforms-container-full {
    нижнее поле: 24 пикселя;
    фон: #eeeeee;
    отступ: 20 пикселей;
}

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

И вот окончательный результат:

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

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

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

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