Как создать базовую контактную форму с помощью плагина WPForms

Приветствую вас, дорогие посетители моего блога!

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

Как создать базовую контактную форму с помощью плагина WPForms

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

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

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

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

Зачем использовать WPForms?

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

Зачем использовать WPForms

WPForms Lite доступен из каталога плагинов WordPress.

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

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

Как добавить плагин WPForms Lite на свой сайт WordPress

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

Самый быстрый способ добавить плагин на свой веб-сайт — войти в свою админ-панель WordPress и перейти к разделу плагинов на панели инструментов.

Самый быстрый способ

WPForms Lite может быть установлен прямо из вашей панели WordPress.

На странице «Добавление плагинов» введите «WPForms Lite» в поле поиска и установите первый плагин, возвращенный в результатах.

Добавление плагинов

Найдите «WPForms Lite», затем нажмите кнопку «Установить сейчас».

На следующем экране нажмите кнопку «Активировать» и WPForms будет готов к использованию на вашем веб-сайте WordPress.

Как создать базовую контактную форму WordPress с WPForms

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

приветственное сообщение

Экран приветствия WPForms Lite содержит видео, помогающее создать первую форму

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

Создать свою первую форму

Специальное меню WPForms позволяет легко получить доступ к функциям плагина

Помимо нажатия кнопки «Создать свою первую форму», теперь у вас также есть возможность принять участие в конкурсе WPForms, который поможет вам в создании первой формы менее чем за пять минут. Если вы решите принять вызов, мастер установки проведет вас через пять этапов создания формы — от присвоения ей имени до публикации на вашем веб-сайте.

принять участие в конкурсе

Мастер настройки WPForms проведет вас через пять этапов создания вашей первой формы

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

интерфейс построителя форм

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

Хотя вы можете начать с пустой формы, рекомендуется выбрать простой шаблон контактной формы.

выбрать простой шаблон

Шаблон простой контактной формы содержит все необходимые поля

Для большинства целей достаточно простого шаблона контактной формы. Однако, если вам нужно добавить какие-либо дополнительные поля в вашу контактную форму, это так же просто, как нажать на любое из стандартных полей на левой панели, чтобы вставить их в вашу форму. Однако если вы хотите использовать какие-либо из полей «Fancy Fields» или «Payment Fields», вам нужно будет перейти на профессиональную версию WPForms.

дополнительные поля

Необычные поля и поля оплаты зарезервированы только в премиальной версии WPForms

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

начать его редактирование

Нажатие на поле в форме приводит к тому, что настройки поля отображаются на левой панели

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

позволяет изменять

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

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

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

Параметры сгруппированы в три раздела, охватывающих параметры «Общее», «Уведомление» и «Подтверждение» для формы.

три раздела

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

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

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

смарт-теги

WPForms отправит электронное письмо с записью формы на адрес по вашему выбору

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

параметры подтверждения

С WPForms вы можете выбрать, что произойдет после отправки формы

Опять же, когда вы будете довольны подтверждением формы, нажмите кнопку «Сохранить», чтобы подтвердить изменения.

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

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

шорткод формы

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

Еще один способ добавить одну из ваших форм на ваш веб-сайт — создать новую запись или страницу или открыть существующую для редактирования, а затем нажать кнопку «Добавить форму».

Добавить форму

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

После того, как вы нажали кнопку «Добавить форму», вы можете выбрать, какую форму вставлять, а также выбрать, отображать ли заголовок или описание формы.

описание формы

WPForms дает вам возможность отображать имя формы и описание

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

шорткод будет заменен

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

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

заполнить форму

Когда ваша форма опубликована, ее внешний вид должен интегрироваться с вашей темой WordPress

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

виджет WPForms

Виджет WPForms позволяет отображать формы в областях виджетов вашей темы

Управление контактными формами WordPress

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

Все формы

Вы можете просматривать и управлять своими формами через страницу WPForms в вашей панели WordPress

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

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

Последние мысли

Как видите, бесплатный плагин WPForms Lite предоставляет очень простой способ добавления контактных форм на веб-сайты WordPress.

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

А у меня на этой ноте все — до скорых встреч!

А какой контактной формой пользуетесь вы на своем блоге или сайте? Напишите ответ в комментариях ниже!

Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
3 комментария к статье "Как создать базовую контактную форму с помощью плагина WPForms"
  1. Юрич: 29.03.2020 в 00:52

    Приветствую, Дмитрий!
    Насколько я помню почта берется из настроек самого WordPress. То есть та, которую вы вводите при создании сайта. https://prnt.sc/rok4c0

  2. Дмитрий: 29.03.2020 в 00:47

    Либо я недалёкий, либо в статье нет самого главного — куда вписать свой email? Я создал форму и установил на сайт, но сообщения на мою почту не приходят. В настройках плагина некуда вписывать почту, на которую будут приходить письма от пользователей сайта. Как привязать почту? Куда её блин вписать? Ответьте пожалуйста, никак не могу найти ответ

  3. Ваши советы: 26.11.2019 в 06:28

    Только почта? А мне надо отправлять и обрабатывать информацию на сайте. Как?

Заказать сайт