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

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

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

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

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

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

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

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

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

 

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

файлы формы

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

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

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

схема работы обратной связи на языке php

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

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

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

<!-- кнопка вызова окна -->
<a class="feedback-btn popup_button" href="#" rel="order_call_window">Заказать обратный звонок</a>
<!-- end кнопка вызова окна -->
 
<!-- блок всплывающей формы -->
<div class="popup_bg"></div>
<div class="popup_window" id="order_call_window">
<div class="popup_window__title">Заказажите обратный звонок</div>
<div class="popup_window__content">
<form action="index1.php" method="post" id="order_call_form">
<input class="popup_window__input" type="text" name="name" placeholder="Ваше имя" />
<input class="popup_window__input" type="text" name="phone" placeholder="Ваш телефон" />
<input class="popup_window__input" type="text" name="email" placeholder="Ваш e-mail" />
<input type="submit" class="btn_submit_form" value="Отправить заявку" />
</form>
</div>
</div>
<!-- end блок всплывающей формы -->

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

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

<?php
 /* Здесь проверяется существование переменных */
  if (isset($_POST['phone'])) {$phone = $_POST['phone'];}
 if (isset($_POST['name'])) {$name = $_POST['name'];}
  if (isset($_POST['email'])) {$email = $_POST['email'];}
 
/* Сюда впишите свою эл. почту */
 $address = "mail@yandex.ru";
 
/* А здесь прописывается текст сообщения, \n - перенос строки */
 $mes = "Тема: Заказ обратного звонка!\nТелефон: $phone\nИмя: $name\nE-mail: $email";
 
/* А эта функция как раз занимается отправкой письма на указанный вами email */
$sub='Заказ'; //сабж
$email='Заказ <vpluce.ru>'; // от кого
 $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$email");
 
ini_set('short_open_tag', 'On');
header('Refresh: 3; URL=index.html');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="3; url=index.html">
<title>С вами свяжутся</title>
<meta name="generator">
<style type="text/css">
body
{
 
   background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat;
 
}
 
<script type="text/javascript">
setTimeout('location.replace("/index.html")', 3000);
/*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/
</script> 
</head>
</body>
</html>

 

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

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

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

 

Релиз подготовлен Vpluce.ru