Из чего состоит онлайн форма?
Любая онлайн форма состоит из разного рода элементов, необходимых для правильной работы формы и ее отображения на странице сайта. Самым главным элементом, является HTML тег — , который дает понять браузеру, что внутри размещены элементы формы.
Элементами формы являются различные поля и переключатели:
- Текстовые поля
- Числовые поля
- Выпадающие списки
- Флажки
- Чекбоксы
- Кнопки
Каждый элемент формы имеет атрибуты, которые определяют состояние и вид элементов.
— тег создает форму и может содержать следующие атрибуты:
- — адрес страницы, которая обрабатывает данные формы
- — метод передачи данных из формы на сервер, например, GET — передача данных в виде параметров в URL, POST — передача данных в виде сообщения скрытого от пользователя.
- — кодировка данных
- — включает или отключает автозаполнение полей формы.
Простой пример формы:
— универсальный тег, помогает создать элементы формы любого типа, указав его в атрибуте
-
— определяет тип элемента:
- — кнопка
- — чекбоксы
- — радио кнопки
- — кнопка с картинкой
- — кнопка загрузки файла
- — скрытое поле
- — поле для ввода пароля
- — текстовое поле
- — числовое поле
- — ввод адреса электронной почты
- — ввод номера телефона
- — ввод дат
- — кнопка отправки данных формы
- — кнопка сброса данных формы
— тег для создания выпадающего списка, пункты списка размещаются внутри тега
Пример выпадающего списка:
— метка для указания заголовка полям формы.
Пример метки:
Соглашение на обработку персональных данных
Изменения сохраняем и переходим во вкладку СОГЛАШЕНИЯ. Выбираем пункт «Типовое соглашение об обработке персональных данных», в окошко с шаблоном вставляем свой вариант. Затем прописываем текст, который будет показываться после отправки сообщения, и сохраняем изменения.
Пример формы обратной связи для формы
Дизайн
Если отсутствуют навыки по разработке и верстке, можете воспользоваться простыми шаблонами во вкладке ДИЗАЙН. Поставьте галочку рядом с «Использовать оформление сервиса QForm» и выберите один из трех Типов формы — получится простой вариант на основе файла стилей сервиса.
Шаблоны форм обратной связи для форм
Настраиваем JavaScript-события
В случае необходимости отслеживать статистику по обращениям можно настроить отправку целей в систему аналитики Яндекса или Google во вкладке JavaScript-события. Шаблоны кода для отправки указаны на этой же странице, останется только подставить в код номер счётчика и имя событий. Эту же вкладку можно использовать для выполнения любого другого Java-script кода, например JS-редирект на другую страницу вашего сайта.
Настройка отправки JS события через QForm
Не забываем сохранить все изменения и смотрим, что у нас получилось.
5 минут настройки = готовая формы заявки
Назад на главную
Готовые скрипты онлайн форм
Если вы не можете самостоятельно создать форму, то возможно сможете найти готовый скрипт или виджет, которых просто огромное количество. Вы можете бесплатно скачать скрипты форм и использовать их у себя на сайте.
Но есть здесь и свои минусы. С вероятностью 100% вы захотите что-то изменить в содержимом формы, ведь не всякая форма может с первого раза подойти под потребности посетителей вашего сайта. Поэтому все-таки придется копаться в коде формы самостоятельно, либо искать для этого специалиста. Некоторые из скриптов, как правило, оказываются нерабочими и не дают никаких гарантий безопасности при установке на сайт. Кроме этого, из-за отсутствия какой-либо защиты, формы становятся лакомым местом спамеров. Такие скрипты форм вы используете на свой страх и риск.
6 лучших бесплатных приложений для создания форм.
1. Google Forms: для интеграции с Google таблицами.
В Google Forms доступно более 10 типов форм с удобным текстовым вводом данных. Создайте любое количество форм, добавьте столько вариантов ответа, сколько может вместить электронная таблица, – лимитов не существует. Также вы можете использовать скрипты Google Forms, чтобы добавить уведомления, проверку достоверности, логику действий и многое другое.
В приложении нет возможности загружать файлы или принимать оплату. Темы форм достаточно простые, не составит никакого труда определить, что это продукт Google. Однако в нем есть все основные функции, причем это совершенно бесплатно.
2. Typeform: для форм с современным дизайном.
Бесплатно предоставляется неограниченное количество форм и ответов. Доступ к таким дополнительным функциям, как поля для совершения оплаты, можно получить, обновив приложение.
3. Ninja Forms: для создания форм для WordPress.
Для получения доступа к таким функциям, как загрузка файлов, использование дополнительных макетов и инструментов, можно приобрести специальные дополнения. Начать лучше всего с бесплатной версии, а затем усовершенствовать ее, подстроив под собственные нужды.
4. Formhub: для сбора данных в open-source.
Вам нужно приложение, которое вы сможете использовать с собственного сервера, офлайн с мобильного устройства?
Formhub – базовое решение для создания форм, и хоть интерфейс и не похож на обычный конструктор, его относительно просто использовать. При этом возможность изменения кода делает его очень гибким.
5. Podio: для форм с экосистемой приложений.
Собранные данные хранятся в приложении Podio, что позволяет вам легко их обрабатывать и сортировать, а также приглашать для совместной работы свою команду. Еще вы можете использовать другие приложения Podio для организации доступа к проектам, отправки сообщений и т.д.
Этот инструмент нуждается в предварительной настройке, но при этом он намного мощнее других похожих конструкторов. Использовать его бесплатно может одновременно 5 человек.
6. PlanSo Forms: для создания простых форм из нескольких колонок.
От других форм PlanSo Forms отличается тем, что позволяет быстро создавать формы из нескольких колонок. Элементы легко перемещать и назначать им определенную функцию. Бесплатно доступно неограниченное количество форм и заполнений, а также возможность создания форм с множеством колонок.
