Простейшая форма отправки данных на почту при помощи HTML и PHP. Есть пояснения к полям

Создание форм – трудное и отнимающее массу времени дело. Это явно не то занятие, за которым Вы бы хотели просидеть целый рабочий день. В основном, формы используются для реализации обратной связи на сайте и лидогенерации в Landing Page. Более сложные формы часто используют для создания каких-либо анкет, опросников и пр. В ситуации, когда требуется много полей, настройка серверных скриптов займет очень много драгоценного времени. На помощь приходят saas-сервисы. С их помощью, используя встроенный конструктор, можно создать в кратчайший срок форму любой сложности без особых усилий. Если же вы не ищете легких путей, предлагаю использовать скрипт для создания форм, который был ранее опубликован на .
Многие хотят создавать надежные и удобные веб формы быстро, и явно не в ручную. Оказывается, что создание форм с помощью специально разработанного для данного дела конструктора происходит намного легче и быстрее. Они способны создавать за несколько кликов полезные и хорошо оформленные проекты. Правда, некоторые разработчики берут плату за пользование своим ресурсом, но зачастую это стоит того. К тому же она не настолько большая, чтобы особо повлиять на Ваш бюджет. Мы решили немного сэкономить Ваше время и составили список из 13-и самых лучших онлайн конструкторов форм , наделенных огромным числом функций.

Google Forms

Wufoo

Formstack

iFormbuilder

Formbakery

FormDesk

Reformed

Typeform

FormsSmarts

MatchForm

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

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

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

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

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

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

   

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

   

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

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

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

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

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

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

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

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

   

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

   

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

   

5. Обязательные поля. Всегда помечайте * поля, обязательные для заполнения. Выше при описании форм мы указали, какие выбрать. Исключение составляют формы с один полем - и так ясно, что оно обязательное. Пример выделения обязательных полей от компании Izto:
6. Ошибки в формах. Пользователи часто ошибаются и не замечают этого, поэтому рекомендуем добавить проверки ввода для контактной информации и обязательных полей. Сообщения об ошибках лучше выводить в виде текста рядом с соответствующим полем. Они не должны исчезать или перекрывать поля ввода. Можно выделять поле красной рамкой, но сообщение тоже должно присутствовать. Пример понятных сообщений об ошибках от Aristo:
7. Подтверждение отправки данных. После того, как клиент заполнил все поля и нажал кнопку отправки, нужно вывести заметное сообщение с подтверждением, чтобы он не пытался заполнить форму повторно. Можно использовать модальные окна или, если форма и так во всплывающем окне, разместить под кнопкой отправки соответствующий текст. Также в сообщении стоит указать, когда конкретно специалисты свяжутся с клиентом или что ему делать дальше. Простого «Спасибо, данные отправлены» недостаточно. Пример подробного подтверждения отправки от компании Кабельные системы:

   

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

   

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

    

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

Итоги

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

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

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

Сегодня вы узнаете как можно очень просто сделать форму заказа звонка на своём сайте wordpress. Принцип работы формы заказа звонка: “Пользователь оставляет свои данные в форме заказа звонка (например, имя и номер телефона), жмёт на кнопку Отправить. После отправки появится уведомление – Спасибо! Ваш заказ отправлен, мы с вами свяжемся!” На вашу электронную почту придёт письмо, где будет указано имя и номер телефона человека, который заказал звонок на вашем сайте. Вам только останется перезвонить данному человеку.

Что нам понадобится? Нам понадобится плагин – и всё. Установите и активируйте плагин Contact Form 7. Установить плагин можно прямо из админ-панели, по адресу: Плагины – Добавить новый. Введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу “Contact Form 7”. Здесь у вас уже будет созданная по умолчанию контактная форма. Нажмите под названием формы на вкладку – Изменить .

В открывшемся окне просто нажмите на кнопку – “Вставить тег”. Скопируйте код с названием поля и вставьте его над шорткодом “Телефона”. В коде измените название поля на “Ваш телефон”. Сохраните сделанные изменения.

Далее, перейдите на страницу “Письмо”, чтобы настроить письмо которое будет приходить на вашу электронную почту. В поле “Кому” должен быть указан ваш email. В поле “Тема” укажите к примеру – “Заказ звонка” ! В поле “Тело письма” удалите всё и добавьте два специальных тега, вместо которых в письме будет отображаться имя и телефон. Теги можно скопировать вверху страницы, под заголовком “Письмо”. Перед тегами можно поставить обозначения Имя и Телефон. Сохраните сделанные изменения.

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

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

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

Создаем форму отправки данных в html

Первая строка будет следующей

Теперь соберем все вместе.

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

Создаем файл, принимающий данные из HTML формы

Это будет файл с именем send.php

В файле на первом этапе нужно принять данные из пост массива. Для этого создаем две переменные:

$fio = $_POST["fio"];
$email = $_POST["email"];

Перед названиями переменных в php ставиться знак $, в конце каждой строки ставиться точка с запятой. $_POST это массив в который передаются данный из формы. В форме html при этом указан метод отправки method="post". Так, приняты две переменные из формы html. Для целей защиты своего сайта нужно провести эти переменные через несколько фильтров - функций php.

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

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

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

$fio = urldecode($fio);
$email = urldecode($email);

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

$fio = trim($fio);
$email = trim($email);

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

Проверка данных, передаваемых от HTML формы в файл PHP

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

echo $fio;
echo "
";
echo $fio;

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

Отправляем полученные данные из формы HTML на почту при помощи PHP

Для отправки данных на почту нужно воспользоваться функцией mail в PHP.

mail("на какой адрес отправить", "тема письма", "Сообщение (тело письма)","From: с какого email отправляется письмо \r\n");

Например, нужно отправить данные на email владельца сайта или менеджера [email protected].

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

mail("[email protected]", "Заявка с сайта", "ФИО:".$fio.". E-mail: ".$email ,"From: [email protected] \r\n");

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

if (mail("[email protected]", "Заказ с сайта", "ФИО:".$fio.". E-mail: ".$email ,"From: [email protected] \r\n"))
{
echo "сообщение успешно отправлено";
} else {
}

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

$fio = $_POST["fio"];
$email = $_POST["email"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
//echo $fio;
//echo "
";
//echo $email;
if (mail("[email protected]", "Заявка с сайта", "ФИО:".$fio.". E-mail: ".$email ,"From: [email protected] \r\n"))
{ echo "сообщение успешно отправлено";
} else {
echo "при отправке сообщения возникли ошибки";
}?>

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

Помещаем HTML и PHP код отправки формы в один файл

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

Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.

Давайте посмотрим как изменить PHP код в файле send.php:

//проверяем, существуют ли переменные в массиве POST
if(!isset($_POST["fio"]) and !isset($_POST["email"])){
?>

Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы - "если существует, то показать форму". А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке