Веб-дизайн и поисковая оптимизация. Создание формы обратной связи

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

Для этого создадим два файла - forma.php и mail.php . В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form - кнопка "Отправить" и атрибут action , который ссылается на обработчик - mail.php , именно к нему обращаются данные из формы при нажатии кнопки "Отправить" . В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php» . На этой странице прописан скрипт на PHP , который обрабатывает данные формы:

Данные формы отправляются методом POST (обрабатывается как $ _POST ). $ _POST - это массив переменных, переданных текущему скрипту через метод POST .

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

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


Форма обратной связи на PHP





Оставьте сообщение:
Ваше имя:



E-mail:

Номер телефона:

Сообщение:

Текстовая область может содержать неограниченное количество символов-->

Так форма визуально выглядет в браузере.

Далее пишем код для файла mail.php . Придумываем сами имена для переменных. В PHP переменная начинается со знака $ , а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы - значение name .

Таким образом данные из массива $_POST будут переданы соответствующим переменным и отправлены на почту при помощи функции mail . Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.

Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи php. Покажу на наглядных примерах, чтобы вы понимали как все устроено и как происходит взаимодействие между самой формой ввода (ее полями input) и файлом-обработчиком, написанный на языке php. К тому же бесплатно сможете скачать исходники вместе с .

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

UPDATE :По откликам читателей, я понял, что нужно что-то более красивое и функциональное, встречайте , ознакомьтесь и посмотрите. Сами выбирайте какая больше понравится)

UPDATE2 : Version 3.0 Адаптивный Лендинг + форма ajax с передачей UTM-меток , ознакомьтесь и посмотрите. Вам понравится

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

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

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

После того как скачаете исходники и распакуете архив, вы увидите следующую структуру по файлам:

• image — все изображения, которые используются для самого Landing Page, кнопки и т.д.
• js — javascript скрипты, которые обеспечивают например всплывающее модальное окно на странице и другие визуальные эффекты
• index.html — индексный файл нашего одностраничника
• index1.php — файл обработчик, в который передаются значения из формы, далее формируется письмо из полученных переменных и отправляется на указанный email адрес. Так же index1.php случит в роли промежуточной страницы уведомления об успешной отправке данных с автоматическим перенаправлением обратно на index.html (т.е. наш одностраничник)

Важно, чтобы ваш хостинг, на котором располагаются файлы сайта, поддерживал php обработку, иначе файл index1.php не выполнится и работать не будет. Чтобы уточнить этот нюанс обратитесь в кампанию, где зарегистрирован ваш хостинг или просто протестируйте — работает, значит есть поддержка. Если нет, то включите опцию поддержки языка php

Взгляните на схему работы взаимодействия всех элементов (страница, форма, обработчик)

Исходный код вызова формы и обработчика

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Заказать обратный звонок Заказажите обратный звонок

Заказать обратный звонок Заказажите обратный звонок

Ниже полный исходный код обработчика index1.php, для того чтобы настроить отправку на свой почтовый ящик, поменяйте «[email protected]» на свой, остальное в принципе можно оставить без изменений

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

С вами свяжутся

С вами свяжутся body { background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; } setTimeout("location.replace("/index.html")", 3000); /*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/

Проверка работоспособности формы

Вызываем окно и вводим данные для тестовой проверки нашей формы

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

У меня на этом все, старался донести смысл и работу скрипта наилучшим образом. Возникнут вопросы, можете смело обращаться в комментарии или ко мне в VK (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.

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

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

Простейший пример такой формы приведен на рис.1. (Это вполне рабочий образец, и вы можете с его помощью послать мне благодарственное письмо.)

Ваше имя:

Ваш e-mail (для ответа):

Ваше сообщение:

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

Для размещения на сайте такой формы обратной связи достаточно всего лишь элементарных сведений об HTML и умения оперировать двумя командами - Копировать и Вставить. Рассмотрим последовательность действий по созданию формы обратной связи (рис.1) на HTML-странице сайта.

1. Проверьте, что тарифный план вашего хостинга (контора, где размещён ваш сайт) поддерживает PHP. Если нет, то вам придётся скорее всего доплатить для перехода на другой тариф, поддерживающий эту самую PHP. Значение этой аббревиатуры можете не искать, так как знание PHP вам не понадобится.

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




Ваш e-mail (для ответа):




Ваше сообщение:

Как видим, вся форма создаётся тегом с атрибутами action=mail.php (указание на страницу сайта, где расположен сценарий обработки введенных данных) и method=post (метод отправки данных на сервер). Отдельные строки созданы тегом с вполне понятными атрибутами. Расположение отдельных элементов формы, текст, шрифты и проч. можете менять в соответствие с дизайном вашего сайта. В теге задаются размеры области для ввода текста сообщения: число строк и колонок (rows="3" cols="25").

3. Создадим новую страницу mail.php , аналогичную обычной HTML, только имеющую расширение.php. Полный код страницы показан на рис.2:

Обратная связь

Рис.2. Код страницы обработки формы обратной связи

Красным цветом выделены адреса ссылок, на которые необходимо обратить внимание:

• [email protected] - адрес г.Пупкина заменить на адрес вашей почты, куда будут поступать сообщения от посетителей сайта, а также от неутомимых спамеров. Кстати, для защиты от них в форму часто вводят так называемую капчу (англ. CAPTCHA - Completely Automated Public Turing test to tell Computers and Humans Apart - полностью автоматизированный публичный тест Тьюринга для различия компьютеров и людей). Обычно это сильно искаженные цифры и буквы, которые просят ввести перед отправкой сообщения. О капче поговорим в одной из следующих статей.
  Если вы хотите отправлять письма на несколько адресов, то просто перечислите их через запятую.
• a href=index.html - адрес главной (домашней) страницы сайта.

Созданную страницу mail.php необходимо поместить в тот же каталог сайта (директорию, папку), где расположена и страница с формой обратной связи.

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

Замечание: на некоторых хостингах новая (только что установленная на сайте) форма обратной связи начинает работать не сразу, и первые письма не доходят совсем или поступают с задержкой на 1-2 дня. Вероятно, идет "притирка шестеренок", а затем все работает нормально. Кроме того, с некоторых хостингов не доходят письма на определенные адреса, например, у меня были проблемы с ящиком на Рамблере и Mail.ru. Для решения этих проблем обратитесь к вашему хостеру - обычно помогают.

Иногда при использовании описанной формы обратной связи возникают проблемы с кодировкой. Если в пришедшем письме вместо родной кириллицы текст состоит из "кракозяблов" или пустых квадратиков, то приходится вручную подбирать кодировку, что конечно же неудобно. Чтобы этого не происходило, проверьте, что ваша страница с формой обратной связи имеет кодировку charset=UTF-8 . Если вы используете программу Adobe Dreamweaver , то для этого надо выбрать раздел меню Изменить - Свойства страницы - Кодировка .

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

В описанном примере для простоты сообщение об отправке письма выводится на пустой странице. Конечно, вы можете разместить его на любой странице своего сайта, чтобы посетитель мог использовать навигацию (меню) для выбора дальнейших действий. Для этого поместите РНР-код (то, что расположено от ) в нужное место страницы с меню и измените её название на mail.php.

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

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

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

Есть конечно и достойные ответы, но их очень мало. Я приведу простой пример, для которого много ума не нужно. Особых знаний в php не требуется, точнее они вообще не нужны. Что и где нужно изменить, я напишу подробно, когда это будет нужно. Форма работает нормально, без сбоев. Пример формы находится у меня на . В готовый пример я добавил немного стилей для красоты, чтоб форма совсем уже не смотрелась «убого». При желании можно все изменить на ваше усмотрение.

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

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

Имя E-mail: Тема сообщения Ваш текст:

< form action = "/wp-content/themes/xmarkup/form.php" method = "post" name = "form" > Имя< input class = "inp" style = "width: 30%;" name = "name" type = "text" / > E - mail : < input class = "inp" style = "width: 30%;" name = "email" type = "text" / > Темасообщения< input class = "inp" style = "width: 30%;" name = "temma" type = "text" / > Ваштекст: < textarea class = "inp" style = "width: 80%;" cols = "1" name = "massage" rows = "5" > < / textarea > < input class = "inp" type = "submit" value = "Отправить" / > < / form >

В самом начале кода, в первом строчке, вы должны указать свой путь к php файлу form.php (про него немного попозже). Больше ничего менять не нужно. Если вас не устраивает название формы и ее поля, вы всегда можете добавить новые или изменить старые. Так же можно добавить свои стили прямо суда в таблицу. Если такой вариант вам неудобный, задавайте новые классы и уже потом добавляйте стили через ваш файл style.css

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

Inp{ padding: 10px; border: 1px solid #E5E5E5; width: 200px; color: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; }

Inp { padding : 10px ; border : 1px solid #E5E5E5; width : 200px ; color : #999999; box - shadow : rgba (0 , 0 , 0 , 0.1 ) 0px 0px 8px ; Moz - box - shadow : rgba (0 , 0 , 0 , 0.1 ) 0px 0px 8px ; Webkit - box - shadow : rgba (0 , 0 , 0 , 0.1 ) 0px 0px 8px ;

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

Php код формы

С разметкой формы определились, красоту навели, теперь необходимо создать файл с расширением php и добавить в него вот такой код. Файл добавляйте через FTP клиент на ваш сайт. Большинство пользователей используют CMS, скидывайте данный файл в папке с вашей темой. Адрес и название этого файла, вы должны изначально прописать в разметке вашей формы, которую я показывал выше. Я прописал полный путь для примера, чтоб было понятно, что и куда необходимо вставить.

(