Сайт о телевидении

• Шаг 5 . По выше приведённому примеру добавьте остальные нужные Вам поля, каждый раз начиная с тега

  . Для установки поля с текстовым сообщением используйте тэг . Параметры «cols » и «rows » отвечают за ширину и высоту текстового поля. Можете задать параметры, какие Вам больше нравятся. У Вас должно получиться примерно так, как показано на скриншоте ниже.

• Шаг 6 . Чтобы защитить себя от ботов, которых сегодня в интернете довольно много, создайте ещё одну строку с помощью тэга . За счёт параметра «style=»display:none» » данное поле не будет видно простым смертным, однако ботами будет заполняться автоматически. Таким образом, Вы всегда сможете отличить живого человека от программы.

• Шаг 7 . Завершающим этапом разметки станет создание кнопки отправки. Для этого используется тэг . Создайте новый блок

  и внутри него впишите код кнопки со следующими параметрами:

  Отправить сообщение . Получиться должен похожий результат, как показано на скриншоте.

Работа с каскадными таблицами стилей (CSS)

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

Подключить стили CSS к HTML можно двумя способами:

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

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

Подключение файла PHP и его настройка

Как уже было сказано ранее, скрипт PHP отвечает за исполнение формы обратной связи. Однако для того, чтобы более или менее понять принцип работы языка PHP , необходимо прочитать большой объём литературы и провести приличное количество часов за практикой. Поэтому, как и в случае с CSS , мы предоставим Вам уже готовый файл с php-скриптом, который останется только прикрепить к документу с формой.

В отличие от файла style.css , файл с php-скриптом прикрепляется в свойствах самой формы. Начнём по порядку:

• Шаг 1 . Откройте ранее написанный код и найдите строку с открытым тегом формы. Добавьте к нему свойства «action=»contact-form.php» » и «method=»post» ». Смотрите пример на скриншоте.

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

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

• Шаг 4 . Далее необходимо добавить ещё две переменных с адресом вашей электронной почты и темой письма, которая будет отображаться на вашем ящике. В строке с переменной «$address » укажите E-mail, а в строке «$sub » тему письма как показано на скриншоте.

• Шаг 5 . В строке с переменной «$mes » настраивается формат письма, которое Вы получите на почту. Вы можете переписать его без изменений или отредактировать по собственному вкусу.

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

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

Подборка красивых дизайнерских форм обратной связи на HTML и CSS для разных целей

• Опираясь на выше приведённые инструкции, Вы без труда сможете «нарисовать» форму обратной связи под свой собственный вкус. Однако, если у Вас нет времени или желания самостоятельно создавать форму с нуля, Вы можете найти в интернете уже готовые дизайнерские формы и обладая базовыми навыками HTML отредактировать их под себя.

• Немного поискав, мы нашли для Вас подборку из 35 красивых всплывающих дизайнерских форм обратной связи, которые написаны на HTML и CSS . Данные формы подходят для таких движков, как WordPress и Joomla , имеют простую и лёгкую настройку из панели управления, а также прекрасно подходят для сайтов без движка.

ВИДЕО: Всплывающая форма обратной связи для сайта WordPress

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

На сегодняшний день, , является в структуре лендинг пейдж. Ведь это один из способов принять заказ или отправить каталог вашей продукции, предварительно получив e-mail посетителя.

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

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

Получить прайс

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

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


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

Давайте зададим стили нашей форме и приведем ее к читабельному виду:

/* Стили формы */ #application { width: 475px; margin: 0 auto; } /*Стили полей для ввода*/ #applicationName, #applicationEmail, #applicationTelephone { width: 100%; height: 73px; background: none; margin-top: 25px; border: 1px solid #fff; border-radius: 40px; text-align: center; color: #fff; font-size: 24px; } /*Стили полей при клике по ним*/ #applicationName:focus, #applicationEmail:focus, #applicationTelephone:focus { border: 1px solid #30ad64; } /*Стили текста, выводящегося в placeholder*/ ::-webkit-input-placeholder { color: #efefef; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 19+ */ :-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 18- */ :-ms-input-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::placeholder { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /*Стили для кнопки*/ .applicationButton { margin-top: 25px; background: #30ad64; border: none; width: 100%; height: 73px; border-radius: 40px; color: #fff; font-size: 24px; text-transform: uppercase; font-family: "PT Sans", sans-serif; cursor: pointer; } .applicationButton:hover { background: #d68c18; }

Если хотите, чтобы цвет кнопки менялся плавно, добавьте в.applicationButton и.applicationButton:hover такую строку:

Transition: .6s;

Где.6s — время анимации в миллисекундах.
Теперь наша форма приобрела красивый вид, сейчас она выглядит так:

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

Теперь нам необходимо создать файл application.php. Он будет получать введенные параметры из формы и отправлять их к нам на почту.

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

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

"; $msg .= "

Cообщение с сайта

От кого: ".$username."

Почта: ".$usermail."

Сайт: ".$usertel."

Давайте немного поясню код:

$sendto = "[email protected]"; // почта, на которую будет приходить письмо $username = $_POST["name"]; // сохраняем в переменную данные полученные из поля c именем $usertel = $_POST["telephone"]; // сохраняем в переменную данные полученные из поля c телефонным номером $usermail = $_POST["email"]; // сохраняем в переменную данные полученные из поля c адресом электронной почты

Тут, думаю, — понятно.

Теперь давайте сформируем заголовок письма.

$subject = "Новое сообщение"; $headers = "From: " . strip_tags($usermail) . "\r\n"; $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n";

Строка $subject = «Новое сообщение»; — отвечает за тему письма, может написать там: «Заявка с сайта» или то, что вам больше подходит.

Предлагаю сделать так, чтобы письмо приходило, от адреса, указанного в поле input type=»email». То есть с того, с которого пользователь ввел при заполнении формы. Для этого пропишем следующие строки:

$headers = "From: " . strip_tags($usermail) . "\r\n";

То есть мы подставим данные из переменной $usermail, где и хранится информация из поля, отвечающего за ввод email адреса.

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

$msg = ""; $msg .= "

Cообщение с сайта

От кого: ".$username."

Почта: ".$usermail."

Телефон: ".$usertel."

Первой строкой задаем шрифт письма. Второй — выводим сообщение, например: «Заявка с формы обратной связи на первом экране». Третей, четвертой и пятой строкой передаем данные из формы. Каждая с новой строки.

Теперь нужно отправить письмо функцией mail и определить, что будет происходить при успешной и не успешной отправки письма:

If(@mail($sendto, $subject, $msg, $headers)) { echo "

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

Через несколько секунд, после вывода изображения, я делаю редирект (автоматическое перенаправление) на главную страницу. Сделать это можно, вписав следующую строку между тегами head;

То есть через 4 секунды пользователя автоматически вернет на главную страницу!

Я не эксперт в php — это back-end язык программирования, меня всю жизнь тянуло к изучению front-end. Поэтому не судите строго. Да, здесь можно сделать проверки на заполнение контактных форм и так далее, но мне всегда хватало и этого, так что, если у кого-то есть предложение как улучшить этот код, напишите пожалуйста в комментариях или на почту, поправлю урок, спасибо!

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

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

P.s. Так как я стал очень часто получать вопросы о том, почему не работает форма и не приходят письма на почту, то решил описать несколько наиболее популярных причин, по которым это может происходить:

• Тестируете форму не на сервере.
• Тестируете форму на бесплатном хостинге.
• Тестируете форму на платном хостинге, но в бесплатном тестовом периоде.

В этих случаях письма не будут приходить к вам на почту.

Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .

23/07/2014 12/07/2018

dimadv7

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

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

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

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

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

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

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

Заметка для самых умных:

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

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

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

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

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

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

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

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

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

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

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

Вы когда-нибудь хотели установить на свой сайт форму обратной связи? Наверняка Вы встречались с подобными скриптами. Как ни странно, готовые скрипты отправки формы на email пользуются большой популярностью (Вы можете убедиться в этом в любом архиве скриптов), причем их существует великое множество. Есть простые, в которых ничего не меняется, а есть сложные и большие системы, которые функционируют на mysql, позволяют динамически изменять любые поля, содержат кучу настроек… Но так ли они нужны? На мой взгляд необходимость в подобных системах очень сомнительна.

Тестировать отправку почты на домашнем компьютере не получиться. Для этого Вам необходим хостинг с поддержкой php и функциями отправки почты. Я рекомендую Вам хостинг-провайдера runweb.ru. Этот провайдер предлагает отличные тарифы, высочайшую скорость доступа и отличное обслуживание.

Методы отправки почты

Отправлять почту с сервера с помощью php можно двумя основными способами.
Я хочу рассмотреть оба этих способа по порядку.

Первый и самый простой — это использование php функции mail(). Функция очень простая и понятная, хотя отправка почты с использованием mail() имеет и ряд недостатков. Самый главный — письмо отправляется не напрямую, а через php. Одновременно программа php подставляет в письмо некоторые свои поля. Например, у Вас не получится корректно указать отправителя. В поле "from" (то есть от кого пришло письмо) в большинстве случаев будет стоять имя сервера. Все дело в том, что php подставляет свои заголовки в служебную строку письмо "from".

Тем не менее отправка почты с помощью функции mail() остается самым простым
способом отправить письмо с сервера. Давайте рассмотрим этот способ подробнее.

Функция mail() имеет следующий синтаксис:

mail($to, $subject, $body, $headers);

$to - это адрес получателя. Например, "[email protected]". $subject - тема письма. Например, "Вам пришло письмо". $body - текст сообщения. $headers - любые заголовки письма. Например, адрес отправителя будет выглядеть так: "from: [email protected]".

Вот полный пример отправки почты с помощью mail():

mail("[email protected]", "Тема письма", "Здравствуйте!nВам пришло письмо.", "from: site_name");

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

Теперь давайте посмотрим, как можно отправить письмо с помощью sendmail.

sendmail — это стандартная программа операционной системы unix, которая отправляет почту.
php может запускать unix-программы путем использования средства pipes (дословно "трубопроводы"). Это средство unix позволяет направлять данные из одной программы в другую, наподобие того, как мы пишем в файл. Только файлом в этом случае выступает программа (в частности, sendmail), которая и получает данные.

sendmail программа имеет множество параметров, мы будем использовать некоторые из них. Чтобы использовать sendmail, нужно открыть к нему поток (pipe). В php это делается использованием команды popen(), которая по синтаксису идентична команде fopen(). Путем использования popen() мы открывает поток к sendmail
для записи в него (помните, параметр режима "w"?), после чего можно отправлять в него данные обычной командой fputs(). Посмотрим, как полностью выглядит процедура отправки письма через sendmail:

> 8 & 0xff; if ($result) echo "sendmail error! error code: $result"; ?>

В этой программе первое, что мы делаем — описываем rfc заголовки. rfc — это службные поля, которые содержат всю информацию о письме. Увидеть пример rfc Вы можете, например, в программе the bat!, щелкнув правой кнопкой мыши на тексте письмо и выбрав "rfc-822 headers" (название пункта может отличаться). Чтобы убрать их, повторите действия. В заголовке мы описываем поля "content-type", которые указывают что письмо текстовое и в кодировке windows-1251 (стандартная кодировка windows). В качестве кодировки также может быть использовано "koi8-r", это стандартная кодировка unix. В этой статье мы не будем рассматривать возможные rfc заголовки подробно. Мы сделаем это чуть позже,
когда будем ближе работать с почтой. Итак, после того, как мы описали служебные переменные и заголовки письма, мы открываем sendmail. Обратите внимание на путь к программе "/usr/sbin/sendmail". На разных серверах он может отличаться!
Если эта строка не работает, спросите у Вашего провайдера, где расположен sendmail. Далее указываются параметры: "-i -f$from — $recipients". Это стандартные параметры для отправки письма и в них подставляется два поля: $from — от кого, $recipients — адреса получателей. В нашем случае переменная $recipients содержит всего один адрес. На самом деле можно использовать несколько адресов, указывая их через пробел:

$recipients = "[email protected] [email protected] [email protected]";

Далее мы записываем в поток сначала заголовки письма (переменная $text_headers), потом отделяем их символом переноса строки и записываем текст сообщения. Последний шаг — закрытие потока и проверка на ошибку. При правильном выполеннии в переменную $result помещается ноль, а если возникла ошибка, в нее записывается номер ошибки.

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

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

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

contact.php:

Ошибка: $s"; ?>

Поля, отмеченные звездочкой (*) должны быть заполнены. > 8 & 0xff; } else $result=(mail($recipients, $subject, $body, "from: ".$from."rn".$headers) ? FALSE: TRUE); if ($result) echo "Сообщение не было отправлено!"; else echo "Спасибо, Ваше сообщение отправлено. Администратор свяжется с Вами в ближайшее время!"; ?>

Теперь давате рассмотрим, как работает эта программа. Выполнение начинается со строки "if (!$a) show_form();", так как до этого указана функция, которая, естественно, не выполняется. В этой строке мы проверяем, была ли попытка заполнения формы (из формы, как Вы видите, передается переменная $a, которая и проверяется в этой строке). Если такой попытки не было, вызывается функция show_form(), которая выводит форму.