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

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

18 лучших бесплатных конструкторов онлайн-форм

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

Мой любимый конструктор онлайн-форм:

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

Google Forms

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

Для создания формы выполните следующие шаги:

  • Добавить в форму « Заголовок »;
  • Добавить « Описание формы »;
  • Задать вопрос в поле « Название вопроса »;
  • Задать « Вспомогательный текст », чтобы подробнее описать суть вопроса;
  • Выбрать тип вопроса. Существует 9 типов ответов, которые можно выбрать. Варианты предоставления ответа отличаются в зависимости от типа ответа:

o Текст;
o Абзац текста;
o Множественный выбор;
o Чекбокс;
o Выбор из списка;
o Диапазон;
o Сетка;
o Дата;
o Время;

  • Нажать « Готово », чтобы создать вопрос;
  • Нажать « Добавить элемент », чтобы задать еще один вопрос.

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

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

Также можно поделиться ссылкой на форму с помощью различных социальных платформ: Facebook , Twitter и Google+ . А также копировать ссылку, чтобы поделиться нею напрямую; добавить соавторов, которые смогут изменять параметры формы или просматривать ответы в электронной таблице. К таблице с ответами можно получить доступ через Таблицы Google .

JotForm

Это многофункциональный конструктор обратных форм HTML . Для настройки форм предоставляется целый ряд инструментов и параметров. Можно создавать онлайн-формы без регистрации. JotForm позволяет добавлять различные поля:

  • Простые инструменты: эти инструменты позволяют задать следующие поля:

o Заголовок;
o Полное имя;
o Адрес электронной почты;
o Адрес;
o Телефон;
o Дата;
o Капча.

  • Инструменты формы: эти инструменты включают в себя следующие поля:

o Текстовое окно;
o Текстовая область;
o Выпадающий список;
o Радио-кнопка;
o Чекбокс;
o Текст;
o Изображение.

  • Инструменты опросов: их можно добавлять для определения рейтинга или популярности приведенных данных:

o Рейтинг;
o Матрица;
o Спиннер;

  • Платежные инструменты: использование различных сервисов для получения платежей или пожертвований;
  • Виджеты:

o Контрольный список;
o Слайдер изображений;
o YouTube.

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

Дополнительные функции включают в себя:

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

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

Typeform

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

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

После создания формы можно изменить цвет, шрифт и фоновое изображение, установить видимость (« Публичная » или « Частная »), добавить бренд, мета информацию ( только для версии PRO ).

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

Cognito Forms

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

Перетащите соответствующий элемент и поместите его в любом пустом поле, установите параметры для каждого поля: название, описание и тип ответа. Также есть возможность установить различные условия для ответов. Например, если вы используете инструмент « Выбор », можно задать « Выпадающий список », « Радио-кнопку » или « Чекбокс ». Можно добавлять различное количество вариантов ответа на каждый вопрос. А также устанавливать условия: « Показать поле, если », « Обязательно поле, если » и « Вывести пользовательскую ошибку, когда ».

После создания формы нажмите кнопку « Опубликовать », чтобы получить код для публикации. Скопируйте код, если нужно встроить форму на сайт, или скопируйте URL-адрес , чтобы поделиться им напрямую. Также доступны опции для социальных сетей: Facebook , Twitter и Google+ .

Чтобы просмотреть все предоставленные данные, перейдите в раздел « Записи ». Существует ограничение на количество просматриваемых записей. Бесплатно можно просматривать только последние 500 записей.

Зарегистрируйтесь и установите обновления, чтобы пользоваться инструментом без ограничений. Платная версия также поддерживает онлайн-виджеты оплаты. Условия использования просты — вы платите лишь 1% от каждого поступления средств.

PlanSo

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

  • Определенные поля: они включают в себя такие поля, как имя, электронная почта, телефон и т.д., которые не обязательно задавать;
  • Общие поля: текст, текстовая область и число. Можно определять параметры этих полей;
  • Поля даты и времени;
  • Поля выбора: поля с возможностью выбора вариантов: список, множественный выбор, радио-кнопка и чекбокс. Можно редактировать значения этих полей;
  • Специальные поля позволяют добавлять такие поля, как загрузка файлов и URL-адрес ;
  • HTML Теги: горизонтальный разделитель, заголовок, абзац, и любой другой HTML-код ;
  • Кнопка « Отправить »: В конце обязательно нужно добавить эту кнопку, чтобы пользователи могли отправить свои ответы.

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

EmailMeForm

На EmailMeForm можно создавать неограниченное количество форм. Это веб-приложение позволяет добавлять в форму до 50 полей. Поля разделяются на три категории:

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

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

Smart Survey

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

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

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

Для сбора ответов выберите один из способов: веб-ссылка, электронная почта, на сайте, Facebook и т.д.

Survey Monkey

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

Можно выбрать одну из стандартных тем для формы или создать собственную. Нажмите на кнопку « Предпросмотр и проверка », чтобы увидеть, как на самом деле будет выглядеть созданная форма. После этого нажмите « Далее », чтобы получить ссылку на нее. Можно отправить ссылку на электронную почту, Facebook или другие ресурсы. Разрешается получать до 100 ответов в месяц. В разделе « Анализ результатов » отображаются полученные ответы.

SurveyMoz

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

Чтобы создать собственную форму опроса, нажмите « Создать опрос ». Выберите один из предустановленных шаблонов или разработайте форму с нуля. Также можно добавить дизайнерские темы. Затем перейдите к добавлению вопросов.

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

RationalSurvey

Этот конструктор форм позволяет создавать до 10 форм, до 100 вопросов в каждой, и получать до 1000 ответов. В сервисе доступно три вкладки: « Настройка », « Распространение » и « Анализ ».

Редактирование уже готовых примеров вопросов выполняется на вкладке « Настройка ». Также можно добавить новый вопрос. После создания формы перейдите на вкладку « Распространение » для просмотра URL-адреса и кода для встраивания. Скопируйте URL-адрес и отправьте его заинтересованным пользователям или воспользуйтесь « Групповой рассылкой ». Также можно поделиться ссылкой через Facebook и Twitter . На вкладке « Анализ » отображаются полученные ответы. Можно экспортировать ответы в формате CSV , DOC , PD или SPSS .

PollDaddy

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

После завершения настройки опроса перейдите на вкладку « Стиль опроса », чтобы выбрать тему. Нажмите на кнопку « Получение ответов », чтобы получить прямой URL-адрес на форму. Или разместите опрос непосредственно в Facebook или Twitter .

Все ответы можно просмотреть на вкладке « Просмотр результатов ». Здесь доступны сами ответы, анализ ответов, аналитика формы и ответы на основе местоположения. Бесплатная версия включает в себя возможность добавления до 10 вопросов в одну форму и получение 200 результатов в месяц.

SurveyNuts

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

Поделитесь формой через URL-адрес , добавьте на сайт код для встраивания. Также доступны опции распространения через Facebook и загрузки печатной версии опроса. На странице результатов можно просматривать ответы в отсортированном виде. Бесплатный аккаунт позволяют добавлять только 10 вопросов и получать не более 100 откликов на форму.

Webform

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

Перейдите к свойствам и задайте параметры вопросов в соответствии со своими требованиями. Перейдите на вкладку « Результаты », чтобы просмотреть полученные ответы и аналитику или экспортировать данные в Excel . Также можно экспортировать данные непосредственно в Google Drive .

Бесплатный аккаунт позволяет получать до 100 ответов в месяц и использовать до 200 МБ памяти, но можно создавать неограниченное количество форм.

Awesome Forms

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

Настройки позволяют добавить URL-адрес , на который будут перенаправляться респонденты после заполнения формы. Код для встраивания или прямой URL-адрес можно получить на вкладке « Вставить код ». Все ответы собраны на вкладке « Представления ». Бесплатный аккаунт дает возможность получить доступ к функции шифрования SSL и получать до 500 ответов в месяц.

Inqwise

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

Сохраните форму и нажмите кнопку « Распространить », чтобы получить прямой URL , ссылку и код для встраивания. Inqwise также позволяет поделиться формой через электронную почту, Facebook , Twitter или Reddit . Загрузите QR-код , чтобы предоставлять ссылку на печатную версию формы. На вкладке « Ответы » отображаются все результаты заполнения форм.

Бесплатно можно получать 100 ответов в месяц, но при этом количество форм не ограничено.

SurveyStatz

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

После создания формы перейдите на вкладку « Внешний вид », чтобы просмотреть, как она выглядит. Также можно изменить внешний вид формы. Нажмите на кнопку « Запустить опрос », чтобы получить прямой URL-адрес , а также код для встраивания.

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

Infiniforms

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

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

Zoho Survey

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

Zoho Survey можно интегрировать с Zoho CRM , Google Docs или Zoho SalesIQ . Нажмите на кнопку « Опубликовать », чтобы сгенерировать URL-адрес для формы. Также можно применить ограничения по дате и защиту паролем. Бесплатный аккаунт позволяет создавать неограниченное количество форм, но добавлять только 15 вопросов и получать до 150 ответов на форму.

Данная публикация представляет собой перевод статьи « 18 Best Free Online Form Builder Websites » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Этот способ требует от вас как минимум знаний языка разметки HTML, а также CSS. А чтобы придать форме динамичность и какие-то визуальные эффекты, понадобится JavaScript. Не обойтись также без PHP, с помощью которого осуществляется прием данных с формы и отправка их на Email.

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

Готовые скрипты онлайн форм

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

Топ-пост этого месяца:  Гугл вебмастер — инструменты Search Console (Google Webmaster)

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

Индивидуальный заказ формы

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

Плагины для создания формы

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

stepFORM

stepFORM — WordPress плагин для создания форм любой сложности на базе визуального конструктора. В нем есть встроенная защита от спама, сбор ответов на email и CRM, интеграция с Google Analytics и Яндекс.Метрика, расчет стоимости по формулам, прием оплат на PayPal, Wallet One, Яндекс.Деньги и Яндекс.Касса, использование формы по ссылке в соцсетях и многое другое.

Contact Form 7

Contact Form 7 — самый популярный плагин создания форм на WordPress. Он поможет очень гибко настраивать содержимое форм и отправку данных на почту. Плагин включает в себя ajax отправку, а также Captcha и Akismet против спама.

WPForms

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

Ninja Forms

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

Конструкторы создания форм

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

Плюсы конструкторов форм:

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

Минусы конструкторов фом:

  • исходный код формы хранится на стороннем сервере и вы не сможете скачать полностью код, если захотите
  • не во всех конструкторах форм можно подключить свои скрипты и дополнительные сервисы, например, CRM, Google Analytics и т.п.

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

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

Google Forms

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

  • Текст
  • Абзац текста
  • Выпадающие списки
  • Флажки
  • Чекбоксы
  • Шкала с диапазоном
  • Изображения
  • Загрузка файлов
  • Сетка с флажками и чекбоксами
  • Дата
  • Время

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

Typeform

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

  • Короткий текст
  • Длинный текст
  • Множественный выбор
  • Утверждение
  • Изображения
  • Шкала
  • Рейтинг
  • Дата
  • Числа
  • Группы вопросов
  • Прием оплаты
  • и другие

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

uCalc

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

  • Выпадающие списки
  • Ползунки
  • Галочки
  • Флажки
  • Числовое поле
  • Текстовое поле
  • Большое текстовое поле
  • Email адрес
  • Номер телефона
  • Дата
  • Время
  • Загрузка файла
  • Изображения
  • Кнопки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1Заголовок

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

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

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

3Краткость

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

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

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

5Подсказки

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

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

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

7Юзабилити

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dobrovoi Master

Создаем всплывающую контактную форму для сайта

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

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

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

HTML-код формы

Ничего сверхъестественного, максимально простой каркас обычной контактной формы, помещенный в блочный элемент div с определенным идентификатором и классом, для дальнейшего формирования внешнего вида формы в css и взаимодействия с небольшим javascript, который нам понадобится для активации и закрытия всплывающей формы.

Отправить нам сообщение

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

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

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

Завершающим штрихом html-разметки нашей формы будет подключение к документу файла стилей modal-contact-form.css , в котором мы и будем формировать все необходимые элементы формы. Подключаем по накатанной, для тех кто не в теме поясню, в разделе между тегами . следует прописать такую сточку:

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

Всплывающая контактная форма
Обратная связь

Обратная связь для сайта

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

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

Формы обратной связи на сайт — что выбрать

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

У меня такой скрипт есть, писал я его конечно не сам. Я им с вами поделюсь и расскажу, как пользоваться — в качестве бонуса к основной статье.

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

Допустим, сегодня я делаю блог на Ворпдрессе (только по этой инструкции), завтра на Джумле, послезавтра на Друпале, в выходные делаю интернет-магазин на Опенкарте, затем верстаю лендинг страницу на чистом HTML5 + CSS3… И во всех проектах мне нужна эта форма, будь она неладна.

Вот скажите мне — это же сколько времени нужно потратить, чтобы к каждому отдельному сайту подобрать скрипт или плагин, удовлетворяющий требованиям? Ну ладно, допустим ты блоггер, работаешь с одним Ворпдрессом и по умолчанию в твоей сборке WordPress есть какой-нибудь плагин wp-contact-form-7.

Остальным-то что делать?

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

  • Быть в наличии в одной из ваших бесконечных папок со скриптами.
  • Работать всегда и везде.
  • Не требовать танцев с бубном при встраивании на сайт.

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

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

Я же предлагаю сэкономить:

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

HTML&PHP форма (и скрипт) обратной связи для блога, сайта

Скачайте просто скрипт Simple Send Mail или другую его версию Simple Send Mail Order с сайта landman.ru.

Вот какие формы вы получите:

Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма. Одно заказчику, другое — вам.

Как сделать одну из таких форм обратной связи на сайте? Качайте архив, закачивайте файлы из архива на сайт в каталог /sendmail, настраиваете конфигурационный файл config.php (прописываете свой email, другие настройки) и можно пользоваться — скрипт формы обратной связи готов к работе. Покажу как выглядит конфигурационный файл:

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

Вставка на сайт производится просто:
— можете дать ссылку на /sendmail/index.php
— можете сразу вставить на страницу, при помощи кода

Код можно найти на сайте, ссылка на который размещена выше.

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

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:

Как выглядит конфиг внутри («\code\assets\xml\config.php»):

Конфиг для настройки полей («\code\assets\xml\fields.php»):

Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.

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

Например, посмотрите как в этой форме связи выводятся ошибки:

Выглядит неплохо! А вот что увидит пользователь, после успешной отправки сообщения:

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

Вы также можете посмотреть интересный видеоурок по данному скрипту:

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

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

Итак, на одном сайтов установлена вот такая «кнопка»:

Если нажать на нее, вниз «выпадет» форма обратной связи:

На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:

А вот что придет вам на почту, после того как пользователь оставит свои контактные данные в форме:

Очень удобно. Вот код для работы формы как в первом случае:

div id = «form» >
p > a style = «text-decoration: none; border-bottom: 1px dotted; cursor: pointer;» id = «forma0» > Заказать звонок / a > / p >

div id = «forma1» style = «display:none; background-color: #fff;» >
script src = «sendmailforms/jquery.maskedinput-1.2.2.min.js» type = «text/javascript» > / script >
link rel = «stylesheet» type = «text/css» href = «sendmailforms/form.css» / >
script src = «sendmailforms/wait_for_call.js» type = «text/javascript» > / script >
script src = «sendmailforms/ajaxupload.js» type = «text/javascript» > / script >
script src = «sendmailforms/upload_file.js» type = «text/javascript» > / script >
div class = «call-me-form» title = «Заказать звонок» button = «Заказать звонок» style = «width: 200px» > / div >
/ div >
script >
$(«#forma0»).toggle(function() <
$(«#forma1»).slideDown(«slow»);
>, function() <
$(«#forma1»).slideUp(«slow»);
>);
/ script >
/ div >

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

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

Приведу содержимое конфиг-файла

Все! Больше ничего нет, остальное (стили) — вручную. Но они и так везде вручную. При этом форма использует Ajax, выводит сообщения об ошибке, а еще можно задать свою собственную маску номеров. Вот скриншоты:

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

Скачать форму можно по ссылке, либо с этого блога.

Это проверенное решение, которым я вполне доволен. Я нашел в этом скрипте для себя несколько преимуществ:

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

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

3. Форма подгружается не PHP-кодом, а div-блоком — это упрощает ее вставку в любое место сайта на порядок. Можно даже в тексте вставлять, если умеете.

И он тоже позволяет загружать файл, то есть ничем не уступает.

Ну а про онлайн конструкторы и навороченные генераторы скриптов обратной связи — как-нибудь в другой раз. Может заодно еще и формы для WordPress обсудим. Посмотрим.

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

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

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

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

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

Форма обратной связи служит для отправки общений владельцу сайта от посетителей.
В специальные поля вводятся специальные данные (имя, электронная почта, текст). Для отправки сообщения на е-мейл владельцу сайта, необходимо нажать на кнопку «Отправить», может быть и другой вариант.

Топ-пост этого месяца:  OpenCart – кнопки вверх и вниз для сайта

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

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

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

СОЗДАЕМ ФОРМУ ОБРАТНОЙ СВЯЗИ НА HTML

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

Вставляем в нужное место на сайте следующий код:

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

Вставили код и получилось вот так:

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

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

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

Выглядит это вот так:

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

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

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

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

Для этого перед закрывающимся тегом вставьте следующий скрипт:

Как работает этот скрипт?

  1. Производит проверку введенного e-mail.
  2. Указывает поля, с которыми будет работать.
  3. Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
  4. Обрабатывает введенную информации и инициирует отправку уведомления на почту.
  5. Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

ВСПЛЫВАЮЩАЯ ФОРМУ ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА

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

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

И придаем ей стили.

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline».

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

Для этого нужно заменить стили #inline со старых на новые.

В итоге получаем вот такую кнопку.

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

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

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

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

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

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

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

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

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

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

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

Создание формы обратной связи – HTML разметка

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

Больше на эту тему можно почитать в статье с вредными советами, которые помогут испортить ваш landing page.

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

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

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

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

Под каждым полем создаю ‘div’ для вывода уведомлений об ошибках при валидации ‘.contact-form__error’.

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

Далее, для простоты работы с js воспользуемся jQuery. Подключаем его, как обычно, перед всеми скриптами, которые зависят от него. Я, обычно, делаю это ближе к закрывающему тегу ‘body’, чтобы основной контент грузился быстрее.

Скрипт ‘mail.js’ — это файл формы, который помогает в отправке и обработке ответа сервера. О нем чуть позже. Сейчас нужно познакомить вас со структурой всех файлов, отвечающих за отправку.

Структура проекта

Здесь нас интересует папка ‘mail’. Именно тут и происходит вся магия.

Обратите внимание, что она лежит в корне сайта.

В первую очередь давайте разберем файл ‘config.php’. Тут задаются основные настройки формы.

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

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

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

  • ‘const NAMEISREQUIRED = true;’ — означает, что поле обязательно для заполнения. Если в вашем случае его можно не заполнять, то поставьте ‘false’.
  • ‘const MSGSNAMEERROR = «Поле обязательно для заполнения»;’ — это сообщение, которое будет выводится пол полем, в случае если заполнение его обязательно, но по каким-то причинам пользователь этого не сделал.

То есть если имя обязательно, но не было заполнено, появиться сообщение ‘Поле обязательно для заполнения’. Вот так:

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

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

Теперь самое главное. Если прошлые вещи можно было оставить по умолчанию, то теперь нужно настроить отправку на почту. Так как в скрипте используется SMTP протокол передачи почты, то нужно узнать несколько параметров у вашего почтового сервиса. Это:

  • Адрес сервера — ( константа HOST )
  • Логин (адрес электронной почты) — ( константа LOGIN )
  • Пароль — ( константа PASS )
  • Порт — ( константа PORT )

пароль и логин у каждого свои, а ‘HOST’ и ‘PORT’ для популярных почтовых сервисов я приведу в списке.

Сервис HOST PORT
Яндекс ssl://smtp.yandex.ru 465
Gmail smtp.gmail.com 465
Mail.ru ssl://smtp.mail.ru 465

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

С остальным все проще, объяснять по сути и нечего:

Обратите внимание, что почта, указанная в ‘const SENDER’ должна совпадать с почтой, которую указали в ‘LOGIN’.

Валидация формы перед отправкой

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

Все вам понадобится дополнительная валидация, все это реализовано в файле ‘valid.php’.

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

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

Отправка формы

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

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

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

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

Если что-то упустил или что-то непонятно — пишите в комментариях, попробую объяснить подробнее или дополнить статью.

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

Стили специально не добавлял в статью, так как статья и так очень большая. В исходнике все есть.

Переброс на страницу благодарности

Как и говорил в начале статьи данная форма может работать как без перезагрузки, так и с перебросом на страницу благодарности. Давайте реализуем это. Нам понадобится немного подправить код в файле ‘mail.js’ и сама страница благодарности. На скриншоте со структурой проекта вы видели файл ‘thank-you-page.php’ — это и есть страница благодарности, которую я буду использовать. Как вы могли заметить, он лежит в корне. У вас она может быть где угодно, главное правильно указать к ней путь.

Итак, открываем файл ‘mail.js’, находим участок кода:

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

Делать мы это будем при помощи php, поэтому убедитесь, что страница благодарности у вас сохранена именно в этом формате.

Если у вас уже страница в ‘html’, просто измените расширение. Это никак не повлияет на работоспособность.

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

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

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

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

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

Маска ввода номера телефона

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

Для маски ввода номера телефона нам понадобиться сторонний скрипт. Я предлагаю взять ‘jQuery Mask Plugin’ из статьи, ссылку на которую дал выше.

Подключаем после jQuery. Я делаю это так:

Теперь необходимо инициализировать скрипт.

После этого маска успешно появилась в поле телефона:

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

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

Область для ввода сообщения

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

Стили я уже добавил в ‘style.css’, так что теперь наша форма выглядит так:

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

Для этого перейдем в файл ‘config.php’ и укажем ‘true’ в константе, отвечающей за это текстовое поле.

Теперь наше текстовое поле стало обязательно для заполнения. В файле ‘valid.php’, по аналогии с другими полями напишем такую проверку:

Обратите внимание на ‘text’ в проверке POST запроса. Этот то самое значение, которое указывали в параметре ‘name’ у тега ‘textarea’.

В файле ‘mail.js’ сохраним ‘div’ в который будем выводить ошибку, если валидатор ее вернет для текстового поля:

А затем, ниже, напишем проверку:

По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную ‘$text’ в тело письма. Делается это в файле ‘mail.php’ в 34 строке, той самой, о которой я уже упоминал выше.

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

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

Checkbox

Настало время добавить ‘checkbox’ с соглашением на обработку персональных данных. Вы можете делать и другие чекбоксы или радиокнопки. Принцип один и тот же для всех полей.

Создаем разметку в форме, определяем в ‘config.php’ обязательно ли поле, проверяем в валидаторе и формируем ошибку если она есть и выводим при помощи mail.js ее обратно в форму. Если нет, то передаем в mail.php и отправляем.

Итак, checkbox. Добавим разметку:

Не забудьте указать ссылку на соглашение. Стили уже добавлены в исходник.

Идем в файл ‘config.php’ и делаем поле обязательным.

Далее открываем файл ‘valid.php’ и добавляем следующий код:

Теперь переходим в файл ‘mail.js’ добавляем ‘div’ в который будет выводится ошибка, если она есть, и обработчик ошибки:

Осталось в тему письма добавить переменную с текстом о принятии соглашения.

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

Добавление файла

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

Настройки в файле ‘config.php’:

Вот так теперь выглядит форма.

А вот так выглядят пришедшие данные.

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

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

Формы для сайта: юзабилити форм

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

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

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

Форма заказа обратного звонка

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

В развернутой версии достаточно двух полей «Телефон» и «Имя» и где обязательно для заполнения только первое:

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

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

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

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

Первый вариант размещения (пример с сайта Танго и Кэш):

Второй вариант размещения (пример с сайта Okna-dpa):

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

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

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

Форма обратной связи на странице контактов YouDesign:

Форма заказа услуг

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

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

  • «Вид услуги» или «Тариф» – данное поле лучше заполнять автоматически или разместить в виде текста в начале формы
  • «Имя»
  • «Телефон» – сделайте поле обязательным для заполнения
  • «Email» – чтобы продублировать информацию о заказе клиенту
  • «Комментарий» – возможно, у клиента есть уточнения

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

Форма заказа товаров

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

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

Пример размещения полей в форме для новых пользователей на Ozon:

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

Форма заказа на Wildberries, где даже выводится прошлый выбор способа доставки и оплаты (но оставляют возможность их изменить):

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

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

Топ-пост этого месяца:  CSS Resets 2020 типы сброса стилей и особенности их использования

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

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

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

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

Шикарная практика предлагать клиентам зарегистрироваться через соцсети. Так клиенту не придется придумывать пароль и в целом регистрация пройдет быстрее. Пример использования такой возможности на сайте Asos:

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

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

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

Форма авторизации

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

Пример хорошей формы авторизации от Lamoda, где предлагают два варианта входа на сайт:

Восстановление пароля привычнее всего делать по адресу почты, отправляя клиенту ссылку на форму ввода нового пароля. Генерирование автоматического «временного» пароля заставляет пользователя самому искать форму смены пароля, что неудобно и только лишние заморочки для клиента. Такого лучше не допускать.

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

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

Разместить форму следует на Главной странице, чтобы пользователь сразу увидел, что есть такая возможность. Лучше после всей основной информации, внизу страницы (пример от Lavkalavka):

Если на сайте есть блог, и в письмах, помимо товаров и услуг, вы анонсируете новые статьи, то тогда можно добавить форму на общей странице раздела, например, справа от статей, как это сделало у Vkusnosti by Mado:

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

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

Общие рекомендации по юзабилити форм

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

    Формы во всплывающих (модальных) окнах. Следует выводить их только после клика пользователем по нужной ссылке или кнопке. Никаких «всплывашек» при открытии Главной страницы или при попытке клиентов покинуть сайт. Онлайн-консультант тоже не должен «выскакивать», предлагая начать чат. Такие вещи раздражают и отталкивают пользователей. Антипример от Delicat-Servis (сейчас ребята убрали эту проблему, и форма раскрывается только после клика):

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

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

    Удобный вариант расположения подписей и подсказок (на сайте Xarakiri.ru):

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

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

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

    Использование «капчи». Не рекомендуем использовать в формах проверку на робота, так как она заставляет пользователей совершать лишние действия и может даже стать причиной ухода с сайта. Используйте незаметные для пользователей методы защиты, например, отслеживайте на сервере время заполнения формы (если оно слишком маленькое, то значит форму заполняет робот), добавляйте скрытые поля (которые сможет заполнить только робот), используйте анти-спам сервисы для проверки и т.д. На самый крайний случай можно воспользоваться проверкой ввода от Google:

  • Сохранение данных. Возможно клиент случайно закрыл форму, случилась ошибка или перезагрузка, и чтобы не пришлось вводить данные заново – сохраняйте их до отправки. Особенно этот совет касается длинных форм.
  • Кнопка сброса данных. Ни в коем случае не размещайте ее рядом с кнопкой отправки, чтобы пользователь случайно не кликнул по ней. Разместите ее в другой части формы или вовсе уберите. Пример неудачного расположения кнопок на сайте Avarit:

  • Закон о Персональных данных. Чтобы избежать штрафов за сбор персональных данных клиентов, необходимо подготовить нормативные документы и написать об этом на сайте. Подробнее о законе и подготовке сайта »
  • Итоги

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

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

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

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

    Каталог WordPress насчитывает десятки плагинов контактных форм. Но наиболее популярным среди них (более миллиона установок) является Contact Form 7 , на примере которого мы и будем рассматривать создание контактной формы на сайте.

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

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

    После установки и активации плагина в админ-панели появляется целый раздел:

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

    Итак, введя название, например, “Связаться с нами” и нажав кнопку Сохранить, Вы таким образом создадите готовую к показу контактную форму. Чтобы ее увидеть, нужно перейти Contact Form 7 > Контактные формы.

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

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

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

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

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

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

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

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

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

    Создание формы обратной связи – HTML разметка

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

    Больше на эту тему можно почитать в статье с вредными советами, которые помогут испортить ваш landing page.

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

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

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

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

    Под каждым полем создаю ‘div’ для вывода уведомлений об ошибках при валидации ‘.contact-form__error’.

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

    Далее, для простоты работы с js воспользуемся jQuery. Подключаем его, как обычно, перед всеми скриптами, которые зависят от него. Я, обычно, делаю это ближе к закрывающему тегу ‘body’, чтобы основной контент грузился быстрее.

    Скрипт ‘mail.js’ — это файл формы, который помогает в отправке и обработке ответа сервера. О нем чуть позже. Сейчас нужно познакомить вас со структурой всех файлов, отвечающих за отправку.

    Структура проекта

    Здесь нас интересует папка ‘mail’. Именно тут и происходит вся магия.

    Обратите внимание, что она лежит в корне сайта.

    В первую очередь давайте разберем файл ‘config.php’. Тут задаются основные настройки формы.

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

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

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

    • ‘const NAMEISREQUIRED = true;’ — означает, что поле обязательно для заполнения. Если в вашем случае его можно не заполнять, то поставьте ‘false’.
    • ‘const MSGSNAMEERROR = «Поле обязательно для заполнения»;’ — это сообщение, которое будет выводится пол полем, в случае если заполнение его обязательно, но по каким-то причинам пользователь этого не сделал.

    То есть если имя обязательно, но не было заполнено, появиться сообщение ‘Поле обязательно для заполнения’. Вот так:

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

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

    Теперь самое главное. Если прошлые вещи можно было оставить по умолчанию, то теперь нужно настроить отправку на почту. Так как в скрипте используется SMTP протокол передачи почты, то нужно узнать несколько параметров у вашего почтового сервиса. Это:

    • Адрес сервера — ( константа HOST )
    • Логин (адрес электронной почты) — ( константа LOGIN )
    • Пароль — ( константа PASS )
    • Порт — ( константа PORT )

    пароль и логин у каждого свои, а ‘HOST’ и ‘PORT’ для популярных почтовых сервисов я приведу в списке.

    Сервис HOST PORT
    Яндекс ssl://smtp.yandex.ru 465
    Gmail smtp.gmail.com 465
    Mail.ru ssl://smtp.mail.ru 465

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

    С остальным все проще, объяснять по сути и нечего:

    Обратите внимание, что почта, указанная в ‘const SENDER’ должна совпадать с почтой, которую указали в ‘LOGIN’.

    Валидация формы перед отправкой

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

    Все вам понадобится дополнительная валидация, все это реализовано в файле ‘valid.php’.

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

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

    Отправка формы

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

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

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

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

    Если что-то упустил или что-то непонятно — пишите в комментариях, попробую объяснить подробнее или дополнить статью.

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

    Стили специально не добавлял в статью, так как статья и так очень большая. В исходнике все есть.

    Переброс на страницу благодарности

    Как и говорил в начале статьи данная форма может работать как без перезагрузки, так и с перебросом на страницу благодарности. Давайте реализуем это. Нам понадобится немного подправить код в файле ‘mail.js’ и сама страница благодарности. На скриншоте со структурой проекта вы видели файл ‘thank-you-page.php’ — это и есть страница благодарности, которую я буду использовать. Как вы могли заметить, он лежит в корне. У вас она может быть где угодно, главное правильно указать к ней путь.

    Итак, открываем файл ‘mail.js’, находим участок кода:

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

    Делать мы это будем при помощи php, поэтому убедитесь, что страница благодарности у вас сохранена именно в этом формате.

    Если у вас уже страница в ‘html’, просто измените расширение. Это никак не повлияет на работоспособность.

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

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

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

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

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

    Маска ввода номера телефона

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

    Для маски ввода номера телефона нам понадобиться сторонний скрипт. Я предлагаю взять ‘jQuery Mask Plugin’ из статьи, ссылку на которую дал выше.

    Подключаем после jQuery. Я делаю это так:

    Теперь необходимо инициализировать скрипт.

    После этого маска успешно появилась в поле телефона:

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

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

    Область для ввода сообщения

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

    Стили я уже добавил в ‘style.css’, так что теперь наша форма выглядит так:

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

    Для этого перейдем в файл ‘config.php’ и укажем ‘true’ в константе, отвечающей за это текстовое поле.

    Теперь наше текстовое поле стало обязательно для заполнения. В файле ‘valid.php’, по аналогии с другими полями напишем такую проверку:

    Обратите внимание на ‘text’ в проверке POST запроса. Этот то самое значение, которое указывали в параметре ‘name’ у тега ‘textarea’.

    В файле ‘mail.js’ сохраним ‘div’ в который будем выводить ошибку, если валидатор ее вернет для текстового поля:

    А затем, ниже, напишем проверку:

    По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную ‘$text’ в тело письма. Делается это в файле ‘mail.php’ в 34 строке, той самой, о которой я уже упоминал выше.

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

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

    Checkbox

    Настало время добавить ‘checkbox’ с соглашением на обработку персональных данных. Вы можете делать и другие чекбоксы или радиокнопки. Принцип один и тот же для всех полей.

    Создаем разметку в форме, определяем в ‘config.php’ обязательно ли поле, проверяем в валидаторе и формируем ошибку если она есть и выводим при помощи mail.js ее обратно в форму. Если нет, то передаем в mail.php и отправляем.

    Итак, checkbox. Добавим разметку:

    Не забудьте указать ссылку на соглашение. Стили уже добавлены в исходник.

    Идем в файл ‘config.php’ и делаем поле обязательным.

    Далее открываем файл ‘valid.php’ и добавляем следующий код:

    Теперь переходим в файл ‘mail.js’ добавляем ‘div’ в который будет выводится ошибка, если она есть, и обработчик ошибки:

    Осталось в тему письма добавить переменную с текстом о принятии соглашения.

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

    Добавление файла

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

    Настройки в файле ‘config.php’:

    Вот так теперь выглядит форма.

    А вот так выглядят пришедшие данные.

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

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

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