Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

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

Содержание

Эффективный сайт некоммерческой организации. Контактная форма своими руками

Эта информация пылится в архиве — вдруг устарела.

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

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

Почему сайту некоммерческой организации в принципе необходим какой-либо инструмент прямой коммуникации?

Ответ на этот вопрос со всей очевидностью вытекает из самой природы некоммерческой организации и, соответственно, сайта как такового. Любая НКО нуждается в контактах – нуждается в обращении тех, для кого она работает, в предложениях о партнерстве, в помощи волонтеров и т.п. Без этих контактов деятельность НКО вряд ли осуществима. В то же время сайт – это не просто способ информирования «общественности» о деятельности НКО, но также и средство поощрения к действию. После знакомства с сайтом у посетителя должно возникать желание действовать, и наша задача при построении сайта – дать ему такую возможность. Наличие прямого способа связи с организацией, возможности сразу к ней обратиться (предложить свою помощь, попросить разрешения на публикацию материалов, запросить дополнительную информацию по какому-либо проекту и т.п.) является простым и очевидным решением для реализации этого желания действовать.

Почему именно контактная форма?

Мы ведь и так публикуем на сайте контактную информацию, телефон, email, зачем нам еще какая-то форма? – ответ на этот вопрос тоже довольно прост. У посетителя не всегда есть возможность немедленно воспользоваться другими контактными способами (неудобная ситуация, чужой компьютер, нет почты и т. п.). В результате, контакт должен быть вынуждено отложен, и в конечном итоге, может вообще не состояться, потому что человек либо не зафиксировал контактную информацию, либо его желание действовать уже ослабло под воздействием других дел и забот.

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

Не наносит ли контактная форма ущерба безопасности сайта?

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

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

Контактная форма на сайте Amazee LabsКонтактная форма на сайте Alexander Wong Контактная форма на сайте Foundry Collective

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

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

1. Состав требуемой информации

В большинстве случаев простое решение оказывается самым лучшим. Не требуйте от посетителя слишком подробной информации — форма не должна содержать слишком много обязательных полей. Опираясь, например, на результаты исследования, проведенного маркетинговой компанией Hubspot, можно сделать вывод, что оптимальная контактная форма должна содержать 3 поля. Одно из эти полей предназначено собственно для текста сообщения, состав двух других может варьироваться, но призван так или иначе идентифицировать отправителя сообщения.

Важное значение имеет также кнопка отправки формы. Удачным можно признать вариант, когда эта кнопка единственная (иногда в формы включают кнопку «очистить» или «отмена», но в данном случае они скорее запутывают посетителя) и содержит надпись, позволяющую легко определить назначение этой кнопки, например, «отправить сообщение».

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

2.

Фактор доверия

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

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

3. Размещение и дизайн формы

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

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

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

4. Подтверждение отправки

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

Давайте посмотрим еще на несколько практических примеров.

Контактная форма на сайте The Michael J.Fox Foundation

The Michael J.Fox Foundation представляет контактную форму вместе с остальной контактной информацией на отдельной странице, предлагая выбрать тему сообщения из выпадающего списка.

Контактная форма на сайте фонда Предание

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

Контактная форма на сайте Французской ассоциации филантропических организаций

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

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

Для этого нам потребуется установить плагин, позволяющий создавать формы. В качестве простого и эффективного варианта выберем Contact Form 7 (впрочем, если он вас чем-то не устраивает — в официальном репозитории достаточно альтернатив). Этот плагин позволяет встраивать предварительно настроенные формы прямо в страницы (или записи) сайта. Информация, отправляемая посетителем через форму, пересылается на специально указанный email.

Установить плагин можно прямо из административной части WordPress. В разделе Плагины -> Добавить новый укажите в строке поиска название Contact Form 7 и затем в списке предложенных вариантов выберите Установить для соответствующей позиции. После завершения установки активируйте плагин, нажав на соответствующую ссылку.

Установка плагина Contact Form 7

После установки плагина в административном меню появляется раздел Контакты (СF7). Редактировать формы в нем можно практически также, как вы редактируете страницы или записи. Первая форма уже создана плагином по умолчанию и вот ее-то мы и будем настраивать.

Экран редактирования формы содержит несколько областей. Подробнее об их назначении и доступных опциях вы можете прочесть в документации к плагину. Но общий принцип следующий – каждое поле формы представлено в виде специального кода (тэга) заключенного в квадратные скобки [ ]. Остальные элементы формы (подписи, подсказки и т.п.) форматируются с помощью стандартных тэгов HTML. Если вы совсем не знакомы с HTML, то, возможно, наступило время обратиться к нетленной серии «для чайников», а именно книге «HTML, XHTML и CSS для чайников», изданной на русском языке издательством Диалектика, и прочесть из нее хотя бы первые 140 страниц. Поверьте, и вы и ваш сайт от этого только выиграете.

Форма, создаваемая плагином по умолчанию, содержит 4 поля: Ваше имя, Ваш Email, Тема, Сообщение и собственно кнопку Отправить. Каждое поле вместе с наименованием форматируется как отдельный блок с помощью HTML-тэга абзаца <p>…</p>. Наименование поля отделяется от него HTML-тэгом перехода на новую строку <br />. Надо признать, это не самый лучший вариант разметки для формы (особенно с точки зрения доступности сайта), но он вполне дееспособен и может быть принят за основу.

Разметка контактной формы — начальный вариант

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

Разметка контактной формы — отредактированный вариант

Сохранив достигнутый результат с помощью кнопки Сохранить, обратим свое внимание на раздел Адресат. Он предназначен для настроек email-сообщения, которое будет отправляться с данными, собранными через форму. Указанные в нем параметры должны соответствовать параметрам формы, в противном случае часть информации может быть потеряна. Во-первых, необходимо проверить и при необходимости изменить адрес получателя email. Имя отправителя формируется по шаблону в соответствии с полями формы. Так как из формы мы удалили поле темы, то в данном разделе в качестве темы необходимо указать какой-либо постоянный текст, чтобы иметь возможность идентифицировать сообщения — например, Обращение через сайт. Аналогичные изменения необходимо произвести и в поле Тело сообщения, позволяющем настраивать шаблон содержания отправляемого письма.

Настройка шаблона email сообщения

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

Последний шаг, который нам необходимо предпринять для появления формы на сайте, — это копирование специального кода формы в верхней части экрана (выделен коричневым цветом) и вставка его в конец текстового содержания страницы Контакты. Вставленный код также можно сопроводить заголовком, например Напишите нам.

Вставка кода формы в текст контактной страницы

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

Окончательный вариант контактной формы

Если этого не произошло, то необходимо еще раз проверить корректность настроек нашей формы (в первую очередь, адрес получателя), а также проверить, не оказалось ли наше сообщение в спаме. Если все это не дает положительного результата, тогда возможно проблема заключается в том, что настройки вашего хостинга не позволяют отправлять email таким образом. В этом случае, можно порекомендовать установить дополнительное расширение Contact Form 7 to Database Extension, которое позволяет сохранять информацию, передаваемую через форму в базе данных сайта. После этого ее можно просматривать через административный интерфейс WordPress или интерфейс управления базой данных.

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

Как структурировать HTML-формы — Изучение веб-разработки

  • Назад
  • Обзор: Forms
  • Далее

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

Уровень подготовки:Основы компьютерной грамотности, и базовые знания HTML.
Цель:Разобраться как структурировать HTML формы и задавать им семантику для того, чтобы они были удобны и доступны в использовании.

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

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

Мы уже встречались с этим в предыдущей статье.

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

Стоит учесть, что всегда можно использовать элементы формы вне <form>. Тогда по умолчанию этот элемент формы не имеет ничего общего со всеми формами. Вы можете связать его с формой с помощью атрибута form. В HTML5 был представлен атрибут form для элементов HTML форм, который позволяет явно связать элемент с формой, даже если он не заключён внутри <form>.

Элемент <fieldset> — это удобный способ стилистической и семантической группировки элементов формы. Вы можете установить заголовок <fieldset>, добавив элемент <legend> сразу после открывающего тега <fieldset>. Текст элемента <legend> формально описывает назначение содержимого <fieldset>.

Различные вспомогательные технологии будут использовать

<legend> как часть метки label всех элементов внутри <fieldset>. Например, такие экранные дикторы как Jaws или NVDA произносят заголовок формы <legend> перед произношением названия меток элементов.

Небольшой пример:

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

Примечание: вы можете найти этот пример в fieldset-legend.html (также посмотрите на результат).

Читая эту форму, экранный диктор произнесёт «Fruit juice size small» для первого элемента, «Fruit juice size medium» — для второго, «Fruit juice size large» — для третьего.

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

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

В предыдущей статье мы увидели, что элемент <label> принято использовать для указания текстов-подсказок (лейблов) в HTML-формах. Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предыдущей статьи:

<label for="name">Name:</label> <input type="text" name="user_name">

При правильно связанном элементе <label> с элементом <input> через атрибуты for и id соответственно (атрибут for ссылается на атрибут id соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие «Name, edit text».

Если <label> не правильно установлен, скринридер прочитает это как «Edit text blank», что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.

Обратите внимание на то, что виджет формы может быть вложен в элемент <label>, как на примере:

<label for="name">
  Name: <input type="text" name="user_name">
</label>

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

Лейблы тоже кликабельны!

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

Например:

<form>
  <p>
    <label for="taste_1">I like cherry</label>
    <input type="checkbox" name="taste_cherry" value="1">
  </p>
  <p>
    <label for="taste_2">I like banana</label>
    <input type="checkbox" name="taste_banana" value="2">
  </p>
</form>

Примечание: вы можете посмотреть этот пример тут checkbox-label.html (также можно посмотреть код вживую).

Несколько лейблов

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

<label>.

Рассмотрим этот пример:

<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
<!-- Тогда это: -->
<div>
  <label for="username">Name:</label>
  <input type="text" name="username">
  <label for="username"><abbr title="required">*</abbr></label>
</div>
<!-- лучше сделать таким образом: -->
<div>
  <label for="username">
    <span>Name:</span>
    <input type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</div>
<!-- Но этот вариант лучше всего: -->
<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input type="text" name="username">
</div>

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

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

  • В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь «edit text blank» и отдельно читаемые тексты-подсказки. Множественные элементы <label> могут быть неправильно интерпретированы программой чтения с экрана.
  • Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как «name star name edit text», однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связано с текстом-подсказкой.
  • Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как «name star edit text».

Примечание: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.

Примечание: вы можете найти этот пример на GitHub required-labels.html (также можно посмотреть вживую). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!

Помимо структур, характерных только для HTML-форм, хорошо помнить, что формы — это просто HTML. Это означает, что вы можете использовать всю мощь HTML для структурирования HTML-формы.

Как вы можете заметить в примерах, оборачивать лейбл и виджет формы в элемент <div> — это общепринятая практика. Элемент <p> также часто используется, как и HTML-списки (последние часто используются для структурирования множественных чекбоксом или радио-кнопок).

В добавок к элементу <fieldset> часто используют HTML-заголовки (например, <h2> (en-US), <h3> (en-US)) и секционирование (например, <section>) для структурирования сложных форм.

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

Каждый отдельный раздел функциональности содержится в элементах <section> и <fieldset>, содержащий переключатели. Каждый отдельный раздел функциональности должен находиться в отдельном элементе <section> с элементами <fieldset>, содержащими переключатели.

Активное обучение: построение структуры формы

Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (Основные нативные элементы управления формами (en-US)). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.

  1. Для начала сделайте локальную копию пустого шаблона и CSS для нашей платёжной формы в новой директории на вашем компьютере.
  2. Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента <head>:
    <link href="payment-form.css" rel="stylesheet">
  3. Далее начните создавать свою форму с добавления внешнего элемента <form>:
    <form>
</form>
  4. Внутри тега <form>, добавьте заголовок и параграф, информирующий пользователей о том, как помечены поля, обязательные для заполнения:
    <h2>Payment form</h2>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>. </p>
  5. Далее нам надо добавить более крупный кусок кода под нашей предыдущей записью. Здесь вы можете увидеть, что мы оборачиваем поля с контактной информацией в отдельный элемент <section>. Более того, у нас есть набор из двух радио-кнопок, каждую из которых мы помещаем в отдельный элемент списка (<li>). Наконец, у нас есть два текстовых поля <input> и связанные с ними элементы <label>, которые находятся внутри элементов <p>, а также поле для ввода пароля. Добавьте этот код в вашу форму:
    <section>
    <h3>Contact information</h3>
    <fieldset>
      <legend>Title</legend>
      <ul>
          <li>
            <label for="title_1">
              <input type="radio" name="title" value="M." >
              Mister
            </label>
          </li>
          <li>
            <label for="title_2">
              <input type="radio" name="title" value="Ms. ">
              Miss
            </label>
          </li>
      </ul>
    </fieldset>
    <p>
      <label for="name">
        <span>Name: </span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="text" name="username">
    </p>
    <p>
      <label for="mail">
        <span>E-mail: </span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="email" name="usermail">
    </p>
    <p>
      <label for="pwd">
        <span>Password: </span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="password" name="password">
    </p>
</section>
  6. Сейчас мы перейдём к второму разделу <section> нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега <p>. Первый — это выпадающее меню (<select>) для выбора типа кредитной карты. Второй — это элемент <input> с типом number для ввода номера карты. Последний виджет — это элемент <input> с типом date для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье The HTML5 input types (en-US). Вставьте следующий код под предыдущим разделом:
    <section>
    <h3>Payment information</h3>
    <p>
      <label for="card">
        <span>Card type:</span>
      </label>
      <select name="usercard">
        <option value="visa">Visa</option>
        <option value="mc">Mastercard</option>
        <option value="amex">American Express</option>
      </select>
    </p>
    <p>
      <label for="number">
        <span>Card number:</span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="number" name="cardnumber">
    </p>
    <p>
      <label for="date">
        <span>Expiration date:</span>
        <strong><abbr title="required">*</abbr></strong>
        <em>formatted as mm/yy</em>
      </label>
      <input type="date" name="expiration">
    </p>
</section>
  7. Последняя секция, которую мы добавим выглядит намного проще и содержит в себе только элемент <button> с типом submit, для отправки данных. Добавьте этот код в конец вашей формы:
    <p> <button type="submit">Validate the payment</button> </p>

Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите payment-form.html и живой пример):

Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите Test your skills: Form structure (en-US).

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

  • A List Apart: Sensible Forms: A Form Usability Checklist
  • Назад
  • Обзор: Forms
  • Далее
  • Ваша первая HTML форма
  • Как структурировать HTML-формы
  • Стандартные виджеты форм
  • The HTML5 input types (en-US)
  • Other form controls (en-US)
  • Стили HTML-форм
  • Advanced form styling (en-US)
  • UI pseudo-classes (en-US)
  • Проверка данных формы
  • Отправка данных формы

Дополнительные темы

  • Как создавать пользовательские виджеты форм
  • Sending forms through JavaScript
  • Property compatibility table for form widgets (en-US)

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved? Learn

how to contribute.

This page was last modified on by MDN contributors.

Создайте простую контактную форму HTML с помощью Google Sheets + Formspree

HTML отлично подходит для того, чтобы ваш веб-сайт выглядел и работал именно так, как вы хотите, но работать с ним может быть непросто. Мы здесь, чтобы упростить и упростить процесс добавления контактной формы HTML на ваш веб-сайт. Также может быть сложно сделать данные формы доступными для всех в вашей команде, поэтому мы также покажем вам, как интегрировать их с Google Sheets, которые, скорее всего, вы уже используете.

Если у вас есть веб-сайт HTML, мы предполагаем, что вы хотя бы немного разбираетесь в программировании с помощью HTML. Хорошо, что вам не нужно быть экспертом, чтобы ваша контактная форма HTML работала. Мы проиллюстрировали это руководство созданным нами бизнес-сайтом под названием Seltz, специализированным розничным продавцом сельтерской воды, который позволяет вам выбрать предпочтительный уровень карбонизации. Когда мы закончим, вы узнаете, как разместить контактную форму HTML на своем веб-сайте, которая отслеживает все ваши материалы в Google Таблицах.

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

Для веб-сайта Seltz мы изменили заполнитель текст, соответствующий их деловой индивидуальности. Эти изменения показаны здесь в красных полях:

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

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

 

    <набор полей>

Давайте рассмотрим, что здесь происходит:

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