Готовая форма обратной связи для сайта, всплывающая в окне

Изучая сайты, вы могли заметить ,что на каждом из них есть форма обратной связи.
Если это Landing Page, то таких форм может быть несколько. Такие формы выполняют очень важную роль в контакте между пользователем сайта и его владельцем.

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

demoСкачать

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

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

<div class="content">

<p class="open_modal"><a class="pop-form" data-product="Форма 1">Открыть форму</a></p>
<div class="overlay"></div>
<div class="popup">
<div class="close_modal">x</div>

<form class="fofm" action="">
<h5>Форма обратной связи</h5>
<input name="txtname" required="" type="text" placeholder="Имя" /> <input name="txtemail" required="" type="email" placeholder="Email" /> <input name="txtphone" pattern="^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$" required="" type="tel" placeholder="Телефон" /> <textarea name="txtmessage" rows="10" placeholder="Описание"></textarea> <input id="hidden-form" name="txtorder" type="hidden" value="" /> <input class="valTrFal" name="valTrFal" type="hidden" value="valTrFal_true" /> <input class="button" name="btnsend" type="submit" value="Заказать" />

</form></div>

<div class="popup2">
<div class="close_modal">x</div>
<div class="window">
<div class="insText">
<h5>запрос отправлен</h5>
<strong>Ваш запрос отправлен.</strong>Наш менеджер свяжется с вами в ближайшее время!

</div>

</div>
</div>
</div>

</div>

Контейнер с классом overlay, отвечает за затемнение экрана при появлении формы.
Контейнер popup и popup2 — это два всплывающих окна. Первое окно с формой и второе с результатами отправки данных.

Второй шаг — подключение стилей формы.

Все стили формы приведены ниже. Также их можно подключить отдельным файлом, как сделано на DEMO странице.

@charset "utf-8";
input,textarea { padding: 5px 8px; display: block;color: #b1b7ba; font: 12px/18px Verdana, Arial, sans-serif;}
input[type="submit"] { color: #fff; border: 1px solid #d6942d; font-size: 14px; margin-top: 6px;
background: #ee7156; text-decoration: none; display: block; cursor: pointer; padding: 4px; height: 30px;}
input[type="submit"]:disabled{ opacity: .3;}
.open_modal a{ text-decoration:none; color:#000;}
.open_modal p {
background: #ee7156;
border-radius: 5px;
padding: 2px 44px;
color: #fff;
font-size: 14px;
text-transform: uppercase;
cursor: pointer;
margin: 0 0 0 -50%;
display: block;
width: 225px;
}

.overlay {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 99999;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.popup, .popup2{
width: 300px;
display: inline-block;
left: 50%;
opacity: 0;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 999999;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.popup form { padding: 0 0 20px; right: 0; background:#fff;}
.popup2 .window {
right: 0;
width: 300px;
background:#fff;
padding: 0 27px 27px;

}
.popup form input {width: 80%; margin: 0 auto; margin-top: 0.8em; border: 1px solid #000; color:#000;}
.popup form input[name="txtname"]{
margin-top: 20px; color: #000;
}
.popup form textarea {margin: 0 auto; margin-top: 1em; width: 80%; height: 5em; resize: none; border: 1px solid #000; color:#000;}

.popup form input[type="submit"] {
background: #ee7156;
text-align: center;
text-transform: uppercase;
width: 85%;
border: 1px solid #ee7156;
}

.popup form h5 {font-size: 1em; padding: 1em; color: #000; font-weight: normal; text-transform: uppercase;
text-align: center; }

.popup .close_modal {position: absolute; top: 25px; right: 5px; cursor: pointer;
color: #000; font-family: 'tahoma', sans-serif; text-align: center; font-size: 1.1em;}
.popup2 .close_modal {position: absolute; top: 0px; right: -45px; cursor: pointer;
color: #000; font-family: 'tahoma', sans-serif; text-align: center; font-size: 1.1em;}

.popup2 h5 {
padding: 1em 0.5em;
text-align: center;
font-size: 1.5em;
color: #000;
font-weight: normal;
text-transform: uppercase;
margin: 0;
}
.popup2 p {
font-family: verdana;
font-size: 18px;
line-height: 24px;
text-align: center;
}
.popup2 p strong{
font-size: 1em;
line-height: 30px;
font-weight: normal;
display: block;
}

::-webkit-input-placeholder { color: #000; }
::-moz-placeholder { color: #000; }/* Firefox 19+ */
:-moz-placeholder { color: #000; } /*Firefox 18- */
:-ms-input-placeholder { color: #000; }

.popup form input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.popup form input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.popup form input:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.popup form input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.popup form input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.popup form input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.popup form input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.popup form input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}

.popup form textarea::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.popup form textarea::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.popup form textarea:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.popup form textarea:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.popup form textarea:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.popup form textarea:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.popup form textarea:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.popup form textarea:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}

В конце файла стилей, идет оформление для placeholder. Подробнее о его оформлении, можно почитать в отдельной статье «Внешний вид названия полей или как изменить placeholder»

В остальном нет ни чего сложно, по этому подробно объяснять стили не будем.

Шаг три — приятное дополнение для создателей landing page и фанатов статистики.

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

Эта проблема решается достаточно просто. Кнопке, вызывающей форму дописывается специальный код data-product="Форма 1". Где «Форма 1» уникальное значение для каждой кнопки. Оно может быть любым, главное, чтобы было понятно, что это за кнопка.

<div class="content">
<a class="pop-form" data-product="Форма 1">Открыть форму</a>
</div>

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

<script>
$('a.pop-form').on('click',function(){
var mysuperdata = $(this).attr('data-product');
$('input#hidden-form').val(mysuperdata);
});
</script>

a.pop-form — эта отметка говорить у каких ссылок (тег а + название класса ссылки) собирать данные. При желании класс ссылки можно изменить, главное заменить его и в ссылке и в скрипте.
input#hidden-form — эта отметка в скрипте, говорит куда именно вносить данные о названии кнопки. В нашей форме есть скрытое поле с id= hidden-form. Именно в это поле и подставится значение.

Шаг четыре — подключение стилей и скриптов к странице сайта.

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

Затем необходимо подключить скрипт и стили формы. При желании стили формы можно скопировать в основной файл style.css.

Обычно такое подключение советуют делать в тегах head, но мы рекомендуем вынести блок с подключением ближе к концу страницы, перед закрывающим тегом body. Это позволит не блокировать загрузку основной части страницы. С точки зрения поисковых систем это плюс.

<div class="content">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" src="js/custom.js"></script>

</div>

В скрипте обработки и отправки писем сложного нет. Он содержит русские комментарии и достаточно прост в понимании.

Пятый шаг — обработчик отправки письма со стороны сервера. mail.php

Обработчик также достаточно простой и имеет русские комментарии. Единственное на, что следует обратить внимание — это переменные подобного типа $txtname = trim($_POST['txtname']);

Каждое поле формы имеет имя (name="txtname") оно совпадает с переменной в обработчике. Это необходимо для сбора всех данных и их отправки на почту.

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

После 19 строки нужно добавить название нового поля, допустим так
$test = trim($_POST['test']); при этом у поля должен быть атрибут name="test"

А в 34 строку нужно добавить
$body = "Заявка с \n\nИмя: $txtname\nE-mail: $txtemail\nТелефон: $txtphone\nЧто заказали: $txtorder\nНаше новое поле: $test ";

После этого все данные введенные в новом поле будут отправляться на вашу почту.

Модальная форма обратной связи с использованием технологии ajax готова. Из приятных дополнений в этой форме реализована проверка заполнения полей на стороне клиента и добавлена возможность отслеживания с какой формы отправлено письмо.

На этом все. Скачать готовую форму обратной связи для сайта можно тут:
форма обратно связи ajax .
В архиве есть дополнительная инструкция по подключению и изменению формы.

Поделиться в социальных сетях: