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

Форма обратной связи html и php для сайта

2019.08.11Viktar Haurylavets

Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.

Почему используется HTML и PHP?

Для CRM, таких как WordPress, Joomla и других можно найти различные плагины для установки формы обратной связи для сайта.

Однако, что мне не нравится в таких плагинах, так это часто их низкая производительность и замедление сайта из-за загрузки лишнего «мусора» – ненужных стилей и скриптов.

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

Форма связи на HTML просто вставляется в админке Joomla, WordPress, OpenCart, ModX, а если ваш сайт самонаписный или вы используете любой фреймворк на PHP, то использовать представленный код не составит труда и сайт будет загружаться так же быстро как и раньше.

Структура кода реализации обратной связи для сайта

Далее приведен алгоритм работы обратной связи:

1. Код HTML формы, вставленный на страницу + CSS стили для его оформления.
2. PHP файл, который и выполняет отправку письма или иное действие для регистрации запроса.

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

При нажатии на кнопку «Отправить» выполняется PHP скрипт на сервере через POST запрос, который отправляет письмо или выполняет иное действие.

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

Код формы обратной связи на HTML

Вначале приведем исходный код простой формы обратной связи для сайта на HTML:

Имя * Номер телефона (с кодом) * Сообщение

Сама форма находится между HTML тегами . Тегу присвоен CSS класс class=”form-zvonok” , который используется для реализации отображения через CSS стили.

Рассмотрим атрибуты формы

• autocomplete=”off” — автозаполнение формы отключено, при повторном заходе на страницу все поля ввода будут обнулены. Рекомендуется автозаполнение отключать, так как при включенном иногда возникали проблемы, что при изменении значений полей формы отправлялись на сервер старые значения.
• Атрибут action='email.php', в нём указан адрес скрипта, в данном случае PHP, который вызывается и которому передаются данные формы после нажатия кнопки «Отправить». Если указан не полный путь к скрипту, как здесь, то обращение будет с адреса, на котором размещена форма. Например форма находится по этому адресу http://site.com/feed-back, тогда обращение будет http://site.com/feed-back/email.php. Так же это может быть любой путь, по которому обрабатывается запрос.
• Атрибут method='post', в этом случае данные отправляются скрытно и не отображаются в адресной строке, другой метод GET отправляет данные формы через адресную строку. В этом случае после адреса строки появляется вопросительный знак «?» после которого идут название поля, его значение, что является небезопасным способом отправлять данные формы. Так, учитывая SEO оптимизацию сайта, данные формы обратной связи для сайта лучше отправлять методом POST, так как данные передаются скрытно, а в случае метода GET у сайта по сути будет доступно множество однотипных страниц, которые отличаются только несколькими параметрами после «?», что приведет к дублям страниц.

Далее внутри тега находится контейнер с CSS классом class=”form-zvonok”, он отвечает за компоновку полей ввода и подписей к ним.

Внутри этого контейнера, находятся другие div содержащие теги подписей и полей ввода . А в самом конце размещено поле — кнопка «Отправить», при нажатии на которую происходит отправка данных формы браузером

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

Отправка письма PHP скриптом

Приведем код простого скрипта для отправки письма

Чтобы отправить письмо на нужный email, замените значение переменной $to email@tut.by на необходимый адрес.

Переменная $subject — тема сообщения, показывается почтовыми программами при просмотре списков писем. $message — само тело письма, это и есть само сообщение.

$headers — шапка письма, в ней указывается тип письма, например HTML, а также: кодировка, от кого доставлено письмо и на какой emal отправлять ответ.

Простой скрипт обработки данных формы HTML в PHP скрипте

Приведем сначала исходный код:

Источник: https://dev.asifmoda.com/web-programming/%D1%84%D0%BE%D1%80%D0%BC%D0%B0-%D1%81%D0%B2%D1%8F%D0%B7%D0%B8-%D0%B4%D0%BB%D1%8F-%D1%81%D0%B0%D0%B9%D1%82%D0%B0-%D0%BD%D0%B0-php-html

Формы и поля в HTML. Все о HTML формах

В HTML для создания форм используются теги группы form. К ним относятся:

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

На этой странице описана практика создания и работы с HTML формами с примером исходного кода и описанием на русском языке.

Создание формы в HTML

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

Тег является корневым элементом HTML формы. Все элементы формы должны находиться внутри тега , либо быть связанными с формой при помощи атрибута form, содержащего идентификатор формы (значение атрибута id тега ).

Элементы формы (другое название – поля) формируются с помощью тегов группы form. Основные типы элементов описаны ниже на этой странице. Подробное описание всех типов полей форм находится на страницах тегов соответствующих элементов.

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

Пример HTML формы обратной связи

Обратная связь Тема обращения Выберите вариант Вопрос по работе сервиса Помощь в оформлении заказа Сотрудничество Пожелания / предложения Ваше имя Ваш email Сообщение

Рассмотрим подробно код формы.

Родительским элементом является тег . Атрибут class определяет название CSS класса для стилизации формы, name – имя формы; method=”POST” означает, что данные введенные пользователем будут переданы в теле HTTP запроса.

Существует 2 метода передачи данных формы на сервер: GET и POST. Используя метод GET, данные будут переданы в виде пар “имя-значение” в URL адресе обработчика. В случае использования метода POST данные передаются скрыто.

Их можно увидеть только с помощью специальных инструментов, открыв HTTP запрос.

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

Атрибут action содержит URL обработчика формы – по этому адресу будет отправлена форма после наступления события submit (submit – событие отправки формы).

Внутри тега , помимо текстовых элементов, находятся элементы формы: – список, типов text и email – поля ввода, – текстовая область и – кнопка отправки формы.

Каждый элемент cодержит атрибут name. При отправке формы, значения введенные пользователем будут переданы в переменных с именами указанными в этом атрибуте. Атрибут type определяет тип элемента . Атрибут required делает элемент обязательными для заполнения. Форма не будет отправлена, пока пользователь не заполнит все обязательные элементы.

Стилевое оформление формы

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

Код CSS для базового оформления HTML формы обратной связи из примера выше:

Элементы (поля) формы html. Основные типы полей

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

Обработка HTML формы на сервере

После отправки формы данные передаются на сервер в виде параметров запроса.

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

Для создания обработчика понадобится один из доступных языков программирования. Распространенным вариантом является использование PHP обработчиков.

В случае использования PHP обработчика данные формы будут доступны в суперглобальных массивах $_GET и $_POST. Например, данные поля с именем “message”, отправленные методом POST, будут доступны как $_POST['message'].

Работа с формами на сервере – это отдельная обширная тема. Об обработке HTML форм на сервере читайте в справочнике по выбранному языку программирования.

Ниже представлен простейший PHP обработчик для формы обратной связи, приведенной выше. Данный обработчик отправляет данные формы на указанный email.

Этот код необходимо разместить на сервере в корневом каталоге сайта в файле feedback.php (в файле, указанном как обработчик формы).

Код простого PHP обработчика формы обратной связи

by Lebedev

Источник: https://guruweba.com/html/formy-i-polya-v-html-vse-o-html-formakh/

Делаем форму обратной связи на сайте – Журнал «Код»: программирование без снобизма

Делаем форму обратной связи на сайте

Фор­ма обрат­ной свя­зи — древ­ней­шее про­грам­мист­ское искус­ство. Тут есть всё: фор­ма с про­вер­кой, при­ём запро­са, обра­бот­ка, без­опас­ность, хра­не­ние и ответ. Это как Hello World, толь­ко для самых кру­тых.

В сего­дняш­ней вер­сии про­грам­мы — толь­ко самые осно­вы это­го упраж­не­ния. В сле­ду­ю­щих частях мы про­ка­ча­ем систе­му.

Смысл про­грам­мы в том, что посе­ти­тель стра­ни­цы запол­ня­ет нуж­ные поля, пишет текст сооб­ще­ния и нажи­ма­ет кноп­ку «Отпра­вить». На почту вла­дель­цу сай­та при­хо­дит пись­мо с тек­стом сооб­ще­ния и дан­ны­ми о том, кто это сооб­ще­ние отпра­вил.

Что­бы сде­лать у себя на сай­те такое, нам пона­до­бит­ся:

• сер­вер, кото­рый уме­ет рабо­тать с PHP-скриптами,
• стра­ни­ца, где раз­ме­стим фор­му,
• скрипт на PHP — он будет отве­чать за отправ­ку сооб­ще­ния.

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

Сер­вер для PHP мож­но запу­стить на вашем ком­пью­те­ре, но без допол­ни­тель­ной настрой­ки он будет виден толь­ко лич­но вам. Это нор­маль­ная ситу­а­ция при раз­ра­бот­ке про­дук­та, но для реаль­ной бое­вой зада­чи нуж­но будет под­нять сер­вер где-то в интер­не­те.

Когда мы дела­ли про­ект «Пуб­ли­ку­ем свою стра­ни­цу в интер­не­те», то уже исполь­зо­ва­ли сер­вер (эту услу­гу нам предо­ста­ви­ла хостин­го­вая ком­па­ния SpaceWeb). Этот же сер­вер мы можем исполь­зо­вать для нашей сего­дняш­ней зада­чи, пото­му что он тоже уме­ет рабо­тать с PHP-файлами:

Если такое есть у ваше­го хостин­га, то вы тоже смо­же­те исполь­зо­вать все воз­мож­но­сти PHP.

Готовим страницу с формой

Возь­мём стан­дарт­ный шаб­лон стра­ни­цы и напол­ним его сти­ля­ми и кодом для фор­мы.

language: HTML

Про­пи­шем CSS-стили, что­бы наша стра­ни­ца выгля­де­ла опрят­но. Забе­жим немно­го впе­рёд и исполь­зу­ем в сти­лях раз­де­лы input и textarea:

language: CSS

/*Задаём общие параметры для всей страницы: шрифт и отступы*/

body{

  /*text-align: center;*/

  margin: 10;

  font-family: Verdana, Arial, sans-serif;

  font-size: 16px;

} 

/* Настраиваем внешний вид полей ввода*/

input {

  display: inline-block;

  margin: 10px auto;

  border: 2px solid #eee;

  padding: 10px 20px;

  font-family: Verdana, Arial, sans-serif;

  font-size: 16px;

}

textarea {

  display: inline-block;

  margin: 10px auto;

  border: 2px solid #eee;

  padding: 10px 20px;

  font-family: Verdana, Arial, sans-serif;

  font-size: 16px;

}

Что­бы сде­лать фор­му на стра­ни­це, мы будем исполь­зо­вать такие теги:

— для вво­да име­ни, почты для свя­зи и темы пись­ма. Они зани­ма­ют одну стро­ку, нам это­го доста­точ­но.

— здесь будут писать само сооб­ще­ние, поэто­му нуж­но будет сде­лать это поле поболь­ше и поши­ре.

Ещё мы вос­поль­зу­ем­ся тегом — он мыс­лен­но соби­ра­ет наши поля в одну фор­му и помо­га­ет управ­лять ими из одно­го места. У каж­дой фор­мы есть свой метод, по кото­ро­му она рабо­та­ет с дан­ны­ми. Фор­ма может или отправ­лять дан­ные (post), или полу­чать их (get).

Так как нам надо отпра­вить сооб­ще­ние в PHP-скрипт, будем исполь­зо­вать метод post. Сра­зу про­пи­шем путь к скрип­ту на сер­ве­ре — по это­му адре­су мы зальём нуж­ный файл на сле­ду­ю­щем эта­пе. Этот скрипт, кото­рый мы поз­же напи­шем, и есть обра­бот­чик фор­мы.

Офор­мим всё в виде кода:

language: HTML

   Текст сообщения

У нас уже есть фор­ма, но она пока не рабо­та­ет. Сей­час это испра­вим.

Пишем обработчик формы на PHP

Когда мы запол­ним и отпра­вим фор­му на нашей стра­ни­це, про­изой­дёт сле­ду­ю­щее:

1. Бра­у­зер собе­рёт вве­дён­ные нами дан­ные и ском­по­ну­ет таким обра­зом, что­бы их мож­но было пере­дать в про­грам­му на PHP. Как бы упа­ку­ет в посыл­ку.
2. В нашей PHP-программе мы смо­жем полу­чить доступ к этим дан­ным, как бы засо­сать их в память и хра­нить в пере­мен­ных. Мож­но пред­ста­вить, что мы рас­па­ку­ем посыл­ку и смо­жем поль­зо­вать­ся её содер­жи­мым.
3. Скрипт PHP что-то сде­ла­ет с полу­чен­ны­ми дан­ны­ми, а потом выплю­нет поль­зо­ва­те­лю какой-то ответ. Этот ответ будет отоб­ра­жён в виде веб-страницы в бра­у­зе­ре.

Логи­ка рабо­ты PHP-программы будет такая:

• полу­ча­ем зна­че­ния пере­мен­ных из тех дан­ных, кото­рые полу­чил обра­бот­чик;
• гото­вим сооб­ще­ние, где ука­жем все поля в фор­ме;
• отправ­ля­ем это сооб­ще­ние и смот­рим на резуль­тат выпол­не­ния функ­ции отправ­ки;
• если пись­мо ушло по нуж­но­му адре­су — пишем, что всё хоро­шо, если нет — гово­рим, что что-то не так;
• через 10 секунд после выво­да сооб­ще­ния авто­ма­ти­че­ски пере­хо­дим на сайт «Кода» Источник: https://thecode.media/php-form/
  

  Урок по созданию форм в html для новичков. Сделайте красивые формы регистрации на своем сайте

  
  Доброго времени суток, любители веб-разработки и желающие сверстать свой собственный сайт. До этого все мои публикации были посвящены основным элементам языка, способам создания различных объектов контента, их форматированию, структурированию и т.д. Освоив предыдущие темы, вы уже можете создать достаточно хороший сайт. Однако он будет неполноценным без сегодняшней темы: «Создание форм в html».Данный раздел в языке гипертекстовой разметки очень важен. Поэтому уделите его изучению особое внимание, иначе созданный вами веб-ресурс нельзя будет выпустить в продакшн. Таким образом, после прочтения статьи вы узнаете, для чего нужно использовать формы, с помощью каких тегов они создаются, а также сможете опробовать конкретные примеры на практике. Приступим же!

  Что такое форма и как она функционирует

  Форма – это один из важнейших объектов сайта, который предназначен для обмена информационными данными между сервером и пользователем.Проще говоря, если вы хотите создать интернет-магазин с возможностью заказа продукции на сайте, запрашивать на веб-ресурсе регистрацию и работать с аккаунтами или обеспечить клиентам обратную связь с менеджерами компании, то вам никак не обойтись без форм.Форма задается при помощи специального элемента языка html .Замечу, что документ с кодом может содержать в себе несколько объявлений тега , однако на сервер для обработки данных может быть отправлен всего лишь один запрос. Именно поэтому информация, которая вводиться пользователем в отведенные для этого поля и относится к разным формам, не должна быть зависимой. Также, не допускается делать формы вложенными одна в другую.Для нетерпеливых и жаждущих быстрее взглянуть на кодовое представление, я прикрепил простой пример использования панели с текстовым полем для пароля c кнопкой:

  123456789101112

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

  Отправляем данные на сторону сервера

  Для того чтобы отправить набранную (или выбранную) информацию в диалоговом окне, необходимо использовать стандартный механизм – кнопку Submit.Код такого метода выглядит вот так:При запуске представленной строки в браузере отобразиться кнопка с надписью: «Отправить».Другой способ отправки данных на сторону сервера – это нажатие в пределах диалогового окна клавиши Enter.После подтверждения отправки указанной информации, она не сразу поступает на сервер. Сначала ее обрабатывает браузер, приводя к виду «имя=значение».За имя отвечает параметр атрибута type тега , а за значение – данные, введенные пользователем. Далее преобразованная строка передается обработчику, который чаще всего задан в атрибуте action элемента .Сам по себе параметр action не обязателен, а в некоторых моментах и вовсе не нужен. Например, если страница сайта написана с использованием php или js, то обработка происходит на текущей странице и ссылки не нужны.Для большего понимания всей картины функционирования сайта я хотел бы добавить, что на сервере работа с данными выполняется уже при помощи других языков. Так, серверными языками считаются: Python, php, си-подобные языки (C#, C и т.д.), Java и другие.Теперь я хотел бы остановиться и подробнее рассказать об элементе . Если объяснять простым языком, то нужен для создания текстовых полей, переключателей, разнообразных кнопок, скрытых полей, флажков и других объектов.Тег не обязательно задавать в паре с , однако если необходимо обработать пользовательские записи или занести их, например, в базу данных, то без контейнера не обойтись.Основными атрибутами данного элемента языка гипертекстовой разметки являются:

  • Text – создает текстовое поле;
  • Submit – создает кнопку для отправки данных на сервер;
  • Image – отвечает за кнопку с картинкой;
  • Reset – устанавливает кнопку для очистки формы;
  • Password – задает текстовое поле специально для паролей;
  • Checkbox – отвечает за поля с флажками;
  • Radio – отвечает за поля с выбором одного элемента;
  • Button – создает кнопку;
  • Hidden – используется для скрытых полей;
  • File – задает поле, отвечающее за отправку файлов.

  Способы передачи информации

  Существует 2 способа передачи пользовательских данных на серверную сторону: Get и Post. Данные методы выполняют одно и то же действие, однако они существенно отличаются друг от друга. Поэтому прежде чем указывать какой-либо из них, давайте ознакомимся с их особенностями.

  Post	Get
  Размер передаваемых документов	Ограничиваются серверной стороной.	Максимум – 4 Кб.
  Способ отображения отправленной информации	Доступна только при просмотре через браузерные расширения или другие специальные программные продукты.	Сразу же доступна всем.
  Использование закладок	Нет возможности добавить в закладки, так как запросы не повторяются (все страницы ссылаются на один адрес).	Любую страницу с запросом можно сохранить в закладках и перейти к ней спустя время.
  Кэширование	Исходя из предыдущего пункта все запросы на одной странице.	Каждую страницу можно кэшировать отдельно.
  Предназначение	Используется для пересылки больших файлов (книг, изображений, видео и т.д.), сообщений, комментариев.	Отлично подходит для поиска запрашиваемых значений по веб-ресурсу или для передачи коротких текстовых сообщений.

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

  Рассмотрим второй пример. Создадим форму, в которой нужно ввести свои персональные данные (имя и фамилию, дату рождения) и придумать пароль. После все это отправляем на сервер при помощи метода Post.

  1234567891011121314151617

  Введите свои персональные данные!

  Введите свои персональные данные!

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

  Например, для ввода даты предусмотрены переключатели числа каждого из параметров (дня, месяца и года), а также для удобства выпадающая панель с самим календарем.

  Создание панели регистрации

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

  123456789101112131415161718192021222324252627282930313233343536373839404142434445

  Регистрация на сайте Для последующей корректной работе в нашем сервисе, пожалуйста, вводите правдивые данные! Имя:Фамилия:E-mail:Пароль:Повтор пароля:

  Регистрация на сайте

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  Имя:
  Email:

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

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

  – тег для создания выпадающего списка, пункты списка размещаются внутри тега .

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

  Бекон Ветчина Колбаски Креветки

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

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

  Имя

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

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

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

  Этот способ требует от вас как минимум знаний языка разметки 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 адрес
  • Номер телефона
  • Дата
  • Время
  • Загрузка файла
  • Изображения
  • Кнопки

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

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

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

  Источник: http://unetway.com/blog/free-form-builder-website/