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

Привет, друзья!

Контактная форма — отличный способ сбора информации от посетителей вашего сайта WordPress.

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

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

Преимущества использования контактной формы WordPress

Существует множество платформ и онлайн-инструментов, позволяющих создавать формы.

Многие современные платформы предлагают простой в использовании интерфейс, отчётность и аналитику, а также другие функции.

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

Вот некоторые другие преимущества контактной формы WordPress:

• Генерация лидов – Используя контактную форму WordPress, вы можете использовать эти записи для расширения аудитории через свой сайт. Хороший плагин для форм имеет множество встроенных функций, поэтому вам не понадобятся отдельные плагины для генерации лидов, воронок продаж, подписки на рассылку, интеграции с CRM и многого другого. Это сложно сделать, если посетители пишут вам напрямую с вашего сайта или своей почтовой платформы;
• Лучшая безопасность и проверка. С помощью формы, встроенной в ваш сайт WordPress, вы можете гарантировать доставку результатов вашей формы и использовать службы защиты от спама, такие как Recaptcha, Akismet и другие, защищая свой адрес электронной почты и данные ваших пользователей;
• Управляйте записями и контактами в одном месте — Контактная форма WordPress позволяет вам создать единое центральное хранилище для всех ваших записей и использовать их на всем сайте. Многие плагины для форм позволяют сортировать, организовывать и экспортировать содержимое форм, сохраняя его, и легко создавать обширные базы данных. Это невозможно, когда люди пишут вам напрямую;
• Создавайте различные типы форм с расширенным функционалом — опросы, анкеты, формы заявок и многое другое можно легко создать с помощью контактной формы WordPress. Всё ограничивается лишь вашим воображением, а благодаря конструкторам форм, поддерживающим такие функции, как расширенные вычисления, условные поля и многое другое, наличие контактной формы на вашем сайте поможет сделать ваш сайт интерактивным и заставит посетителей оставаться на нём и возвращаться.

Как добавить контактную форму на свой сайт WordPress (пошаговое руководство)

Мы воспользуемся популярным и многофункциональным плагином контактной формы «WPForms Contact Form», чтобы добавить контактную форму на наш сайт WordPress.

Начнём с установки плагина на наш сайт.

Установить WPForms

Сначала войдите в панель управления WordPress и наведите курсор на «Плагины».

Затем нажмите «Добавить новый» и в поле поиска введите «WPForms».

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

Наконец, нажмите синюю кнопку «Активировать», чтобы завершить установку плагина WPForms.

Теперь, когда плагин установлен и активирован, вы увидите, что в ваше меню WordPress добавлен новый пункт меню.

Создание вашей первой формы

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

Начнём с нажатия оранжевой кнопки «Добавить новую» в верхней части панели управления.

Процесс создания формы в WPForms начинается с присвоения ей имени и выбора одного из множества доступных шаблонов.

Чтобы дать форме имя, введите название в текстовое поле «Название».

Затем выберите шаблон формы.

Мы создадим собственную форму для нашего руководства, поэтому выберем шаблон «Пустая форма».

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

Слева вы увидите типы полей.

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

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

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

Настройка формы и полей формы

Сначала нажмём на поле формы «Имя».

Затем выберем вкладку «Общие» в параметрах поля для этого поля формы.

Теперь изменим формат этого поля и выберем «Имя, Отчество, Фамилия».

Наконец, переключим поле «Обязательное».

Это означает, что мы сделали это поле формы обязательным для заполнения.

Далее перейдём на вкладку «Дополнительно».

Добавим заполнители к полям имён, заполнив их выбранным текстом.

Чтобы настроить поле адреса электронной почты, сначала нажмите на него.

Затем перейдите на вкладку «Общие».

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

Для этого мы включим / выключим поле «Подтверждение адреса электронной почты».

Для нашего раскрывающегося списка щёлкнем по полю, чтобы начать настройку.

Затем откроем вкладку «Общие».

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

Наконец, добавим в это поле параметры.

Наконец, перейдём к последнему полю формы — полю абзаца.

Щёлкните по полю формы, затем перейдите на вкладку «Общие». Назначьте полю метку.

Теперь, когда мы отредактировали поля контактной формы, давайте настроим параметры формы в соответствии с нашими потребностями.

Настройка параметров формы

Чтобы изменить настройки формы, нажмите значок «Настройки» в левой части конструктора форм.

Затем перейдите на вкладку «Общие».

Эта вкладка позволяет редактировать общие настройки формы, такие как её название, описание, теги и т. д.

Далее мы изменим текст кнопки «Отправить».

Прокрутите вниз до текстового поля «Текст кнопки «Отправить»».

Затем введите «Отправить сообщение».

Кроме того, мы изменим текст обработки для нашей формы.

Добавьте выбранный текст в текстовое поле. В нашем случае мы изменили его на «Отправить сообщение».

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

Мы же воспользуемся встроенными функциями WPForm для нашей формы.

Теперь добавим уведомления в нашу форму.

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

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

Затем измените тему письма на «Новое сообщение формы сайта».

Также давайте укажем в поле «От кого» имя, которое мы узнаем в почтовом ящике.

В профессиональной версии WPForms в будущем можно будет добавлять несколько уведомлений.

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

Для этого выберите пункт меню «Подтверждение».

Затем настройте текст подтверждения в текстовом поле.

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

После внесения всех этих изменений в форму нажмите оранжевую кнопку «Сохранить» в правом верхнем углу экрана.

Создав форму, давайте добавим её на страницу!

Добавление контактной формы на страницу WordPress

Чтобы добавить форму на свою страницу, создайте новую страницу на сайте или отредактируйте существующую.

Давайте создадим новую страницу для нашей контактной формы.

Сначала наведите курсор на пункт меню «Страницы» и нажмите «Добавить новую».

После перехода в редактор страниц WordPress по умолчанию дайте странице название.

Затем нажмите на чёрный значок «плюс», чтобы открыть библиотеку доступных блоков.

Найдите WPForms и выберите блок WPForms.

Выберите нужную форму из раскрывающегося списка доступных форм.

Выбрав форму, мы можем начать ее стилизовать в редакторе блоков.

Стилизация вашей формы

WPForms позволяет легко оформить контактную форму.

Вы можете использовать CSS, но также можете воспользоваться простыми инструментами редактора блоков для редактирования и оформления формы.

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

Вот как выглядела наша форма до внесения изменений в стилистику:

После стилизации наша форма выглядит так.

Обратите внимание, что кнопка «Отправить» изменила цвет, а границы полей формы были изменены.

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

Настроив форму и заполнив поля, мы успешно создали нашу первую форму WordPress!

Вот несколько советов и рекомендаций, которые стоит запомнить при создании контактной формы.

Как извлечь максимальную пользу из контактной формы

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

Однако есть несколько советов, которые стоит учитывать при планировании создания сайта.

Думайте нестандартно

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

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

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

Контактную форму можно использовать даже для сбора запросов на персонализацию продукта.

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

Сохраните свою форму в безопасности

Спамеры используют любые средства для достижения своих целей; одним из таких средств являются онлайн-формы обратной связи.

Однако такие функции безопасности, как Akismet или Recaptcha, могут помочь защитить содержимое форм и адрес электронной почты.

Не забывайте обеспечивать надёжную защиту форм при их добавлении на сайт.

Сила интеграции

Интеграция — это то, где нативная контактная форма WordPress может проявить себя во всей красе.

Вы можете создавать собственные формы подписки на email-рассылки, которые автоматически заполняются вашим решением для email-маркетинга (например, UniSender или DashaMail).

Форму можно подключить к CRM-системе, что позволит эффективно развивать лиды.

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

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

Настройте уведомления и электронные письма по форме

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

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

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

Подумайте о пользовательском опыте

Создание формы, оптимизированной для конверсии, гарантирует, что ваши посетители успешно заполнят и отправят её.

Создание простых и понятных форм поможет посетителям успешно её отправить.

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

Учитывайте доступность

Хотя об этом редко говорят, доступность выходит на передний план веб-дизайна.

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

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

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

Вот несколько альтернативных плагинов и платформ для контактных форм, которые стоит протестировать.

• Formidable Forms: популярный конструктор форм с понятным интерфейсом перетаскивания, более 15 премиум-надстроек, создающий продвинутые калькуляторы и многое другое;
• Gravity Forms: еще один плагин форм WordPress, который содержит библиотеку из более чем 30 типов полей форм, интеграцию с платежными системами и сложные шаблоны форм, такие как тесты, опросы и многое другое;
• Ninja Forms: этот плагин форм, интегрированный с такими платформами, как AWeber и CampaignMonitor, может похвастаться более чем 40 премиум-дополнениями, что делает его отличным конструктором форм для тех, кто ценит интеграцию;
• Contact Form 7: мощный бесплатный плагин для WordPress-форм с множеством интеграций от Mailchimp до Stripe;
• Divi: самая мощная тема WordPress имеет великолепный модуль контактной формы, который упрощает процесс создания фирменных форм на вашем сайте, адаптированных для мобильных устройств;
• Google Forms: еще один бесплатный конструктор форм. Google Forms входит в состав каждой учетной записи Google и представляет собой мощный конструктор с превосходной аналитикой, позволяет создавать многостраничные формы и многое другое;
• Typeform: этот конструктор форм с годами стал популярным благодаря своему красивому интерфейсу, анимации форм и интеграции. Он предлагает пользователям уникальный способ взаимодействия с формой в режиме диалога;
• Jotform: один из первых конструкторов онлайн-форм, Jotform претерпел множество изменений и остается одной из самых популярных бесплатных платформ для создания онлайн-форм.

Заключение

Контактная форма — мощный инструмент, который должен быть на каждом сайте.

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

С таким плагином, как WPForms, который поставляется с конструктором с функцией перетаскивания, создание высокофункциональных и красивых форм становится простым.

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

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

Расскажите нам об этом в разделе комментариев ниже!