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

Какие есть виды онлайн форм?

Формы подразделяются на несколько видов:

  • Формы обратной связи
  • Формы подписки
  • Лид-формы
  • Формы регистрации
  • Форма бронирования
  • Формы расчета
  • Формы отзывов
  • Формы оплаты

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

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

Лид-формы - это специальный вид форм, часто используемый на лендингах. Цель лид формы - получить контактные данные клиента (email или телефон) и затем продать ему товар или услугу.

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

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

Формы расчета - позволяют клиентам сайта или интернет-магазина самостоятельно расчитать стоимость товаров или услуг через форму и получить итоговую цену.

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

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

Формы также подразделяются по типу размещения на сайте:

  • Форма на странице
  • Форма по ссылке
  • Форма в всплывающем окне

Формы на странице - добавляются на сайт обычным размещением кода на странице.

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

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

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


Из чего состоит онлайн форма?

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

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

  • Текстовые поля
  • Числовые поля
  • Выпадающие списки
  • Флажки
  • Чекбоксы
  • Кнопки

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

<form> - тег создает форму и может содержать следующие атрибуты:

  • action - адрес страницы, которая обрабатывает данные формы
  • method - метод передачи данных из формы на сервер, например, GET - передача данных  в виде параметров в URL, POST - передача данных в виде сообщения скрытого от пользователя.
  • accept-charset - кодировка данных
  • autocomplete - включает или отключает автозаполнение полей формы.

Простой пример формы:

<form action="/contact" method="POST">
   Имя: <input type="text" name="username"><br>
   Email: <input type="email" name="email"><br>
   <textarea name="content" rows="6"></textarea><br>
   <input type="submit" value="Отправить">
</form>

<input> - универсальный тег, помогает создать элементы формы любого типа, указав его в атрибуте type.

  • type - определяет тип элемента:
    • button - кнопка
    • checkbox - чекбоксы
    • radio - радио кнопки
    • image - кнопка с картинкой
    • file - кнопка загрузки файла
    • hidden - скрытое поле
    • password - поле для ввода пароля
    • text - текстовое поле
    • integer - числовое поле
    • email - ввод адреса электронной почты
    • tel - ввод номера телефона
    • date - ввод дат
    • submit - кнопка отправки данных формы
    • reset - кнопка сброса данных формы

<select> - тег для создания выпадающего списка, пункты списка размещаются внутри тега <option>.

Пример выпадающего списка:

<select>
  <option value="0">Бекон</option>
  <option value="1">Ветчина</option>
  <option value="2">Колбаски</option>
  <option value="3">Креветки</option>
</select>

<label> - метка для указания заголовка полям формы.

Пример метки:

<label for="username">Имя</label>
<input type="text" name="username">

 

Как создать онлайн форму?

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

 

Самостоятельное создание формы

Этот способ требует от вас как минимум знаний языка разметки HTML, а также CSS. А чтобы придать форме динамичность и какие-то визуальные эффекты, понадобится JavaScript. Не обойтись также без PHP, с помощью которого осуществляется прием данных с формы и отправка их на Email.

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

 

Готовые скрипты онлайн форм

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

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

 

Индивидуальный заказ формы

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

 

Плагины для создания формы

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

stepFORM

stepFORM - WordPress плагин для создания форм любой сложности на базе визуального конструктора. В нем есть встроенная защита от спама, сбор ответов на email и CRM, интеграция с Google Analytics и Яндекс.Метрика, расчет стоимости по формулам, прием оплат на PayPal, Wallet One, Яндекс.Деньги и Яндекс.Касса, использование формы по ссылке в соцсетях и многое другое.

Установить плагин

 

Contact Form 7

Contact Form 7 - самый популярный плагин создания форм на Wordpress. Он поможет очень гибко настраивать содержимое форм и отправку данных на почту. Плагин включает в себя ajax отправку, а также Captcha и Akismet против спама.

Установить плагин

 

WPForms

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

Установить плагин

 

Ninja Forms

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

Установить плагин

 

Конструкторы создания форм

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

Плюсы конструкторов форм:

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

Минусы конструкторов фом:

  • исходный код формы хранится на стороннем сервере и вы не сможете скачать полностью код, если захотите
  • не во всех конструкторах форм можно подключить свои скрипты и дополнительные сервисы, например, CRM, Google Analytics и т.п.

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

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

Google Forms

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

  • Текст
  • Абзац текста
  • Выпадающие списки
  • Флажки
  • Чекбоксы
  • Шкала с диапазоном
  • Изображения
  • Загрузка файлов
  • Сетка с флажками и чекбоксами
  • Дата
  • Время

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

Создать форму

 

Typeform

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

  • Короткий текст
  • Длинный текст
  • Множественный выбор
  • Утверждение
  • Изображения
  • Шкала
  • Рейтинг
  • Дата
  • Числа
  • Группы вопросов
  • Прием оплаты
  • и другие

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

 

Создать форму

 

uCalc

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

  • Выпадающие списки
  • Ползунки
  • Галочки
  • Флажки
  • Числовое поле
  • Текстовое поле
  • Большое текстовое поле
  • Email адрес
  • Номер телефона
  • Дата
  • Время
  • Загрузка файла
  • Изображения
  • Кнопки

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

 

Создать форму

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