Как сделать форму обратной связи на сайте – Контактная форма обратной связи для сайта своими руками

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

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

Ребята — скрипт очень давно устарел. У кого-то работает, у кого то нет. А мне разбираться и уж тем более обновлять — лень. Поэтому тестируйте на своё усмотрение.

Демо

Форма обратной связи php с отправкой на почту

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

1. JQTransform – плагин который позволяет сделать нашу форму обратной связи красивой!

2. formValidator – а этот плагин проверяет форму контактов на правильность введенной информации и в случае чего выводит всплывающие подсказки!

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

Форму обратной связи для сайта можно сделать на HTML! Но работать она начнет только при помощи PHP! И никак иначе!

Это я для тех, кто ищет форму обратной связи только на HTML. Сделать сделаете, но работать она не будет!

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

Эту форму обратной связи я откопал на сайте www.tutorialzine.com ссылка ведет непосредственно на страницу оригинала, т.е. сайт автора данной формы!

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

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

1. Эта форма обратной связи заточена под буржуев, от туда же и скачена, поэтому она будет присылать вам вместо нормальных русских символов – кракозяблы. Разберитесь с кодировкой. Да и вообще все «тюлени» будут связаны с этим!

2. Скрипт валидации изначально не понимает наши букв, поэтому их там надо будет прописать!

3. Даже после этих действий если указать тему письма на русском, письмо приходит с темой – No subject (надеюсь правильно написал), это лечится если указать кодировку в файле класса PHPMailer.

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

Ну, вроде все расписал и предупредил. Поехали дальше!

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

1. Скачиваем скрипт формы обратной связи для сайта (под видео).

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

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

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

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

master-css.com

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

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

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

Учитывая то, что последние несколько лет всё ещё в тренде сайты-одностраничники (Landing Page или продающие страницы), которые чаще всего являются статическими, вопрос о способах создания контактной формы на таких сайтах вполне актуальный.

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

Вот код предлагаемой простейшей формы:

<form action="//formspree.io/[email protected]">
    <input type="text" name="name">
    <input type="email" name="_replyto">
    <input type="submit" value="Send">
</form>

 А вот так она выглядит:

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

Обратите внимание на значение поля   form action  — здесь мы видим url сервиса и email на который будут отправляться наши сообщения. Далее идут стандартные поля формы.

Приступим непосредственно к созданию рабочего примера и разберём этот процесс поэтапно.

Для начала подредактируем внешний вид формы: добавим поле для сообщения, а также добавим и русифицируем поля имён, плейсхолдеров и кнопки:

Код получившейся формы:

<form action="//formspree.io/[email protected]">			
    <p><input type="text" name="Имя" placeholder="Имя" /></p>
    <p><input type="email" name="_replyto" placeholder="Email" /></p>
    <p><textarea name="Сообщение" placeholder="Ваше сообщение" rows="7"></textarea></p>
    <input type="submit" value="Отправить" />
</form>

Теперь давайте сделаем все три поля (Имя, email и Сообщение) обязательными для заполнения. Для этого будем использовать атрибут   required 

Получившийся код:

<form action="//formspree.io/[email protected]">			
    <p><input type="text" name="Имя" required placeholder="Имя" /></p>
    <p><input type="email" name="_replyto" required placeholder="Email" /></p>
    <p><textarea name="Сообщение" required placeholder="Ваше сообщение" rows="7"></textarea></p>
    <input type="submit" value="Отправить" />
</form>

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

— во-первых, отправителя письма перекидывает на страницу стороннего ресурса;

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

Исправим эти погрешности.

Добавим скрытое поле, и в нём пропишем url страницы нашего сайта, на который произойдёт редирект после успешной отправки сообщения:

<input type="hidden" name="_next" value="/thanks.html" />

В моём примере это страница thanks.html
Прописать можно как относительный, так и абсолютный адрес страницы.

Саму страницу thanks.html оформляем в соответствии с общим дизайном сайта.

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

<input type="hidden" name="_subject" value="Сообщение с моего сайта" />

 Вот как это будет выглядеть в нашем почтовом ящике:

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

<input type="text" name="_gotcha" />

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

Итак, в итоге у нас получился следующий код:

<form method="post" action="//formspree.io/[email protected]">
    <input type="hidden" name="_next" value="/thanks.html" />
    <input type="hidden" name="_subject" value="Сообщение с моего сайта" />
    <input type="text" name="_gotcha" />				
    <p><input type="text" name="Имя" required placeholder="Имя" /></p>
    <p><input type="email" name="email" required placeholder="Email" /></p>
    <p><textarea name="Сообщение" required placeholder="Ваше сообщение" rows="7"></textarea></p>
    <input type="submit" value="Отправить" />
</form>

Настало время проверить нашу форму на работоспособность.

 Перед этим, в поле form action не забудьте заменить [email protected] на свой email. 

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

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

Всё! Адрес электронной почты подтверждён и следующее сообщение, отправленное из нашей формы обратной связи, попадёт уже непосредственно в наш ящик:

И напоследок, ещё несколько важных нюансов:

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

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

Естественно, с помощью многочисленных шаблонов можно придать ей стильный, модный, молодёжный вид. Например, такой:

Всё. Наша форма обратной связи готова.

sergeyyarmoluk.ru

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

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

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

Шаг 1

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

<!DOCTYPE html> <head> <!— Latest compiled and minified CSS —> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css»> <!— Optional theme —> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css»> <!— Latest compiled and minified JavaScript —> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js»></script> </head> <body> <div> <div></div> </div> </body> </html>

Шаг 2

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

<form> <div> <label for=»name»>Имя</label> <div> <input type=»text» placeholder=»Имя»/> </div> </div> <div> <label for=»city»>Город</label> <div> <input type=»text» placeholder=»Город»/> </div> </div> <div> <label for=»email»>Email</label> <div> <input type=»email» placeholder=»Email»/> </div> </div> <div> <div> <button type=»submit»>Заказать!</button> </div> </div> </form>

Шаг 3

Подключаем обработчик и настраиваем форму. Для подключения нужно в action формы прописать //formspree.io/[email protected] и добавить метод обработки POST

<form action=»//formspree.io/[email protected]» method=»POST»>

Шаг 4

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

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

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

_replyto или email

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

<input name=»_replyto» type=»email» placeholder=»Email» />

_next

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

<input name=»_next» type=»hidden» value=»//nalavochke.su/thanks.html» />

_subject

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

<input name=»_subject» type=»hidden» value=»Новый заказ!» />

_cc

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

<input name=»_cc» type=»hidden» value=»[email protected]» />

_gotcha

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

<input name=»_gotcha» type=»text» />

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

<div> <div> <div></div> <div> <h2>Форма для заказа</h2> <form action=»//formspree.io/[email protected]» method=»POST»> <div><label for=»name»>Имя</label> <div><input type=»text» placeholder=»Имя» /></div> </div> <div><label for=»city»>Город</label> <div><input type=»text» placeholder=»Город» /></div> </div> <div><label for=»email»>Email</label> <div><input name=»_replyto» type=»email» placeholder=»Email» /> <input name=»_next» type=»hidden» value=»//nalavochke.su/thanks.html» /> <input name=»_subject» type=»hidden» value=»Новый заказ!» /> <input name=»_cc» type=»hidden» value=»[email protected]» /> <input name=»_gotcha» type=»text» /></div> </div> <div> <div><button type=»submit»>Заказать!</button></div> </div> </form> </div> <div></div> </div> </div>

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

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

webupblog.ru

Простая форма обратной связи своими руками.

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

Первым делом разберемся с файловой структурой, у нас будет главная страница index.html, папка со стилями — css, в которой будет один файл стилей template.css и файл PHP — send.php.

Первым делом создадим разметку нашей формы в файле index.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
	<form action="send.php" method="get">
		<input type="text" placeholder="Введите сюда e-mail" name="e-mail"><br>
		<input type="text" placeholder="Введите сюда ваше имя" name="name"><br>
		<input type="submit" value="Нажмите, чтобы отправить письмо">
	</form>
</body>
</html>

Ключевыми тут являются атрибуты action и method у <form>, первый отвечает за путь до PHP файла обработчика отправления письма, а второй за тип передачи в этот обработчик данных.

• В нашем случае файл-обработчик send.php, который лежит в корневом каталоге, рядом с index.html, потому и путь такой.
• И мы выбрали метод GET, так же можно выбирать метод POST, просто получать данные потом в PHP файле вы будете по другому.
• Для <input> важен атрибут name, при помощи его значения потом мы будем доставать значения в PHP.

Добавим немного стилей, чтобы форма была по центру страницы:

form {
	text-align:center;
}
form input {
	margin:20px 0;
}

Теперь остается только написать обработчик send.php, который будет отправлять сообщение на почту.

Немного о логике происходящего. Пользователь, попав на страницу index.html, заполняет поля формы и нажимает на кнопку Отправить (В нашем случае она будет с текстом «Нажмите, чтобы отправить письмо»), после чего страница переходи к файлу send.php, который будет выполнять, написанный нами скрипт, по его результатам выводить сообщение об успешной/не успешной отправке.

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

Вот сам скрипт, с комментариями строк:

<?php
	//Получаем данные из глобальной переменной $_GET, так как мы передаем данные методом GET
	$name = $_GET['name']; // Вытаскиваем имя в переменную
	$email = $_GET['e-mail']; // Вытаскиваем почту в переменную
	$message = "Поздравляем, $name, отправка сообщений на почту $email работает"; // Формируем сообщение, отправляемое на почту
	$to = $email; // Задаем получателя письма
	$from = "noreply-site.web.cofp.ru"; // От кого пришло письмо
	$subject = "Письмо с примера простой формы сайта web.cofp.ru"; // Задаем тему письма
	$headers = "From: $from\r\nReply-To: $to\r\nContent-type: text/html; charset=utf-8\r\n"; // Формируем заголовок письма (при неправильном формировании может ломаться кодировка и т.д.)
	if (mail($to, $subject, $message, $headers)) { // При помощи функции mail, отправляем сообщение, проверяя отправилось оно или нет
		echo "<p>Сообщение успешно отправлено</p>"; // Отправка успешна
	}
	else {
		echo "<p>Что-то пошло не так, как планировалось</p>"; // Письмо не отправилось
	}
?>

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

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

Результат работы примера можно увидеть на демо-странице:

Скачать исходники примера ниже:

www.web.cofp.ru