Форма обратной связи на базе HTML с отправкой данных на почту

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

Привет) Рад приветствовать вас дорогие читатели, сегодня мы научимся создавать простую форму обратной связи для вашего сайта. Html разметку формы мы напишем с помощью bootstrap 3, а логику формы будем обрабатывать с помощью сервиса formspree.io

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

Шаг 1

Создаем обычную html и страницу подключаем bootstrap. Весь исходный код вы можете скачать по ссылке в конце поста.

Шаг 2

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

Шаг 3

Подключаем обработчик и настраиваем форму. Для подключения нужно в action формы прописать //formspree.io/youremail@gmail.com и добавить метод обработки POST

Шаг 4

Активируем и подтверждаем свою почту куда будут приходить письма. Для этого заполните и отправьте форму. Вас перекинет на страницу
Screenshot_2

Переходим по ссылке на ваш почтовый сервис, подтверждаем адрес. После этого все будет работать отлично. Форма обратной связи для вашего сайта готова к использованию.
Screenshot_3
Хотелось бы поговорить о некоторых настройках формы. Все элементы input могут иметь специальные значения атрибута name которые настраивают функциональность, значения начинаются с нижнего подчеркивания name = «_value»

_replyto или email

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

_next

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

_subject

С помощью этого значения вы можете указать тему письма.

_cc

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

_gotcha

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

Полный код нашей формы.

Так выглядит сообщение на почте.
Screenshot_4

Screenshot_5

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

comments powered by HyperComments
Видео в модальном окне при помощи fancybox
2015-12-06 23:09:08
[…] читатели, недавно я опубликовал пост на сайте на тему форма обратной связи, в этой статье я разместил свое первое видео. В тексте […]