Отправка данных формы
Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега <form> , как показано в примере 1.
Пример 1. Отправка данных формы
HTML5 IE Cr Op Sa Fx
В этом примере данные формы, обозначенные атрибутом name ( login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.
Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге <form> используется атрибут method , а его значениями выступают ключевые слова get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.
| GET | POST | |
|---|---|---|
| Ограничение на объём | 4 Кб | Ограничения задаются сервером. |
| Передаваемые данные | Видны сразу всем. | Видны только при просмотре через расширения браузера или другими методами. |
| Кэширование | Страницы с разными запросами считаются различными, их можно кэшировать как отдельные документы. | Страница всегда одна. |
| Закладки | Страницу с запросом можно добавить в закладки браузера и обратиться к ней позже. | Страницы с разными запросами имеют один адрес, запрос повторить нельзя. |
Какой метод используется легко определить по адресной строке браузера. Если в ней появился вопросительный знак и адрес стал похож на этот, то это точно GET.
Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами ?q=node/add и ?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.
Ниже перечислены типовые области применения этих методов на сайтах.
Передача небольших текстовых данных на сервер; поиск по сайту.
Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.
Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.
Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега <form> . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега <iframe> (пример 2).
Пример 2. Открытие формы во фрейме
HTML5 IE Cr Op Sa Fx
В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .
Элементы формы традиционно располагаются внутри тега <form> , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).
Пример 3. Связывание формы с полями
HTML5 IE Cr Op Sa Fx
В этом примере тег <form> однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form="auth" . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.
Хотя параметры передачи формы традиционно указываются в теге <form> , их можно перенести и в кнопки отправки формы ( <button> и <input type="submit"> ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.
Пример 4. Отправка формы
HTML5 IE Cr Op Sa Fx
Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, Internet Explorer и Safari.
Простейшая форма отправки данных на почту при помощи HTML и PHP
Одной из самых востребованных функций на сайте является форма заявки или заказа, данные из которой отправляются на почту владельцу сайта. Как правило такие формы являются простыми и состоят из двух трех полей для ввода данных. Как же создать такую форму заказа? Здесь потребуется использование языка разметки HTML и языка программирования PHP.
Язык разметки HTML сам по себе несложен, нужно всего лишь разобраться в том как и где ставить те или иные теги. С языком программирования PHP все немного сложнее.
Для программиста создать такую форму не составит труда, а вот HTML верстальщику может показаться сложным некоторые действия.
Создаем форму отправки данных в html
На этом этапе нужно создать файл form.php, в него добавить html код формы. Подробности о каждом элементе формы читайте в статье Как сделать форму в HTML для сайта.
Первая строка будет следующей
<form action=»send.php» method=»post»>
Это очень важный элемент формы. В нем мы указываем каким способом будут передаваться данные и какому файлу. В данном случае все передачется методом POST файлу send.php. Программа в этом файле соответственно должна принять данные, они будут содержаться в post массиве, и отправить их на указанный email адрес.
Вернемся к форме. Вторая строка будет содержать поле для ввода ФИО. Имеет следующий код:
<input type=»text» name=»fio» placeholder=»Укажите ФИО»>
Тип формы text, то есть пользователь сможет ввести или скопировать сюда текст с клавиатуры. Под параметром name содержится название формы. В данном случае это fio, именно под таким именем будет передаваться все, что пользователь введен в данноу поле. Параметр placeholder указывает на то, что будет записано в этом поле в виде пояснения.
<input type=»text» name=»email» placeholder=»Укажите e-mail»>
Здесь практически все то же самое, но имя для поля указано email, а пояснении указано, чтобы пользователь в эту форму ввел свой адресс электронной почты.
Следующей строкой будет кнопка «отправить»:
<input type=»submit» value=»Отправить»>
И последней строкой в форме будет тэг </form>
Теперь соберем все вместе.
<form action=»send.php» method=»post»>
<input type=»text» name=»fio» placeholder=»Укажите ФИО»>
<input type=»text» name=»email» placeholder=»Укажите e-mail»>
<input type=»submit» value=»Отправить»>
</form>
Теперь сделаем так, чтобы поля в форме стали обязательными для заполнения. Имеем следующий код:
<form action=»send.php» method=»post»>
<input type=»text» name=»fio» placeholder=»Укажите ФИО» required>
<input type=»text» name=»email» placeholder=»Укажите e-mail» required>
<input type=»submit» value=»Отправить»>
</form>
Создаем файл, принимающий данные из HTML формы
Это будет файл с именем send.php
В файле на первом этапе нужно принять данные из пост массива. Для этого создаем две переменные:
$fio = $_POST[‘fio’];
$email = $_POST[’email’];
Перед названиями переменных в php ставится знак $, в конце каждой строки ставиться точка с запятой. $_POST это массив в который передаются данный из формы. В форме html при этом указан метод отправки method=»post». Так, приняты две переменные из формы html. Для целей защиты своего сайта нужно провести эти переменные через несколько фильтров — функций php.
Первая функция преобразует все символы, которые пользователь попытается добавить в форму:
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
При этом новые переменные в php не создаются, а используются уже имеющиеся. Что сделает фильтр, он преобразует символ «<» в ‘<’. Также он поступить с другими символами, встречающимися в html коде.
Вторая функция декодирует url, если пользователь попытается его добавить в форму.
$fio = urldecode($fio);
$email = urldecode($email);
Третей функцией мы удалим пробелы с начала и конца строки, если таковые имеются:
$fio = trim($fio);
$email = trim($email);
Существуют и другие функции, позволяющие отфильтровать переменные php. Их использование зависит от того , насколько вы опасаетесь того, что злоумышленник попытается добавить программный код в данную форму отправки данных на почту html.
Проверка данных, передаваемых от HTML формы в файл PHP
Для того, чтобы проверить, работает ли этот код, передаются ли данные можно просто их вывести на экран при помощи функции echo:
Вторая строка здесь нужна для того, чтобы разделить вывод переменных php на разные строки.
Отправляем полученные данные из формы HTML на почту при помощи PHP
Для отправки данных на почту нужно воспользоваться функцией mail в PHP.
mail(«на какой адрес отправить», «тема письма», «Сообщение (тело письма)»,»From: с какого email отправляется письмо \r\n»);
Например, нужно отправить данные на email владельца сайта или менеджера example@mail.ru.
Тема письма должна быть понятной, а сообщение письма должно содержать то, что указал пользователь в HTML форме.
mail(«example@mail.ru», «Заявка с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»);
Необходимо добавить условие, которе проверит отправилась ли форма при помощи PHP на указанные адрес электронной почты.
if (mail(«example@mail.ru», «Заказ с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
echo «сообщение успешно отправлено»;
> else echo «при отправке сообщения возникли ошибки»;
>
Таким образом программный код файла send.php, который отправит данные HTML формы на почту будет выглядеть следующим образом:
<?php
$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 «<br>»;
//echo $email;
if (mail(«example@mail.ru», «Заявка с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
> else echo «при отправке сообщения возникли ошибки»;
>?>
Три строки для проверки, передаются ли данные в файл закомментированы. При необходимости их можно удалить, так как они нужны были только для отладки.
Помещаем HTML и PHP код отправки формы в один файл
В комментариях к этой статье многие задают вопрос о том, как сделать, чтобы и HTML форма и PHP код отправки данных на почту находились в одном файле, а не двух.
Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.
Давайте посмотрим как изменить PHP код в файле send.php:
<html>
<head>
<title>Форма заявки с сайта</title>
</head>
<body>
<?php
//проверяем, существуют ли переменные в массиве POST
if(!isset($_POST[‘fio’]) and !isset($_POST[’email’])) ?> <form action=»send.php» method=»post»>
<input type=»text» name=»fio» placeholder=»Укажите ФИО» required>
<input type=»text» name=»email» placeholder=»Укажите e-mail» required>
<input type=»submit» value=»Отправить»>
</form> <?php
> else //показываем форму
$fio = $_POST[‘fio’];
$email = $_POST[’email’];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
if (mail(«example@mail.ru», «Заявка с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»)) echo «Сообщение успешно отправлено»;
> else echo «При отправке сообщения возникли ошибки»;
>
>
?>
</body>
</html>
Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы — «если существует, то показать форму». А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке <form action=»send.php» method=»post»>. Форма должна ссылаться на эту же страницу, например index.php. В код я добавил заголовок страницы.
Частые ошибки, возникающие при отправке PHP формы с сайта
Первая, наверное самая популярная ошибка, это когда вы видите пустую белую страницу без сообщений. Это означает, что вы допустили ошибку в коде страницы. Вам нужно включить отображение всех ошибок в PHP и тогда вы увидите, где допущена ошибка. Добавьте в код:
Файл send.php должен запускаться только на сервере, иначе код просто не будет работать. Желательно, чтобы это был не локальный сервер, так как он не всегда настроен на отправку данных на внешний почтовый сервер. Если вы запустите код не на сервере, то вам отобразиться код PHP прямо на странице.
Таким образом, для корректной работы я рекомендую поместить файл send.php на хостинг сайта. Там, как правило, все уже настроено.
Еще одна частая ошибка, когда появляется оповещение «Сообщение успешно отправлено», а письмо не приходит на почту. В этом случае нужно внимательно проверить строку:
if (mail(«example@mail.ru», «Заказ с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
Вместо example@mail.ru должен быть email адрес на который нужно отправить письмо, а вместо example2@mail.ru должен быть существующий email данного сайта. Например для сайта webriz.ru это будет info@webriz.ru . Только в этом случае письмо с данными из формы будет отправлено.
Читайте также статью про немного модифицированный вариант данной формы отправки.
как сделать отправку формы на почту html
Итак, для начала создадим форму на HTML , в поля которой посетитель будет вводить данные. Для примера будем использовать 3 поля: Имя, E — mail и Сообщение.
Содержимое файла » index.html «:
В этой простейшей HTML форме я использую метод передачи POST и передаю 3 параметра ( name , email , message ) PHP скрипту ( post . php ) лежащему в корне сайта после нажатия на кнопку «Отправить».
Полей для ввода может быть сколько угодно и с различными атрибутами. Названия параметров ( name , email , text ) используйте, какие вам удобно. Главное чтобы эти параметры были правильно обработаны скриптом ( post . php ). Вы можете использовать выпадающие списки (selec t ), флажки для выбора (checkbox), переключатели (radio) и т.д. Здесь, к примеру, для ввода сообщения я использовал текстовое поле textarea с шириной в 45 символов и с высотой в 10 строк.
Теперь создадим файл post . php . Название и путь к файлу указываются в form action = » post . php » HTML формы.
Содержимое файла » post.php «:
// Принимаем данные с формы
// Проверяем валидность e-mail
echo » Вернитесь назад. Вы указали неверные данные!»;
Форма отправки на электронную почту — HTML, CSS
Здравствуйте. Как сделать форму отправки сообщений с сайта на ел.почту администратора. С несколькими полями??
Стилизация кнопки отправки формы — HTML, CSS
Вот есть 2 кнопки, одна пересылает по ссылке и имеет класс CSS(вроде так оно называется), в общем у неё картинка вместо кнопки, и она.
Где вы тестируете работоспособность формы отправляемой на почту? — HTML, CSS
Подскажите, где вы тестируете формы, как правило с лендингов на работоспособность, какойнибудь бесплатный хостинг, который через месяц.
Закрытие окна после отправки формы — HTML, CSS
Есть страница с данными из БД, на этой же страничка есть кнопка добавить, при нажатию на которую открывается окно через window.open(), в.
Формы отправки смс-сообщений и погоды — HTML, CSS
Можно ли как-то на сайт вставить формы для отправки бесплатных сообщений? В сети видела только при помощи оплаты через счет мобильного.
Подключить php для формы отправки сообщений — HTML, CSS
привет!, помоги с подключением формы обратной связи. проблема в том что он одностраничный. а опыта с такими сайтами у меня пока.
Дата публикации: 2016-09-09
От автора: приветствую вас, друзья. Данная статья будет продолжением статьи, в которой мы реализовывали отправку формы на email с помощью PHP функции mail(). В этой статье мы узнаем, как сделать форму отправки сообщений с сайта через SMTP популярных почтовых сервисов. Приступим?.
Исходные файлы текущей статьи вы можете скачать по ссылке.
Вы можете задать вполне логичный вопрос: а чем не устраивает функция mail(), которая замечательно работает на локальном сервере? Все дело в том, что в настоящее время работоспособность данной функции на реальном хостинге стоит под большим вопросом. Порой хостер просто отключает отправку писем со своего сервера, часто письма просто не доходят до адресата и попадают в спам.
Именно по этим причинам и рекомендуется использовать для отправки писем сторонние SMTP сторонних популярных сервисов: gmail.com, yandex.ru, mail.ru и т.п. Ну а отправить письмо нам помогут различные библиотеки, например замечательная библиотека PHPMailer. Эта библиотека достаточно проста в использовании и универсальна. PHPMailer позволяет отправлять не только простые письма, но и письма в формате HTML, письма с вложениями, в общем, библиотека умеет все, что необходимо для отправки сообщений с сайта.
Начнем со скачивания архива с библиотекой и подключения его к обработчику формы, у нас это файл mail.php:
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Теперь нам необходимо создать объект подключаемого класса библиотеки и произвести его необходимую настройку. Здесь нам потребуется реальный почтовый ящик, который будет использован для отправки писем. Я использую тестовый почтовый ящик, зарегистрированный в mail.ru. По запросу в Гугле mail.ru smtp можно найти необходимые настройки, которые мы используем. Точно таким же образом мы можем найти настройки smtp других почтовых сервисов.
Итоговый код обработчика будет выглядеть следующим образом:
Здесь я не буду подробно останавливаться на настройках, которые мы использовали, для этого вы можете посмотреть наш видеоурок Библиотека PHPMailer. Отправка почты через SMTP. Проверим, работает ли отправка писем. В форме мы видим сообщение о том, что письмо было успешно отправлено:
Зайдем в почтовый ящик и убедимся в этом:
Как видим, письмо успешно доставлено адресату, все работает. Ну а на этом текущую статью мы завершаем. Дополнительно по работе с формами вы можете посмотреть этот урок. Удачи!
Проверка формы без перезагрузки с помощью JavaScript
Прямо сейчас посмотрите курс по организации динамической работы с формами!
Чтобы организовать передачу данных на сервер с помощью формы, потребуется реализовать HTML форму, в которую посетители сайта будут вводить свою информацию и PHP код, назначение которого в принятии и обработке полученных данных на сервере.
HTML форма отправки данных
Форма на странице формируется тегами , внутри которых помещаются теги полей для ввода текстовой информации, теги специальных компонентов (например, поле со списком), теги для поля выбора и загрузки файла.
* Для HTML5 так же существует возможность размещать теги полей формы не внутри тегов формы, а в любом месте на странице. При этом для каждого такого поля нужно указывать атрибут «form», чтобы определить с какой формой отправки он должен взаимодействовать.
Итак, простейшая форма отправки может содержать следующий код:
Элементы формы и их параметры:
action=»myform.php» – атрибут «action» определяет, какой php-файл будет обрабатывать отправляемые данные. В этом примере, данные будут отправлены в файл «myform.php», находящийся в той же директории что и страница с формой. Если этот атрибут не указать явно, данные формы будут отправлены по адресу страницы самой формы.
method=»post» – параметр method определяет метод передачи данных POST или GET. Более подробно об этом в статье «Отличия методов POST или GET». Если не указывать атрибут явно, по умолчанию будет использоваться метод GET.
Текст «Значение А:» и «Значение Б:» добавлен только с целью оформления и понятности формы для пользователя. Добавлять это для передачи данных не обязательно, но для того, чтобы пользователю стало понятно, что вводить, стоит указывать.
Теги используются для формирования различных управляющих элементов формы.
type=»text» – атрибут «type» определяет вид поля. В зависимости от того, какой тип указан, меняется и внешний вид элемента, и его назначение. Значение атрибута «text» указывает, что в браузере элемент будет отображаться однострочным текстовым полем, куда пользователь сможет ввести свою строку.
name=»data1″ – атрибут «name», указывает имя, вернее индекс данных в массиве, полученных сервером. Это обязательный параметр, по которому в php-обработчике можно будет затем получить доступ переданному значению. Имя может быть выбрано произвольно, однако, удобнее когда это значение имеет какой-то понятный смысл.
type=»submit» – тег с таким значением параметра «type» будет отображаться на странице как кнопка. На самом деле на форме можно обойтись и без кнопки. Если, например, в форме есть текстовые поля, то отправку можно осуществить, просто нажав «Ввод» на клавиатуре. Но наличие кнопки делает форму более понятной.
value=»Отправить» – в данном случае (для type=»submit») определяет только надпись на кнопке. Для type=»text», например, это будет текст, который будет выведен в текстовом поле.
В итоге, на странице этот код будет выглядеть приблизительно так:
По нажатию на кнопку, будет выполнена отправка данных на указанную страницу, и если она существует и корректно работает, данные будут обработаны.
Обработка отправленных HTML формой данных в PHP
Отправленные описанным способом данные, помещаются в суперглобальные массивы $_POST, $_GET и $_REQUEST. $_POST или $_GET будут содержать данные в зависимости от того, каким методом осуществлялась отправка. $_REQUEST содержит отправленные данные любым из указанных методов.
$_POST, $_GET и $_REQUEST – это ассоциативные массивы, поля-индексы которых совпадают с атрибутами «name» тегов . Соответственно, для работы с данными в файле myform.php можно присвоить переменным значения элементов такого массива указав в качестве индекса имя поля:
// при любом методе
$a = $_REQUEST[ ‘data1’ ];
$b = $_REQUEST[ ‘data2’ ];
Проверка заполнения полей формы
Иногда при получении данных нужно проверить, не отправил ли пользователь пустую форму. Для этого можно использовать функцию empty.
if ( empty ($_REQUEST[ ‘data1’ ])) else
Обычно этого решения достаточно. Если нужно вводить текст, то будет понятно, введен он или нет. Однако, если пользователь намеренно для вычислений введет ноль, то функция empty покажет, что значения нет. Поэтому для таких ситуаций лучше использовать функцию isset. Она будет явно проверять, заданно ли значение или нет.
if ( isset ($_REQUEST[ ‘data1’ ])) else
В этой статье вы узнаете, как создать всплывающую форму обратной связи для обычного сайта на html ина движке wordpress. В первую очередь такие формы будут необходимы интернет-магазинам, лендингам, да и простым сайтам-визиткам, так как это реально удобно для пользователя.
К примеру, посетитель зашел на ваш сайт, просмотрел необходимую ему информацию, вроде бы уже готов заказать ваш товар или услугу, но вот звонить в другой город и тратить большие деньги ему совсем не хочется. Вот в такие моменты и приходит на помощь всплывающая форма обратной связи.
Для чего нужна форма обратной связи на сайте?
Форма обратной связи служит для отправки общений владельцу сайта от посетителей.
В специальные поля вводятся специальные данные (имя, электронная почта, текст). Для отправки сообщения на е-мейл владельцу сайта, необходимо нажать на кнопку «Отправить», может быть и другой вариант.
Ещё один плюс в пользу формы обратной связи – возможность сохранить свой е-мейл в тайне от спамеров.
В современном мире спам, это настоящий бич, который заставляет прятать е-мейл от посторонних глаз за семью печатями. Спам боты круглосуточно рыскают по сайтам в поисках новых электронных адресов для отправки на них спама. Если он найдёт е-мейл владельца сайта, то на этот адрес начнут сыпаться кучи нежелательной корреспонденции. В скором времени, на нём будет невозможно найти действительно нужную почту.
В форме обратной связи такой проблемы нет. Для отправки сообщения нужно заполнить специальное поле для отсеивания ботов. Это позволяет полностью избавиться от нежелательных писем.
Для создания формы обратной связи можете воспользоваться инструкцией и исходным кодом по созданию формы обартной связи или использовать готовый платный скрипт наподобие JivoSite, CallBackKiller и прочие.
Такие формы используются в качестве виджета обратного звонка с сайта, когда клиент хочет что бы ему позвонили.
СОЗДАЕМ ФОРМУ ОБРАТНОЙ СВЯЗИ НА HTML
Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас с использованием html, css и php кода.
Вставляем в нужное место на сайте следующий код:
По желанию вы можете добавить дополнительные поля для ввода информации, либо убрать уже имеющиеся. Настоятельно не рекомендую вам использовать в подобных формах капчу, либо другие защиты от ботов, что затруднит пользователю заполнение формы.
Вставили код и получилось вот так:
Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили (готовая html верстка формы обратной связи):
Так уже гораздо лучше. В любом случае, форму вам надо будет подстраивать под общий дизайн сайта, поэтому у вас она в конечном итоге будет отличаться от моей.
Далее мы можем подключить маску для поля ввода номера телефона, которая визуально облегчит ввод для пользователя.
Выглядит это вот так:
Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.
Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.
Подключаем скрипт перед закрывающимся тегом . Не забудьте поменять путь к файлу на свой.
Хорошо, форма обратной связи создана, стили настроены, теперь нужно повестить на нее обработчик, чтобы уведомления приходили вам на почту.
Для этого перед закрывающимся тегом вставьте следующий скрипт:
Как работает этот скрипт?
- Производит проверку введенного e-mail.
- Указывает поля, с которыми будет работать.
- Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
- Обрабатывает введенную информации и инициирует отправку уведомления на почту.
- Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.
Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.
Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.
ВСПЛЫВАЮЩАЯ ФОРМУ ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА
Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней. Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.
Добавьте эти строчки перед закрывающимся тегом body, только поменяйте путь к файлам на свой. Далее создаем кнопку, при клике на которую будет вызываться форма.
И придаем ей стили.
Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline».
Без этого всплывающая форма не будет открываться на сайте. После чего прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне.
Для этого нужно заменить стили #inline со старых на новые.
В итоге получаем вот такую кнопку.
При нажатии на которую открывается всплывающее окно с обратной связью.
Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.
Не забывайте, что для того, чтобы форма работала, в конце сайта нужно будет добавить обработчик, который опубликован выше, и загрузить в корень сайта файл sendmessage.php.
Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:
Скачать исходные файлы форм обратной связи.
Ключевые слова статьи: добавить форму обратной связи на сайт, верстка формы обратной связи, форма обратной связи html, форма обратной связи php, форма обратной связи почта, добавить форму обратной связи, css форма обратной связи, форма обратный звонок, виджет обратный звонок.
Форма отправки данных на почту с сайта HTML
Это все станет происходить по изменению размер окна, когда начнет составлять 480 пикселей или меньше. Сама основа конструкций представлена на 2 колонки, где основные элементы управления предназначены для того, чтобы сделать форму более привлекательной для ее заполнение. Разбивая текстовые поля ввода на несколько столбцов элемента, а это будет 2 столбца, что тем самым получив менее по форме значение для завершения отправки.
Так выглядит эта структура:
Приступаем к установке:
#domorenvisong width: 100%;
font-size: 16px;
>
#domorenvisong input, #domorenvisong textarea width: 98%;
border-radius: 5px;
border: 1px solid gray;
font: normal 1.5em auto;
padding: 0.47em;
box-shadow: 0 0 10px gray inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
>
#domorenvisong textarea resize:vertical;
height: 200px;
>
#domorenvisong input:focus, #domorenvisong textarea:focus box-shadow: 0 0 10px green inset;
>
#domorenvisong input[type=»radio»], #domorenvisong input[type=»checkbox»] padding: 0;
width: auto;
height: auto;
border-radius: 0;
>
#domorenvisong select width: 80%;
font-size: 1.5em;
border: 2px solid #eee;
>
#domorenvisong .desiganelarges width: 49%;
float: left;
>
#domorenvisong .desiganelarges:first-of-type margin-right: 2%;
>
#domorenvisong .desiganelarges label, #domorenvisong .desiganelarges fieldset font: bold 0.8em Verdana;
text-transform: uppercase;
display: block;
margin-top: 2em;
margin-bottom: 3px;
>
#domorenvisong fieldset width: 98%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
>
#domorenvisong .desiganelarges label:first-child, #domorenvisong .desiganelarges fieldset:first-child margin-top: 0;
>
#domorenvisong fieldset ul list-type: none;
margin: 0;
padding: 0;
>
#domorenvisong fieldset ul li display: inline-block;
margin-bottom: 5px;
margin-right: 1em;
>
#domorenvisong div.buttons clear: both;
text-align: center;
>
#domorenvisong input.button margin-top: 1.5EM;
width: 50%;
box-shadow: 0 0 10px gray;
text-transform: uppercase;
cursor: pointer;
min-width: 97px;
max-width: 595px;
color: white;
font-weight: bold;
letter-spacing: 7px;
text-shadow: 0 -2px 1px #8a8a8a;
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a90329′, endColorstr=’#6d0019′,GradientType=0 );
>
#domorenvisong input.button:active text-shadow: 0 0 1px #8a8a8a;
background: rgb(109,0,25);
background: -moz-linear-gradient(top, rgba(109,0,25,1) 0%, rgba(143,2,34,1) 56%, rgba(169,3,41,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,0,25,1)), color-stop(56%,rgba(143,2,34,1)), color-stop(100%,rgba(169,3,41,1)));
background: -webkit-linear-gradient(top, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -o-linear-gradient(top, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -ms-linear-gradient(top, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: linear-gradient(to bottom, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#6d0019′, endColorstr=’#a90329′,GradientType=0 );
>
@media screen and (max-width: 480px)
#domorenvisong font-size: 14px;
>
#domorenvisong .desiganelarges width: 100%;
float: none;
>
#domorenvisong .desiganelarges:first-of-type margin-right: 0;
>
#domorenvisong .desiganelarges:nth-of-type(2) padding-top: 2em;
>
#domorenvisong select width: 100%;
>
>
Здесь вам остается переписать на ваши значение, которые требуется заполнить при отправки.