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

Содержание

Создание веб-формы для сайтов

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

Важно!

Чтобы форма работала, на вашем сайте должен быть установлен скрипт eSputnik. Для получения скрипта перейдите во вкладку “Сайт” → “Формы”, нажмите кнопку «Получить скрипт» и укажите домен вашего сайта. Добавьте этот скрипт в код сайта перед закрывающим тегом body.

Скрипт должен быть установлен на всех страницах.

Ниже — инструкция по созданию веб-формы для сайта.

1. Тип формы и поля

1. Перейдите на вкладку Сайт —> Формы.

2. На вкладке “Собственные формы” нажмите на кнопку “Создать форму подписки”.

3. Выберите тип формы, которую хотите создать: Встроенная, Плавающая

или Модальное окно.

4. Задайте название формы.

5. Выберите типы данных, которые будут собираться из формы: email, номер телефона и/или имя.

6. Закончив вносить настройки в этой вкладке, нажмите кнопку “Далее”.

2. Настройка формы под стили сайта

На странице “Стили сайта” вы можете настроить:

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

2. Дизайн формы: Классический, Минимализм, Мягкий, Декоративный или Современный. Закончив вносить настройки на этой странице, нажмите кнопку “Далее”.

3. Выбор расположения полей формы

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

1. Горизонтальный:

2. Вертикальный:

3. Вертикальный с картинкой:

4. Горизонтальный с сопроводительным текстом:

5. Вертикальный с сопроводительным текстом:

6. Вертикальный с картинкой и сопроводительным текстом:

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

4. Редактирование контента формы

Здесь вы можете отредактировать контент формы в 4-х ее базовых состояниях:

  • Подписка – состояние, которое видит новый пользователь;
  • Успех – состояние, которое видит пользователь, успешно отправивший запрос;
  • Уже подписан – состояние, которое видит уже подписанный пользователь, повторно отправивший запрос;
  • Ошибка – состояние, которое видит пользователь при неудавшейся попытке отправить запрос.

Левая панель настроек

Слева на странице расположены 2 вкладки с настройками редактирования: “Оформление” и “Контент”.

Вкладка “Оформление”

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

Стиль текста

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

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

Брейкпоинт

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

Чтобы изменить отображение элементов на мобильном, выберите нужный элемент и перейдите во вкладку “Мобильные настройки”.

Вкладка “Контент”

Перейдя во вкладку “Контент”, вы сможете редактировать отдельные структурные части формы.

Структура формы может состоять из таких уровней:

  • состояние,
  • контейнер (для некоторых типов форм),
  • элемент.

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

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

Обратите внимание!

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

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

После этого укажите параметры элемента по умолчанию и при ошибке.

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

Ширину, высоту и внутренние отступы вы можете редактировать как на панели слева, так и с помощью перетаскивания границ элементов.

На уровне контейнера можно менять расположение полей: с вертикального на горизонтальное и наоборот.

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

Можно использовать картинку в качестве фона структуры, контейнеров или элементов (например — кнопки).

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

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

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

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

Верхняя панель настроек

1. Настройки мультиязычности:

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

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

3. Кнопки перехода на мобильную и десктопную версии формы.

4. Предпросмотр формы и ее состояний.

Когда вы закончите редактирование контента, нажмите “Далее” на верхней панели.

5. Выбор места размещения

1. Введите CSS-селектор элемента, который вы хотите сделать местом размещения.

2. Укажите, как расположить форму относительно найденного элемента:

  • перед элементом,
  • после элемента,
  • внутри элемента, первой,
  • внутри элемента, последней.

Если вы не готовы указать место размещения формы, активируйте переключатель “Указать место размещения позже”.

3. Нажмите “Готово”. Изначально форма будет видна только вам, на следующей странице вы сможете сделать ее общедоступной.

6. Проверка корректности настроек

Во вкладке «Параметры» вы можете:

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

По умолчанию к форме автоматически подставляется письмо для подтверждения email, которое ранее было создано в аккаунте. Если в аккаунте нет письма-подтверждения, то автоматически добавится базовый шаблон. При необходимости можно отредактировать или создать другое письмо, главное, чтобы оно содержало кнопку подтверждения email-адреса контакта (тип ссылки – “Подтверждение подписки”).

К кнопке автоматически привяжется тип события SysConactConfirmed, который запускает системный сценарий.

Затем выберите, куда перенаправлять пользователя после того, как он нажмет на кнопку: на стандартную страницу переадресации с благодарностью за подписку (см. пример на скрине ниже) или на URL верифицированного домена (страница вашего сайта).

Чтобы отправлять велком-письма, выберите или создайте сообщение, которое пользователи будут получать после подписки. Также вы можете настроить приветственный сценарий.

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

Когда все необходимые настройки внесены, нажмите кнопку “Видна посетителям сайта” и сохраните настройки.

7. Статистика

Чтобы увидеть статистику, перейдите во вкладку “Сайт” → “Формы” и кликните по названию интересующей вас формы.

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

Конструктор форм. Инструкция по добавлению формы оплаты на сайт на платформе Adobe Business Catalyst.

Конструктор форм

Данный функционал сервиса https://kassa.payanyway.ru/ предназначен для создание формы оплаты с заданными свойствами. Полученную форму оплаты можно в дальнейшем вставить на любой сайт, у которого имеется редактор HTML страниц, т.е. практически в любую CMS.

Для начала работы с конструктором перейдите в соответствующий пункт меню сервиса: https://kassa.payanyway.ru/formpaylist:

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

Далее нажмите кнопку «Конструктор формы оплаты» для перехода к редактору.

Редактор имеет следующий вид:

Опции конструктора

  1. Запрашивать у покупателя (E-Mail, номер телефона). Вы можете выбрать что будет запрашивать у покупателя форма оплаты. Если в вашем аккаунте на сервисе https://kassa.payanyway.ru/ включена касса, то заполненный контакт покупателя будет использоваться для отправки ему чека (через ОФД). При выборе одновременно и E-Mail и номер телефона конструктор запросит выбрать куда именно будет отправлен чек.
  2. Описание платежа. Введите текст, который отражает за что в целом будет производиться оплата покупателем. Вы можете позволить покупателю самостоятельно менять описание платежа, если желаете получить от него индивидуальные подробности по оплате.
  3. Текст на кнопке. Вместо стандартного «Оплатить» можно задать «Купить» или «Заказать».
  4. Опция «После успешной оплаты направить пользователя по ссылке» предназначена для того чтобы задать перенаправление после успешной оплаты. Вы можете создать в вашей CMS специальную страницу с благодарностью об оплате и перенаправлять на неё пользователя.
  5. Назначить идентификатор заказа. Может понадобиться тем, у кого имеется какая-либо учетная программа, например «1С: Предприятие», куда ранее был заведен заказ покупателя подлежащий оплате. Идентификатор в дальнейшем позволит идентифицировать успешный платеж в системе Монета чтобы разнести оплату в учетной программе.
  6. Сумма к оплате — общая сумма заказа.
  7. Покупатель может менять сумму. Включение данной опции позволит покупателю самостоятельно установить сумму, подлежащую оплате.
  8. Опция «Детализировать список товаров/услуг» позволит добавить в форму оплаты список товаров (или услуг) с дополнительной возможностью выбрать количество каждого товара, входящего в состав данной формы оплаты. При выборе покупателем количества будет меняться и общая сумма заказа в соответствии с выбором. Каждому товару может быть добавлена фотография, выбрана ставка НДС для последующей печати чека после оплаты.

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

Получение HTML кода формы оплаты

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

При нажатии «Получить код для вставки на сайт» вы увидите страницу с HTML кодом формы оплаты и ссылкой на форму оплаты:

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

Инструкция по настройке счета

1. Зарегистрируйтесь в платёжной системе PayAnyWay и заполните все необходимые данные. Дождитесь проверки аккаунта и создайте расширенный счет.

2. Заполните настройки расширенного счета (раздел «Мой счет» — «Управление счетами» — «Редактировать счет»):

  • «Тестовый режим»: Нет
  • «Check URL»: Заполнять не нужно
  • «Pay URL»: https://kassa.payanyway.ru/index.php?do=invoicepayurl
  • «HTTP метод»: POST
  • «Проверить Check/Pay URL»: Нет
  • «Можно переопределять настройки в url»: Нет
  • «Подпись формы оплаты обязательна»: Да
  • «Код проверки целостности данных»: Произвольный набор символов
  • «Success URL» и «Fail URL»: Необязательное поле
    URL страниц магазина, куда должен попасть покупатель после успешной оплаты или в случае ошибки/отказа при попытке оплаты.
  • «InProgress URL»: Необязательное поле
    URL страницы магазина, куда должен попасть покупатель после успешного запроса на авторизацию средств, до подтверждения списания и зачисления средств. Поддерживается ограниченным количеством методов оплаты.
  • «Return URL»: Необязательное поле
    URL страницы магазина, куда должен вернуться покупатель при добровольном отказе от оплаты. Отчет об оплате в этом случае магазину не отсылается.

Настройка оплаты на сайте

Система управления контентом (CMS) Adobe Business Catalyst предоставляет огромные возможности для создания, редактирования и настройки сайта. В том числе — позволяет вставлять на сайт собственный программный код. Под своим кодом, в контексте данной инструкции, понимается код формы оплаты, который Вы можете получить в личном кабинете сервиса Касса платёжного решения PayAnyWay.

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

Для того, чтобы вставить форму оплаты на сайт, созданный в CMS Adobe Business Catalyst, достаточно проделать следующие действия:

  1. Войдите в административную панель сайта. В меню, слева, кликните левой кнопкой мыши по пункту «E-Commerce». Откроется список подпунктов. Кликните левой кнопкой мыши по подпункту «Products». Загрузится страница, на которой будут перечислены все товары, добавленные на сайт. Выберите товар, на страницу которого Вы хотите добавить форму оплаты, и кликните левой кнопкой мыши по его названию. Загрузится страница редактирования информации о товаре:

  2. Прокрутите страницу редактирования информации о товаре до самого низа. В последнем блоке на странице (он называется «Product Description») кликните левой кнопкой мыши на вкладке «<>HTML». Представление информации в блоке переключится на режим отображения программного кода.

  3. Вставьте код формы оплаты в нужную строку и нажмите кнопку «Save».
    Предполагается, что форма оплаты уже создана Вами в личном кабинете на сайте сервиса PayAnyWay Касса.

    Вы можете посмотреть как будет выглядеть форма оплаты на странице, нажав кнопку «Preview Product», при необходимости, внести необходимые корректировки расположения формы на странице.
    Форма оплаты успешно добавлена и отобразится на странице товара:

    Вы можете добавить формы оплаты на любые другие страницы сайта. В CMS Adobe Business Catalyst существует множество различных блоков и страниц: формы, блоги, списки, …
    Как правило, для вставки своего кода используется кнопка(или ссылка) с подобным изображением: «<>HTML». Если в каком либо из блоков есть подобная кнопка — это означает, что Вы можете вставить форму оплаты в данный предустановленный блок.

Приятных платежей!

Конструктор форм / Справка 2.0 (2008г.) / Сайт-Менеджер

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

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

«Конструктор форм» есть на всех тарифах, кроме «Визитки».

Пример анкеты на сайте:

Итак, как создается новая форма с помощью модуля «Конструктор форм»?

Зайдите в раздел «Сервисы» — «Конструктор форм» в левом навигационном меню:

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

Появится окно, в котором заполните следующие поля:

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

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

После заполнения полей и сохранения изменений новая форма появится в списке всех созданных форм. В любой момент можно изменить поля, нажав на ссылку «Настройки»:

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

Нажмите на ссылку «Добавить поле»:

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

Рассмотрим подробнее возможные типы полей.

  • Простое текстовое поле — обычное однострочное поле для ввода небольшой информации. Например, «Ваше имя» или «Телефон»:

  • Многострочное поле — поле для ввода текста большого объема:

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

  • Набор переключателей — несколько значений с возможностью выбрать один из вариантов:

  • Галочка (да/нет) — одно утверждение, с которым пользователь соглашается или нет:

  • Группа галочек — несколько значений, пользователь может выбрать несколько вариантов:

Любое поле можно сделать обязательным. Если пользователь не заполнит такое поле, появится сообщение о необходимости заполнения:

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

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

Ненужную форму можно удалить, нажав на ссылку «Удалить»:

Если ненужных форм несколько, отметьте галочкой такие формы и нажмите на иконку на серой полосе «Удалить выбранные»:

Внешний вид формы.

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

Пример индивидуальной формы:

Сторонние сервисы.

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

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

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

Плюсы:

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

Минусы:

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

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

Создание формы | htmlbook.ru

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

Сама форма создаётся с помощью тега <form>, внутри которой могут быть любые необходимые теги, и характеризуется следующими необязательными параметрами:

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

Допускается использовать несколько форм на странице, но они не должны вкладываться одна в другую (пример 1).

Пример 1. Ошибочное использование форм

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input name="a"> <input type="submit"></p>
   <form action="handler.php">
    <p><input name="b"> <input type="submit"></p>
   </form>
  </form>
 </body>
</html>

Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом action тега <form>. Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.

Часто бывает, что текущая страница написанная, допустим, на PHP, сама является обработчиком формы, в таком случае можно указать пустое значение атрибута action или вообще его опустить. В простейшем случае тег <form>  не содержит никаких атрибутов и представлен в примере 2.

Пример 2. Простая форма

HTML5IECrOpSaFx

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form>
   <p><input name="a"> <input type="submit"></p>
  </form>
 </body>
</html>

В качестве значения атрибута action можно указать также адрес электронной почты, начиная его с ключевого слова mailto:. При отправке формы будет запущена почтовая программа, установленная по умолчанию. В целях безопасности в браузере задано, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype со значением text/plain в теге <form> (пример 3).

Пример 3. Отправка формы по почте

HTML5IECrOpSaFx

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="mailto:[email protected]" enctype="text/plain">
   <p><input name="a"> <input type="submit"></p>
  </form>
 </body>
</html>

Браузеры неоднозначно работают с таким кодом. Firefox предложит список подходящих приложений для отправки почты (рис. 1), Internet Explorer выведет предупреждение (рис. 2) и попытается запустить программу, сопоставленную с почтой, Opera подобно Firefox предложит список вариантов подходящих для отправки почты (рис. 3).

Рис. 1. Запуск приложения в Firefox

Рис. 2. Предупреждение Internet Explorer

Рис. 3. Выбор программы в Opera

Как создать контактную форму веб-сайта

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

Используйте онлайн-конструктор форм.

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

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

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

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

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

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

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

  1. В Acrobat выберите «Инструменты» > «Подготовить форму».
  2. Выберите «Создать новый» и нажмите «Пуск».
  3. Добавьте текст, логотипы, кнопки и поля ввода.
  4. Используйте вкладку «Свойства кнопки», чтобы направлять нажатия кнопок на электронные письма или URL-адреса.
  5. Добавьте гиперссылки для удобной навигации.
  6. Нажмите Сохранить.

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

Узнайте, что еще вы можете сделать с Acrobat DC для создания контента для своего веб-сайта.

О структуре, входных данных, метках и действиях — Smashing Magazine

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

В этой статье вы увидите практические приемы, полученные в ходе юзабилити-тестирования, полевых испытаний, исследований слежения за движениями глаз и реальных жалоб недовольных пользователей. Эти методы — при правильном использовании — позволяют дизайнерам создавать более быстрые, простые и продуктивные формы. Есть способ, которым вы можете создавать и проектировать свои собственные прототипы: все, что вам нужно сделать, это загрузить Adobe XD (бесплатно) и сразу же приступить к работе. В конце статьи вы также найдете новые способы проектирования форм.

Дополнительная литература на SmashingMag:

Компоненты форм

Типичная форма состоит из следующих пяти компонентов:

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

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

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

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

Структура формы

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

Спрашивайте только то, что необходимо

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

Больше после прыжка! Продолжить чтение ниже ↓

Логически заказывать форму

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

Группировать связанную информацию

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

Сгруппируйте вместе связанные поля (Изображение: Nielsen Norman Group)

Один столбец против одного столбца. Несколько столбцов

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

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

Поля ввода

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

Количество полей

Эмпирическое правило при разработке форм гласит: чем короче, тем лучше. И это, безусловно, кажется интуитивно понятным: меньшие усилия со стороны пользователя приведут к более высокой конверсии. Таким образом, максимально уменьшите количество полей. Это сделает вашу форму менее загруженной, особенно когда вы запрашиваете много информации.Однако не переусердствуйте; никому не нравится форма из трех полей, которая превращается в опрос из 30 полей. Отображение только пяти-семи полей ввода в данный момент времени является обычной практикой.

Объедините несколько полей в одно простое для заполнения поле. (Изображение: Люк Вроблевски) (Просмотреть увеличенную версию)

Обязательный Vs. Необязательный

Старайтесь избегать необязательных полей в формах. Но если вы их используете, то хотя бы четко различайте, какие поля ввода нельзя оставлять пустыми. Принято использовать звездочку (*) для обязательных полей или слово «необязательно» для необязательных полей (что предпочтительнее в длинных формах с несколькими обязательными полями).Если вы решили использовать звездочку для обязательных полей, покажите внизу формы подсказку, объясняющую, для чего нужна звездочка, потому что не все понимают, что она означает.

Форма подписки на список рассылки MailChimp.

Установка значений по умолчанию

Избегайте установки значений по умолчанию, если вы не уверены, что большая часть ваших пользователей (например, 90 % из них) выберет это значение. Особенно избегайте этого для обязательных полей. Почему? Потому что вы, вероятно, внесете ошибки. Люди быстро просматривают онлайн-формы, поэтому не думайте, что им потребуется время, чтобы проанализировать все варианты.Они могут пропустить что-то, что уже имеет значение.

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

Предварительно выбранная страна в форме оформления заказа

Маски ввода

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

(Изображение: Джош Морони)

Только для рабочего стола: сделать форму удобной для клавиатуры

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

Даже простое средство выбора даты должно соответствовать рекомендациям W3C. (Изображение: Salesforce) (Просмотреть увеличенную версию)

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

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

(Просмотреть большую версию)

Только для мобильных устройств: Подбор клавиатуры для ввода

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

(Изображение: Google)

Ограничение ввода (автозаполнение)

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

Ярлыки

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

Количество слов

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

(Посмотреть большую версию)

Приговор Дело Против. Заглавный регистр

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

  • Заглавный регистр: каждое слово с заглавной буквы. «Это титульный случай».
  • случай в предложении: написать первое слово с большой буквы. «Это приговор».

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

Избегайте использования всех прописных букв

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

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

Выравнивание этикеток: слева против. Право Против. Top

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

Метки, выровненные по левому краю, по правому краю и по верхнему краю (Изображение: UX Matters) (Просмотреть большую версию)

Самое большое преимущество ярлыков, выровненных по верхнему краю , заключается в том, что ярлыки разных размеров и локализованные версии легче вписываются в пользовательский интерфейс. . (Это особенно хорошо для экранов с ограниченным пространством). Вероятно, это связано с визуальным расстоянием между меткой и полем ввода.Чем короче метка, тем дальше она будет от входа. Однако низкая скорость заполнения — это не всегда плохо, особенно если форма запрашивает конфиденциальные данные. Если вы запрашиваете что-то вроде номера водительского удостоверения или номера социального страхования, вы можете намеренно немного замедлить пользователей, чтобы убедиться, что они вводят его правильно. Таким образом, время, потраченное на чтение меток для конфиденциальных данных, незначительно. Метки, выровненные по левому краю, имеют еще один недостаток: они требуют больше горизонтального пространства, что может быть проблемой для мобильных пользователей.

(Изображение: CSS-Tricks)

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

(Изображение: CSS-Tricks)

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

Встроенные метки (текст-заполнитель)

Метка, установленная в качестве заполнителя в поле ввода, исчезнет, ​​как только поле получит фокус; пользователь больше не сможет его просматривать. Хотя текст-заполнитель может работать для форм с двумя полями (простая форма входа в систему с полями для имени пользователя и пароля), он является плохой заменой визуальным меткам, когда от пользователя требуется дополнительная информация.

(Изображение: snapwi)

Как только пользователь нажмет на поле ввода, метка исчезнет, ​​и поэтому пользователь не сможет дважды проверить, написал ли он то, о чем его просили. Это увеличивает вероятность ошибки. Другая проблема заключается в том, что пользователи могут ошибочно принять текст-заполнитель за предварительно заполненные данные и, следовательно, проигнорировать его (как подтверждает исследование Nielsen Norman Group по отслеживанию движения глаз).

Текст-заполнитель в качестве метки поля

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

(Изображение: MDS)

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

Кнопки действий

При нажатии кнопки действия инициируется некоторое действие, например отправка формы.

Первичный против. Вторичные действия

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

Равный визуальный вес и визуальное различие (Изображение: Люк Вроблевски)

Расположение кнопки

Сложные формы обычно нуждаются в кнопке «Назад». Если такая кнопка расположена прямо под полем ввода (как на первом скриншоте ниже), пользователь может случайно нажать на нее. Поскольку кнопка «Назад» является второстепенным действием, сделайте ее менее доступной (вторая форма ниже имеет правильное расположение кнопок).

(Просмотреть увеличенную версию)

Соглашения об именах

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

(Просмотреть большую версию)

Кнопки с несколькими действиями

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

Кнопка сброса — это чистое зло

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

Внешний вид

Убедитесь, что кнопки действий выглядят как кнопки: Укажите, что их можно щелкнуть или коснуться.

Затенение означает, что можно щелкнуть. (Изображение: Вадим Громов)

Визуальная обратная связь

Разработайте кнопку «Отправить» таким образом, чтобы она четко указывала на то, что форма обрабатывается после действия пользователя. Это обеспечивает обратную связь с пользователем, предотвращая двойную отправку.

(Изображение: Michaël Villar)

Проверка

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

Встроенная проверка

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

(Изображение: Stack Exchange)

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

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

Google Forms сообщает, что адрес электронной почты недействителен до того, как вы закончите ввод. (Изображение: Medium)

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

Проверка в Apple Store выполняется после ввода данных. (Изображение: Medium)

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

  • Если пользователь вводит данные в поле, которое было в допустимом состоянии (т. е. ранее введенные данные были действительными), то после ввода данных выполняется проверка.
  • Если пользователь вводит данные в поле, которое было в недопустимом состоянии (т.е. ранее введенные данные были недействительны), затем подтвердите их при вводе данных.
Гибридный подход: рано вознаграждать, поздно наказывать. (Изображение: Medium)

Защита данных

Джеф Раскин однажды сказал: «Система должна относиться ко всем пользовательским данным как к священным». Это абсолютно верно для форм. Это здорово, когда вы начинаете заполнять форму, а потом случайно обновляете страницу, а данные остаются в полях. Такие инструменты, как Garlic.js, помогают сохранять значения формы локально до тех пор, пока форма не будет отправлена.Таким образом, пользователи не потеряют ценные данные, если случайно закроют вкладку или браузер.

(Показать увеличенную версию)

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

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

Интерфейс на естественном языке

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

Этот дизайн формы от Codrops использует диалоговый шаблон, чтобы лучше походить на задачу. (Просмотреть большую версию)

Разговорная форма

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

Заключение

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

Эта статья является частью серии UX-дизайна, спонсируемой Adobe. Недавно представленный инструмент Adobe Experience Design CC (бета-версия) предназначен для быстрого и плавного процесса проектирования UX, поскольку он позволяет быстрее переходить от идеи к прототипу. Дизайн, прототип и публикация — все в одном приложении. Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также посетить блог Adobe XD, чтобы быть в курсе последних событий. Adobe XD часто обновляется новыми функциями, и, поскольку он находится в общедоступной бета-версии, вы можете загрузить и протестировать его бесплатно.
(ms, vf, al, yk, il)

Что такое веб-форма и как она может улучшить ваш бизнес

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

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

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

Что такое веб-форма

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

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

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

Когда использовать веб-формы

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

Существует несколько вариантов использования веб-форм:

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

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

Структура веб-формы

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

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

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

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

Для чего нужны веб-формы?

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

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

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

У вас может быть контактная форма, которая работает для создания беседы. Цель формы — установить связь между лидом и вашим бизнесом.

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

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

Интеграция и функции веб-форм

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

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

Таблицы Google 

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

Google Диск и Dropbox

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

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

Zapier

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

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

Календарь Google

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

Webhook

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

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

Платежная платформа Stripe

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

Полевые ключи

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

Логические правила

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

Пользовательский URL-адрес

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

Функции отмены и повтора

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

Сохранить и возобновить

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

Форма как целевая страница

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

Примеры веб-форм

Контактная форма

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

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

Создать контактную форму очень просто. Вам необходима основная информация:

  • имя
  • адрес электронной почты
  • поле для комментариев

Если вы запрашиваете более подробную информацию, ясно объясните причину. Исследования показывают, что 37% респондентов откажутся от формы, в которой есть обязательное поле для номера телефона. Это означает, что любое поле, которое вы добавляете в контактную форму, должно быть там по ясной причине.

Форма привлечения потенциальных клиентов

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

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

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

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

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

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

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

Опрос

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

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

Бланк заказа

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

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

Бланк бронирования

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

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

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

Заключительные мысли

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

Зарегистрируйтесь бесплатно сегодня.

Создайте свой собственный сайт профессиональной фотографии

Создайте свой собственный сайт профессиональной фотографии | Формат

Присоединиться к сообществу:

  • 50 000+ фотографов
  • 190 стран
  • 10+ лет

Интернет-портфолио

Простой, надежный, профессионально разработанный веб-сайт портфолио.

Учить больше

Рабочий процесс

Ведите свой бизнес как профессионал.

Учить больше

Format — это сообщество тысяч фотографов из 190 стран, влияющих на мир своей работой.

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

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

Интернет-портфолио

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

Отмеченный наградами дизайн за считанные минуты — кодирование не требуется

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

Продавайте и выполняйте заказы по всему миру с помощью интернет-магазинов для фотографов и художников

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

Видеохостинг включен,

можно найти только в Format.

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

Облачное хранилище фотографий для вашей творческой работы.

Упростите организацию фотографий и храните все свои фотографии в одном надежном и надежном месте.

Постоянно развивающиеся мощные функции, которые помогут вам добиться успеха
  • Без платы за установку или скрытых расходов
  • Бесплатная круглосуточная поддержка клиентов
  • Услуги по созданию сайтов, бесплатно для некоторых планов
  • Качественный рендеринг изображения без медленных скоростей загрузки
  • Переключение между дизайнами сайтов за секунды
  • Привлекайте новых клиентов с помощью инструментов SEO
  • Беспрепятственное обслуживание изображений с высоким разрешением для обеспечения высокой скорости загрузки
  • Шаблоны и макеты для мобильных устройств предназначены для мобильных устройств
  • Блог-платформа, созданная в
  • Полностью настраиваемые контактные формы и формы ввода
  • Профессиональный адрес электронной почты на базе Google Workspace
  • Простая регистрация, перенос и подключение личного домена
  • Защитите свои изображения от несанкционированного распространения
  • Высокоскоростные серверы, расположенные по всему миру, быстро обслуживающие ваш веб-сайт для вашей международной аудитории
  • Интеграция с Lightroom и Capture One

Рабочий процесс

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

Клиентские галереи

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

Передача больших файлов

Легко и безопасно передавайте до 10 ГБ фотографий клиентам с помощью фирменной передачи файлов или общих галерей. Выглядите более профессионально, работая с той же платформы, что и ваше портфолио.

Управление проектами, контрактами и контактами

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

Витрина участника Explore Format

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

Исследуйте витрину

Родившаяся в Лос-Анджелесе Розетта Раго в настоящее время является фоторедактором Wirecutter в New York Times и бывшим фоторедактором Time Out Los Angeles.Фотографии Розетты публиковались в таких изданиях, как The New York Times, The Washington Post, TIME, Vanity Fair, VICE, Bloomberg Businessweek, The FADER, Smithsonian Books и Rolling Stone.

Смотри сейчас

Попробуйте Форматировать бесплатно. Кредитная карта не требуется.

Часто задаваемые вопросы

  • Нужно ли мне уметь кодировать?

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

  • У меня уже есть собственный домен. Могу ли я использовать его с форматом?

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

  • Включает ли Format хостинг для моего сайта?

    Все планы Format автоматически включают хостинг, поэтому вам не нужно приобретать услуги хостинга у третьих лиц.

  • Я плохо осваиваю новое программное обеспечение, кто-нибудь мне поможет?

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

  • Готовы ли сайты Format к работе с мобильными устройствами?

    Абсолютно! Все наши темы оптимизированы для просмотра на всех устройствах и платформах: от настольных компьютеров с высоким разрешением до ноутбуков и смартфонов.

  • Легко ли им пользоваться?

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

  • Чем Format лучше того, что я сейчас использую?

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

  • Могу ли я отменить в любое время?

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

Рекомендации по созданию превосходных веб-форм

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

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

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

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

Давайте погрузимся!

10 ошибок дизайна веб-форм и 10 простых способов их исправить

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

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

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

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

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

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

1. Ошибка веб-формы: длинные формы

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

При более тщательном изучении того, почему многие клиенты нашли идеальный вариант проживания только для того, чтобы отказаться от оформления заказа до фактической покупки, Expedia была удивлена, обнаружив то, что заставило пользователей уйти: единственная ненужная и запутанная форма ввода.О том, как и почему так получилось, вы можете прочитать в статье Как одно дополнительное поле может стоить 12 миллионов долларов США, но итог довольно прост:

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

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

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

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

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

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

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

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

2. Ошибка веб-формы: неправильный порядок полей ввода

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

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

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

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

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

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

Все сводится к 6 принципам убеждения доктора Р. Б. Чалдини, которые он исследует в своей культовой книге «Влияние: психология убеждения». Чалдини обнаружил, что люди гораздо охотнее выполняют задачу, если они уже посвятили ей некоторое время или усилия.Человек, который только что потратил 10 минут на заполнение 3-х страниц с записями полей — пользователю было бы разумно не бросить все это в последнюю минуту.

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

3. Ошибка веб-формы: нечеткие поля ввода

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

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

Аналогично, вы можете (и должны) использовать заполнители для большей ясности. Заполнители направляют пользователя, сообщая ему, какая информация от него требуется. Вы можете использовать заполнители, чтобы указать тип информации или формат, в котором должны быть данные, например дату рождения: ДД/ММ/ГГ или ДД/ММ/ГГГГ.

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

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

4. Ошибка веб-формы: нет поддержки или проверки

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

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

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

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

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

5. Ошибка веб-формы: все элементы управления вводом перепутаны

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

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

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

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

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

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

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

6. Ошибка веб-формы: нет фокуса поля

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

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

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

7. Ошибка веб-формы: пользователи должны делать всю тяжелую работу

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

Онлайн-решение Formstack для генерации лидов опубликовало отчет о конверсии форм в 2015 году. В отчете они обнаружили, что простое внедрение социального автозаполнения увеличило конверсию до 189%.Как вам мощная сила преобразования?

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

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

8. Ошибка веб-формы: неизвестные ошибки

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

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

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

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

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

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

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

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

9. Ошибка веб-формы: неаккуратный дизайн кнопки

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

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

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

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

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

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

10. Ошибка веб-формы: ускоренная копия

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

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

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

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

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

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

Тот факт, что заполнение форм не соответствует чьему-то представлению о развлечении, не означает, что веб-формы должны быть ужасными.

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

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

Бесплатный онлайн конструктор форм | Tally

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

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

Регистрация не требуется

Tally — это новый тип конструктора форм, который

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

Создано для вас

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

Шаблоны просмотра

Создатели

Продажа продуктов онлайн

Принять платежи

Пользователи регистра

Продукт

Соберите пользователей отзывы

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

CREATION DIRUNS SURVEYS

. Формы генерации

Настройка регистрации мероприятий

HR

Измерение участия сотрудников

Создание форм подачи заявок на работу

на борту работников

Office

Организация командных мероприятий

Упрощенные продовольственные заказы

Установили домашний офис

Персонал

. Планирование поездки

Организовать вечеринку

Устроить викторину

1

1.Собирайте данные любого типа

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

2

2. Легко делитесь или встраивайте

Делитесь ссылкой на форму, подключайте пользовательские домены и встраивайте форму на свой веб-сайт или страницу Notion.

3

3. Получите больше от своих данных

Анализируйте отправленные вами формы с подробными отчетами. Экспортируйте данные и автоматизируйте рабочие процессы с помощью Zapier, Make, Google Sheets, Notion, Airtable, Slack, веб-хуков и т. д.

4

4. Организуйте свою команду

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

Придайте пикантности с Pro

Tally можно использовать совершенно бесплатно, но если вам нужно немного больше, обновитесь до Tally Pro.

См. цены

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

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

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

Добавьте свои собственные домены (или субдомены) в свои формы Tally и создайте привлекательные URL-адреса, оптимизированные для SEO. Мы позаботимся о хостинге и SSL-сертификатах за вас.

Добавьте пользовательские стили (например, изменение цвета, шрифтов) или сценарии (например, код отслеживания Google Analytics, интерком, «Купи мне кофе» и т. д.) в форму Tally с персональным доменом.

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

Частичная отправка

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

Без комиссии

Удалите 5% комиссию за входящие платежи и платите только комиссию за транзакцию Stripe.

Удалите ограничение в 10 МБ на размер файла при использовании блока загрузки файлов.

ФОРМА | Digital-First Creative для искусства, культуры и некоммерческих организаций

«Команда FORM особенно умело нас слушала, учитывала все наши потребности и претворяла их в жизнь. Они помогли нам разработать план эффективного общения с несколькими аудиториями. Мы получили фантастический отклик от членов правления, наших партнерских организаций и широкой общественности».
— Университетский кружок

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

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

«Онлайн-пожертвования выросли с 21% до 67%! Это увеличение явно указывает на эффективность вашего создания красивой и функциональной платформы для пожертвований! Так что спасибо тебе! Каждый день я благодарен за эту новую платформу и поддержку, которую FORM постоянно предлагает.” , Рядом с Западным театром

«Наша миссия — общаться с людьми и давать им способы понять, как распознать депрессию и предотвратить самоубийство. Чтобы сделать это эффективно и охватить больше людей, FORM обновила свое присутствие в Интернете. Нас регулярно хвалят на нашем веб-сайте, что укрепляет понимание того, что наше присутствие оказывает влияние».
— ЖИЗНЬ

«FORM помогла нам провести более стратегическую и структурированную цифровую кампанию для нашего Дня LANDiversary (наша версия Giving Tuesday), и это определенно оказало влияние.Мы собрали на 7% больше долларов, чем в прошлом году, и получили на 49% больше подарков, чем годом ранее! Они также работали изо всех сил, в 11 часов, чтобы помочь нам достичь нашей цели, а именно ФОРМУ».
— ЗЕМЕЛЬНАЯ СТУДИЯ

«Мы опубликовали запрос предложений, и через несколько месяцев стало ясно, что FORM обладает наибольшим опытом создания визуально привлекательных и интуитивно понятных сайтов для таких организаций, как наша. Компания FORM дала нам больше, чем мы могли себе представить, вовремя и в рамках бюджета, и стала идеальным партнером, который помог нам выйти на новый уровень с нашим брендом.”
— Центр современного искусства

«Онлайн-продажи билетов выросли с 58% до 78%. Авиапочтой дам вам пять и удар кулаком».
— Городской клуб Кливленда

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

«FORM помог продовольственному банку Большого Кливленда создать визуально привлекательный и очень удобный веб-сайт.Они разработали сайт, который позволяет нам рассказать историю о том, что мы делаем и кому мы служим. Это стало отличным инструментом, помогающим нам донести наше сообщение до общественности».
— Продовольственный банк Большого Кливленда

«Мы глубоко благодарны команде FORM за усердную работу, внимание к деталям и усилия, направленные на достижение совершенства».
— Католическая епархия Кливленда

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

«Как новая некоммерческая организация, мы столкнулись с задачей развития нашего бренда с нуля. Команда FORM умело объединила нашу организацию вокруг общего видения, в конечном итоге создав наш бренд / идентичность, а также предоставив эффективный, индивидуальный веб-сайт, который воплощает нашу миссию и позволяет нам динамично обращаться к нашей аудитории.”
— Центр искусств Оберлина

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

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

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

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

«Спасибо за создание прекрасного сайта для нас. Он действительно потрясающий, функциональный и простой в навигации (как для пользователя, так и для администратора). Спасибо Спасибо спасибо. Буду рекомендовать вас и вашу команду всем, кому нужен новый сайт».
— Школы Джули Бильарт

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

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

Добавить комментарий

Ваш адрес email не будет опубликован.