20 советов по работе с HTML формами на сайте


Содержание материала:

Полное руководство по стилям форм

В сегодняшней статье мы расскажем вам, как стандартизировать процесс создания форм. А также предоставим несколько простых фрагментов стилей для input CSS , которые помогут вам сделать то же самое.

Начинаем со сброса HTML5

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

Чаще всего мы используем Normalize.css . Это идеальное сочетание простоты в использовании и качества.

Общие стили CSS формы

Поля ввода будут работать без стилей CSS . Они будут выглядеть ужасно, но они будут работать.

Но заставить их работать – это лишь полдела. Чтобы задать стили так, чтобы все выглядело красиво, может потребоваться много времени и труда. Хорошая новость заключается в том, что мы сделали большую часть тяжелой работы за вас. Взгляните на приведенные ниже стили для CSS input type text :

Сокращение

Если вы заметили, мы добавили отдельные правила для различных элементов CSS input type . Способ упростить это, который вы могли видеть во многих темах WordPress , заключается в том, чтобы сделать что-то вроде этого:

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

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

Мы управляем CSS, а CSS управляет нами

Стили фокуса ввода и состояния hover делают дизайн более приятным. Сколько раз вы слышали, что все зависит от деталей? Разница от добавления этих стилей ( в том числе и для CSS input file ) будет невелика, но это значительно улучшит общий опыт взаимодействия.

Углубляемся все дальше: добавляем стили для диапазона, чекбокса, списка и радиокнопки

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

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

В любом случае, это « Полное руководство », и оно не могло бы считаться таковым, если бы мы упустили этот аспект:

Если вы заметили, в строках 2-4 приведенного выше кода содержится именно то, что помогает нам подчинить это поле нашей воле. Магическое свойство appearance .

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

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

Стили поля со списком

Поле CSS input type со списком на протяжении многих лет оставалось тем камнем, о который разбивался наш дизайн и кроссбраузерная совместимость. Предлагалось много решений, в том числе создавались целые библиотеки Javascript . Но самый простой способ, который нашел я, заключается в добавлении всего нескольких строк CSS :

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

И это все. Мы снова используем свойство appearance. Различные браузеры по- разному определяют оформление input CSS кнопки переключателя. Чтобы решить данную проблему, можно добавить аккуратное фоновое изображение, которое будет работать в качестве переключателя.

Используйте SVG для изображения. Дополнительным преимуществом этого формата является то, что он, как правило, имеет меньший размер, чем обычный JPG или PNG .

Пользовательские стили CSS для чекбокса и радиокнопки

Здесь важно совместить структуру дерева DOM и эти элементы. Возможно, вам придется изменить правила CSS или структуру DOM , чтобы все работало правильно. Но уделив немного внимания деталям, вы сможете сделать это. И вы не пожалеете о потраченном времени:

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

Плагины WordPress для добавления стилей форм

Теперь у нас есть понимание того, что нужно сделать, чтобы задать стили для input CSS . До сих пор мы использовали их только в условиях, при которых у нас есть полный контроль: статический HTML . Если вы готовы не останавливаться на этом, и хотите знать, как задать стили форм в WordPress , я расскажу и об этом.

Только не это!

Мы используем плагины, потому что создание форм в HTML — это очень трудоемкий процесс. Эти плагины обычно содержат свои стандартные стили. Это делается для того, чтобы формы выглядели одинаково хорошо не только в различных браузерах, но и с различными темами, которые будут использоваться на сайте. Давайте рассмотрим в качестве примера популярный плагин Gravity Forms .

Итак, мы добавили пользовательские стили для наших полей ввода формы, а теперь хотим установить на сайте еще и Gravity Forms , как я сделал здесь .

Вам придется внести сразу несколько изменений. Особенно это касается поля со списком, чекбокса и радиокнопки, чтобы все выглядело нормально. Вот, что сделал я для оформления input CSS :

Я удалил изображение, которое мы использовали для списка, а также внес некоторые незначительные изменения для чекбокса и радиокнопки. У нас больше нет контроля над деревом DOM , так как Gravity Forms делает это за нас, поэтому некоторые незначительные корректировки необходимы.

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

Пользовательские стили CSS для Gravity Forms

Первое, что нам нужно сделать, это отключить стили front-end Gravity Forms . Вот фильтр, который вы можете поместить в файл functions.php :

Затем можно начать задавать собственные стили для вашей конкретной темы. Это долгий и утомительный процесс. У нас есть вариант взять стили, которые мы создали для использования с нашей основной темой, но они также будут работать с другими Sass-темами WordPress . Посмотрите наши SCSS-файлы для Gravity Forms . Если SCSS не ваш конек, вы можете посмотреть CSS-версию .

Стили формы подписки на новостную рассылку

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

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

Если вы создаете форму самостоятельно, вам нужно добавить в нее класс newsletter-signup . Я использовал этот класс, чтобы указать конкретную форму как в CSS , так и в JQuery , который мы будем использовать.

Вот правила для input CSS , которые необходимо задать:

В форме из нашего примера используется кнопка для запуска анимации в верхней части, но мы не имеем к этому доступа. Gravity Forms не выводит заголовок, поэтому мы можем использовать это. Мы разместили там элемент со input CSS стилями gform_title , который будет выглядеть как кнопка. Кроме этого мы установили для формы значение line-height , как у этой псевдокнопки. Это позволит нам скрыть форму до тех пор, пока кто-то не кликнет по ней мышью.

Следующий фрагмент головоломки — JQuery :

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

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

Хотите увидеть форму, которую мы только что создали, в действии? Зайдите сюда !

Это, безусловно, полное руководство по стилям CSS input type . На данный момент у вас есть базовые знания и множество примеров кода, которые помогут создать и настроить свою собственную форму.

Данная публикация представляет собой перевод статьи « The Ultimate Guide to Styling Forms » , подготовленной дружной командой проекта Интернет-технологии.ру

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

Контактная форма или чат? Мы рекомендуем оба инструмента, но выбор, конечно, за вами!

Дмитрий Мандрыка
Маркетолог

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

Контактная форма или чат?

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

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

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

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

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

Функции формы обратной связи

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

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

Контактная форма может стимулировать конверсию и, напротив, негативно влиять на ее показатели. Форма должна быть простой, удобной и приятной для взаимодействия – тогда ее КПД будет максимально высоким. Есть, как минимум, 10 критериев, по которым можно оценить эффективность контактной формы.

1Заголовок

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

2Информативность

Этот критерий вытекает из предыдущего. Чтобы контактная форма была информативной, вы должны обозначить в ней 2 основных пункта:
— Что должен сделать пользователь: ввести e-mail, оставить номер телефона и т.д.
— Что он получит в итоге: сообщение зарегистрировано, ответ придет на электронную почту, ему перезвонят и т.д.

3Краткость

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

4Заголовки над полями

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

5Подсказки

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

Топ-пост этого месяца:  Зачем нужен хостинг
6Работа с ошибками

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

7Юзабилити

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

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

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

8Мобильность

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

9Откажитесь от капчи

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

Если вы все же используете капчу, упростите по максимуму символы – пусть это будут простые слова на русском языке или галочка в поле «Я не робот».

10Благодарность

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

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

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

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

276 629 сайтов доверяют JivoSite

JivoSite помогает превратить посетителей сайта в покупателей. Установите JivoSite сегодня и получите месяц Профессиональной версии бесплатно по промокоду BLOG2020

10 правил хороших форм

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

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

1. Подходящие элементы управления

Элементы интерфейса должны соответствовать типу ожидаемой от пользователя информации.

Поля ввода текста.
Радиокнопки для выбора только одного значения из нескольких.
Чекбоксы для выбора либо одного, либо нескольких значений.
Кнопки для совершения действий.

Полный список элементов управления см. на сайте W3C Recommendation.

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

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

Правильно Неправильно

Оформление элементов формы призвано помогать пользователю оценить предполагаемый объем данных.

Правильно
Неправильно

2. Проверка полей

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

Сообщения об ошибках должны содержать рекомендации по их устранению.

Неправильно

3. Защита от ошибок

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

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

В случае, если пользователь нажимает на неактивную кнопку, должен происходить возврат к первому неверно заполненному полю.


4. Подсказки и помощь

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

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

5. Грамотная верстка

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

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

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

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

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

Правильно Неправильно

6. Правильный фокус

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

7. Сохранность данных

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

8. Поддержка клавиатуры

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

9. Понятная кнопка

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

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

10. Забота о секретных данных

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

20 советов по работе с HTML формами на сайте

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

Данная рубрика заменит Вам полноценный «HTML учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML и DHTML.

Бесплатные уроки HTML для начинающих

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

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

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

50+ бесплатных Bootstrap 3 шаблонов и элементов UI

Подборка бесплатных UI материалов и Bootstrap 3 шаблонов за уходящий месяц.

Зум слайдер

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

HTML. Работа с формами

Определение формы

Форма – это элемент HTML, позволяющий передавать информацию на web-сервер, где информация будет обработана. С помощью форм организуются тесты, голосования, опросы. html-формы сами по себе позволяют только организовывать ввод информацию. Для обработки форм необходимо использовать языки программирования, для обработки на стороне клиента можно использовать, например, язык JavaScript, а на стороне сервера – например, PHP, Perl, C.

Форма задается тегами . Элементы формы располагаются между этими тегами. Тег

При этом в браузере увидим следующий элемент:

  • name — имя элемента,
  • type — тип элемента (в данном случае — text),
  • size — размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться,
  • maxlength — максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным,
  • value — текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым.
  • disabled — блокирует поле от любых изменений,
  • readonly — делает поле доступным только для чтения.

Пример использования параметров.

Текстовое поле для ввода пароля

Представляет собой текстовое поле с тем отличием, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Используется при вводе паролей. От текстового поля отличается только параметром type=»password».

Флажки

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

Рассмотрим параметры тега :

  • type — тип элемента (в данном случае — checkbox),
  • name — имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,
  • value — значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь,
  • checked — им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

Переключатели

В отличии от флажков, здесь можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type=»radio», все остальные такие же, как у флажков.

Кнопки

Существует четыре типа кнопок:

  • submit — кнопка отправки содержимого формы web-серверу. Ее параметры:
    • type=»submit» — тип кнопки,
    • name — имя кнопки,
    • value — надпись на кнопке.
  • image — графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:
    • type=»image» — тип графической кнопки,
    • name — имя кнопки,
    • src — адрес картинки для кнопки.
  • reset — кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:
    • type=»reset» — тип кнопки очищения,
    • name — имя кнопки,
    • value — надпись на кнопке.
  • button — произвольная кнопка, ее действия назначаются вами с использованием языков программирования, т.е. сама она делать ничего не умеет. Ее параметры:
    • type=»button» — тип произвольной кнопки,
    • name — имя кнопки,
    • value — надпись на кнопке.
    • onclick — обработчик события — указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие события (например, двойной щелчок), но здесь мы не будем их рассматривать.

Пример использования кнопок.

Кнопки можно задавать и при помощи тегов . Возможности у таких кнопок несколько, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:

  • type — тип кнопки, может принимать значения:
    • reset — кнопка очистки формы,
    • submit — кнопка отправки данных,
    • button — кнопка произвольного действия.
  • name — имя кнопки,
  • value — надпись на кнопке.

Поле для файлов

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

Поле для ввода текста

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

  • name — имя поля,
  • cols — ширина поля в символах,
  • rows — количество строк текста, видимых на экране,
  • wrap — способ переноса слов:
    • off — переноса не происходит,
    • virtual — перенос отображается, но на сервер поступает неделимая строка,
    • physical — перенос и на экране и при поступлении на сервер.
  • disabled — неактивное поле,
  • readonly — разрешено только чтение.

Параметры этих тегов.

    Ваши пожелания

Новые возможности форм в html5 показаны в статье Новые возможности форм

Кто как делает html формы?

Не первый раз сталкиваюсь с формами и каждый раз они для меня как страшный сон. Речь не идет о двух полях с сабмитом. Приходится делать для проекта сложные формы с множеством полей/селекторов/чекбоксов и плюс валидация со стороны клиента и сервера. Так вот: все это до сих пор делаю руками так сказать. Без единой библиотеки — просто пишу с нуля. Занимает это массу времени и гору нервов на отладку. Ну вот не могу я поверить в то что студии которые как семечки выплевывают сайты сидят и тоже руками пишут формы. Обязан быть какой-то инструмент который позволяет собирать формы за короткий срок. Гуглил уже и видел множество фреймворков. Но хочется не напороться на очередной перегруженный фреймворк с кучей лишнего под капотом.

Как кто чем собирает? Что посоветуете что бы формы перестали быть проблемой.

  • Вопрос задан более трёх лет назад
  • 4103 просмотра

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

  1. Разметка:
    • пишу всегда вручную;
    • длинные селекты тянутся из базы посредством шаблонизатора (например серверного TWIG);
    • прописываю полностью с атрибутами валидации HTML5 (благо все современные браузеры потдерживают);
    • выдумывать JS-велосипеды для валидации не стоит уже давно;
    • для зависимых полей пока есть простой js-клаcс сверяющий их.
    • drag&drop файлов давно уже работает без JS;
    • для подгрузки изображений в страницу на стороне клиента js-класс.

  2. Стили:
    • один раз прописаны стили для разных-форм на уровне тегов и взаимоотношений тегов (в итоге все формы на сайте виглядят в одном стиле);
    • класы только для самой формы, определяет как одна выводится: локально, модально или в теле контента;
    • кому сложно написать 300 строчек CSS, пользуйтесь фреймворками;
    • ни в коем случае не делайте стили форм для каждого раза как онные встречаются (придет дядя даст по рукам 🙂 ).

  3. Отправка:
    • пользуйтесь action, submit и target;
    • нужны данные как модальное окно есть iframe;
    • ajax с формами не использую он изначально предназначен для другого:
      • для подгрузки полей в селектор, но только если селектор очень большой;
      • для поиска налету.

  4. Сервер:
    • использую специальный статический класс, который делает валидацию и XSS/injection-очистку;
    • как минимум PDO с подготовленными запросами;
    • Doctrine;

  5. База-данных:
    • наименования полей в базе соответствуют наименованиям полей в формах (с префиксом);

10 советов по улучшению веб-форм на сайте

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

Основные виды форм на сайте

Расскажем о видах форм и их особенностях, которые могут встретится на сайте.

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

Встречается почти на всех коммерческих сайтах. Цель данной формы — получить данные клиента для дальнейшего звонка менеджера. Как правило форма открывается после нажатия кнопки вверху сайта:

Иногда такие формы располагают отдельным блоком посередине или в конце контента. Тогда пользователю не приходится возвращаться в начало сайта.

Форма для подписки на рассылку

Еще один способ получить данные клиента и осуществлять продажи через email-маркетинг.

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

Форма для заказа

Одна из основных форм, которая встречается на сайтах — форма заказа товара. Например, на сайте s7 с помощью формы можно выставить нужные параметры и купить билет на рейс:

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

Форма оформления покупки


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

Хорошим тоном считается разделение формы для новых и старых клиентов. Если пользователь постоянно пользуется продукцией интернет-магазина, поля с доставкой и другими персональными полями заполняются автоматически. Например, в интернет-магазине «Лабиринт» уже знают последний адрес доставки и предлагают использовать его снова:

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

Форма авторизации и регистрации

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

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

Форма для заказа консультации

Для тех клиентов, которые хотят «только спросить» маркетологи придумали форму консультации — если у пользователя есть вопросы, они могут написать их в специальную форму и получить ответ по e-mail или телефону.

Иногда такие решения заменяет встроенный онлайн-консультант, который оформлен в виде чата со специалистом:

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

Совет 1. Разместите форму в заметном месте

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

Как лучше размещать формы на сайте?

1. Использовать шапку сайта

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

2. Главный экран

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

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

3. В контенте

Чтобы «поймать» клиента, формы размещают в середине контента:

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

4. Футер

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

Совет 2. Сократите количество полей

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

Лишние вопросы раздражают клиентов, поэтому, сократив количество полей до минимума вы сэкономите время посетителя и повысите уровень конверсии. А информацию о клиенте можно узнать при дальнейшем сотрудничестве.

Также можно упростить ввод настройками — автоматическим определением города, выпадающими списками, маску ввода по телефонному номеру, подсказками и прочим:

Если ваша форма все же подразумевает большое количество вопросов (например, в форме оформления покупки), лучше разбить ее заполнение на несколько шагов.

Совет 3. Продумайте названия полей

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

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

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

Надписи на кнопках также должны быть конкретными — не «Записаться» а «Записаться на консультацию». Так клиент понимает, какое действие совершает.

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

Названия полей обычно располагаются слева или сверху.

Совет 4. Учитывайте все состояния полей

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

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

Так мы обозначили ошибку пользователя, если он не поставил галочку в форме:

Также важно указывать, какие поля являются обязательными для заполнения. Обычно их обозначают *.

Совет 5. Оформите подтверждение после корректного заполнения формы

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

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

Совет 6. Позаботьтесь о безопасности

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

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

Совет 7. Добавьте мотивации

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

Люди заполняют формы ради результата. Какую еще мотивацию можно добавить для клиента?

1. Что-то материальное

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

2. Быстрые результаты

Укажите сроки, в которые клиент получит заказ. «Сделаем и доставим через 3 дня» лучше чем «Сроки и доставка рассчитываются индивидуально». Также работают такие формы как «Перезвоним через 40 секунд». Клиенту станет интересно проверить, так ли это на самом деле.

3. Персонализированное предложение

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

Совет 8. Я не робот!

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

Если есть потребность в использовании капчи, наилучший вариант — reCaptcha от Google. Это простая кнопка, которая не требует усилий при заполнении.

Совет 9. Подбирайте цвета

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

Что касается полей и кнопок, лучше разделять их по цвету на главные и второстепенные. Например, использовать яркий цвет для кнопки «Регистрация» и приглушенные оттенки для «Пропустить».

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

Совет 10. Тестирование формы

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

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

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

20 базовых HTML & CSS приемов для маркетологов

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

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

1. Как посмотреть фронтэнд любого сайта

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

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

«Просмотр кода страницы» в Chrome

«Просмотр кода элемента» в Chrome

2. Строение и принципы работы HTML-таблиц

Таблицы часто являются главным строительным элементом email-шаблонов, поэтому маркетологам необходимо знать, как именно они устроены и по какому принципу работают. Вот самый простой пример таблицы из 3 строк и 2 столбцов:

Ниже представлен код этой таблицы с комментариями в формате для лучшего понимания ее строения:

3. Тег переноса строки

Если у вас возникли сложности с текстом: например, он не переносится на следующую строку в нужном вам месте — добавьте тег переноса строки
:

4. Горизонтальный разделитель

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

5. Стиль горизонтального разделителя

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

Пример взят с css-tricks.com/examples/hrs

6. Определение цвета и шрифта

Иногда очень важно узнать, какой цвет или шрифт использовался на веб-странице. Чтобы не гадать или искать нужный оттенок на скриншоте в Photoshop, вы можете установить расширение ColorZilla для Chrome: после активации «пипетки» достаточно навести курсор на выбранный элемент, и его цвет появится в следующем окне:

Рядом с цветом (в форматах #ABC и RGB) также показываются размеры элемента и его код на странице. Что же касается шрифта, то для определения понравившейся гарнитуры в Chrome существует расширение WhatFont, работающее по аналогичному принципу:

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

7. Убираем пробел под картинкой

Под изображением, находящимся в ячейке таблицы, Gmail нередко вставляет дополнительный пробел. Чтобы избавиться от этой неприятности, к тегу img необходимо добавить style=”display: block”, например, вот так:

Результат до и после на скриншотах ниже:

8. Задаем атрибуты тегу

Для того, чтобы вставить изображение, необходимо указать параметры тега : src — ссылка, или URL картинки, alt — название, которое отобразится на ее месте в случае технических проблем, а также ширину (width) и высоту (height) изображения.

9. Добавляем внешние отступы

Margin — это внешний отступ элемента от соседних элементов и/или родительского блока. Отступы прописываются в следующем порядке: верхний, правый, нижний, левый; они могут задаваться как в пикселях (px), так и других единицах, например, в сантиметрах или процентах.

В приведенном примере у второго абзаца с классом >

10. Задаем стиль HTML-элементам

Если хотите задать некоторым заголовкам и абзацам страницы красный цвет и выравнивание по центру, то добавив в теги

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

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

Так, в примере стиль сработает только при наличии двух условий — тега

11. Варианты задания CSS-стилей

Существует три способа задать стиль для HTML-документа: прикрепить отдельный текстовый файл в формате .css, встроить свойства между и и как атрибут конкретного элемента.

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

Однако, когда вы хотите использовать одинаковое оформление (гарнитура, цвет шрифта и границ, рамки и пр.) для множества страниц сразу, то удобнее внешние стили. Чтобы прикрепить к документу внешний CSS-файл, на него надо указать ссылку в шапке страницы:

Иногда стиль задается напрямую, как атрибут к какому-либо тегу, например,

Заголовок

12. Размещаем стили на Google Drive

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

«Public on the web»

Скопируйте предложенную ссылку:

Теперь вам нужно ее немного изменить, а именно убрать ту часть, которая начинается с /edit. Например, если ссылка выглядит так:

то после изменения она станет:


Полученный вариант ссылки прикрепите к вашему шаблону как внешний CSS-файл (см. предыдущий пункт).

13. Масштабируемые единицы

Размер шрифта, высоты строк или отступов лучше задавать в масштабируемых единицах измерения (em), а не в пикселях (px), чтобы сайт или лендинг был пригодным для просмотра на устройствах с различной величиной экрана.

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

14. Внутренние отступы

Представленная ниже иллюстрация как нельзя лучше показывает отличие внешних отступов (margin) от внутренних (padding) и их общее взаимное расположение по отношению к содержимому (content), рамкам (border) и родительскому элементу (выделено точечной линией).

Порядок следования внутренних отступов такой же, как и внешних. Иными словами, запись:

padding: 5px 10px 15px 20px;

означает, что верхний отступ равен 5px, правый 10px, нижний 15px, левый 20px.

Существует более краткая запись отступов, если некоторые или все отступы равны. Например,

padding: 5px 10px;

говорит о том, пары отступов верхний/нижний и правый/левый составляют 5px и 10 px соответственно.

15. Прикрепляем шрифты Google Fonts

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

Шрифту задано кириллическое и латинское начертания

Там же находится и название шрифта, которое следует разместить в разделе стилей или во внешнем CSS-файле:

16. Ширина и высота

Чтобы блоки, изображения и таблицы всегда подстраивались под размеры экрана, а не «выпадали» за его пределы, указывайте их ширину (width) и высоту (height) не в пикселях, а в процентах. Для сохранения пропорций, высоту обычно задают автоматически: auto.

17. Создание и стилизация форм

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

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

В примере выше форма начинается с тега , которому задается отдельный класс >

18. Валидация форм и сообщение об ошибке

В некоторых случаях поля являются обязательными к заполнению, поэтому если пользователь оставил поле пустым, хорошо бы сообщить ему об этом.

Можно реализовать данное свойство, задав полям атрибут required, но для большей интерактивности, например, если вы хотите, чтобы появлялось окно об ошибке, следует использовать язык JavaScript:

В данном примере, если значение обязательного поля email при отправке формы осталось незаполненным:

то система выведет на экран «Пожалуйста, заполните поле “Ваш email’».

19. Выравнивание изображений

Чтобы вставленное в текст изображение выравнивалось относительно строки нужным вам образом, тегу img необходимо задать атрибут align:

20. Объединение ячеек

Когда в таблице требуется объединить столбцы или строки, соответствующим

задается атрибут colspan для слияния ячеек по горизонтали и rowspan — для слияния по вертикали. В значении атрибута прописывается количество ячеек, которые вы хотите объединить, например:

Горизонтальное объединение 2-х ячеек

Вертикальное объединение 2-х ячеек

Вместо заключения

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

Для иллюстрации примеров использовался бесплатный онлайн-сервис JS Fiddle, где любой желающий может попрактиковаться в своих знаниях HTML & CSS, а при желании — и в JavaScript.

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

Контактная форма или чат? Мы рекомендуем оба инструмента, но выбор, конечно, за вами!

Дмитрий Мандрыка
Маркетолог

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

Контактная форма или чат?

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

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

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

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

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

Функции формы обратной связи

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

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

Контактная форма может стимулировать конверсию и, напротив, негативно влиять на ее показатели. Форма должна быть простой, удобной и приятной для взаимодействия – тогда ее КПД будет максимально высоким. Есть, как минимум, 10 критериев, по которым можно оценить эффективность контактной формы.

1Заголовок

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

2Информативность

Этот критерий вытекает из предыдущего. Чтобы контактная форма была информативной, вы должны обозначить в ней 2 основных пункта:
— Что должен сделать пользователь: ввести e-mail, оставить номер телефона и т.д.
— Что он получит в итоге: сообщение зарегистрировано, ответ придет на электронную почту, ему перезвонят и т.д.

3Краткость

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

4Заголовки над полями

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

5Подсказки

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

6Работа с ошибками

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

7Юзабилити

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

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

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

8Мобильность

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

9Откажитесь от капчи

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

Если вы все же используете капчу, упростите по максимуму символы – пусть это будут простые слова на русском языке или галочка в поле «Я не робот».

10Благодарность

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

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

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

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

276 629 сайтов доверяют JivoSite

JivoSite помогает превратить посетителей сайта в покупателей. Установите JivoSite сегодня и получите месяц Профессиональной версии бесплатно по промокоду BLOG2020

HTML Формы

Пример формы HTML

Элемент

Форма HTML содержит элементы формы.

Элементы образуют различные типы элементов ввода как текстовые поля, чекбоксы, радио-кнопки, кнопки, и многое другое.

Элемент ввода

Элемент это самый важный элемент формы.

Элемент может быть показан несколькими способами, в зависимости от атрибута type.

Вот некоторые примеры:

Типы Описание
Определяет однострочное текстовое поле ввода
Определяет переключатель (для выбора одного из вариантов)
Определяет кнопку «Отправить» (для отправки формы)

Вы узнаете намного больше о типах входных позже в этом учебнике.

Ввод Текста

определяет однострочное поле ввода ввод текста:

Пример

Вот как это будет выглядеть в браузере:

Примечание: Сама форма не видна. Также обратите внимание, что ширину по умолчанию для текстового поля 20 символов.

Переключатель входного сигнала

определяет радио кнопку.

Переключатели позволяют пользователю выбрать один из ограниченного числа вариантов:

Пример

Вот как это будет выглядеть в браузере:

Мужчина
Женщина
Другие

Кнопка Отправки

определяет кнопку для представления данных формы форме-обработчику.

Форма обработчик обычно сервер со скриптом для обработки входных данных.

Форма обработчик, указанный в форме атрибута action:

Пример

Вот как это будет выглядеть в браузере:

Атрибут действие

Атрибут action определяет действие, которое будет выполнено при отправке формы.

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

В приведенном выше примере, данные формы отправляются на страницу на сервере «action_page.php». На этой странице представлен серверный скрипт, который обрабатывает данные формы:

Группировка данных формы с

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

Элемент определяет название элемента .

Пример

Вот как это будет выглядеть в браузере:

Еще Примеры

Отправка электронной почтой из формы
Как отправить электронную почту из формы?

Топ-пост этого месяца:  Как в wordpress подключить все JS скрипты в футере
Добавить комментарий