Cоздание формы обратной связи для сайта: всплывающая html wordpress php joomla битрикс почта как сделать добавить бесплатно (красивая работающая простая opencart плагин конструктор скрипт на страницу спам ajax)

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

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

Четкие и лаконичные названия

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

Информативное описание

Хоть название контактной формы должно объяснить ее суть, в случае, если посетитель имеет еще какие-либо сомнения или неправильные представления, описание должно прийти к вам на помощь. Описание должного ответа, для чего нужна эта форма и что посетитель получит взамен заполнения формы.

Никто не любит длинные формы

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

Ниже приводятся два варианта, давайте посмотрим, какой из них вам нравится больше.

Как вы думаете, какой из них, скорее всего, будет заполнен конечным пользователем? Конечно же, первый является явным победителем, второй вариант содержит ненужные поля, которые могут заставить посетителя сомневаться, заполнять форму или нет.
Размещайте текстовые метки слева над полями заполнения

Исследования eyetracking показали, что выравнивание по левому краю меток над полем работает лучше, чем справа и слева выровненные метки в соответствии с полем. Для того, чтобы сделать форму компактной и короткой, метки могут быть помещены в поле.

Выравнивание по левому краю внутри поля
Выравнивание по левому краю внутри поля
Выравнивание по левому краю над полем
Выравнивание по левому краю над полем
Выравнивание по левому краю в соответствии с полем
Выравнивание по левому краю в соответствии с полем
Не используйте кнопки действия, которые могут запутать

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

Располагайте форму над линией сгиба

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

Помощь посетителям в заполнении формы

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

Например, в поле: Адрес электронной почты можно написать – «example@domain.com».

Ясное указание на ошибку

Ясно указать на ошибку важно. Стоит не просто показать ошибку, а сообщить, где именно она была сделана, так как это может раздражать посетителя, чтобы продолжить искать, где он сделал что-то не так.

Подсветка заполняемых полей

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

Размер, шрифт и цвет фона

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

Разграничьте обязательные и необязательные поля

Лучший и самый простой способ провести различие между обязательными и необязательными полями использовать знак звездочки (*). Это позволит улучшить пользовательский опыт и, следовательно, коэффициент конверсии.

Оптимизация форм под мобильную версию

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

Избегайте длинных выпадающих меню

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

Персонализация сообщения после отправки формы

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

Применение простой капчи

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

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

JotForm

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

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

PForm

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

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

HTML Form Builder by CSS Template Heaven

Heaven это самый простой ресурс по созданию HTML форм, в котором можно перемещать все что угодно, Heaven создает свою HTML форму щелкните на плюс +, чтобы добавить поля в форме. Все поля могут быть отредактированы, после Вы можете скачать свою форму HTML как в .zip так и получить код HTML.

Reformed

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

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

Accessify

Accessify. Несмотря на то, что не так уж много пользовательского интерфейса при создании формы, к концу третьего этапа, вы сможете скопировать HTML код созданной формы и вставьте его на своем сайте.

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

Если сайт работает на базе какой-то популярной системы управления контентом (WordPress, Joomla, Drupal и т.д.), то для таких CMS существуют различные плагины, установив которые, можно легко решить эту задачу, но лендинг не работает на CMS, в большинстве случаев он состоит из файла index.html и подключаемых к нему CSS-стилей и JS-скриптов.

Исходя из вышесказанного следует, что готовый плагин здесь не подойдет, и придется реализовать собственное решение.

Создание контактной формы

Сначала нужно определиться с необходимыми полями:

Имя отправителя.
E-mail адрес.
Номер телефона.
Текст сообщения.
Согласие с обработкой персональных данных.

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

Еще хотелось бы на клиенте реализовать ввод номера телефона по маске, чтобы можно было вводить только цифры в определенном формате. Для это воспользуемся jQuery-плагином maskedinput. Валидация E-mail на клиенте будет производиться встроенными средствами браузера.

Помимо этого нужно создать еще два файла, main.css — для оформления и main.js — для отправки Ajax-запроса на сервер. Еще нам понадобится лоадер (GIF-изображение, которое будет крутиться в момент отправки почты). Все файлы сгруппируем в соответствующих папках (css, js, images). Ну и, конечно, в корне создаем индексный файл index.html и обработчик handler.php, который будет принимать и обрабатывать данные из формы. Получилась следующая структура.

Структура папок и файлов

В index.html помещу HTML-код формы и подключу стили и скрипты:






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










В файле main.css накидаю простенькие стили для оформления:

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #fff;
}

.container {
max-width: 500px;
margin: 50px auto;
padding: 20px;
border-radius: 4px;
background-color: #ebebeb;
box-shadow: 0 0 3px #666;
}

h2, .field-block {
margin-bottom: 20px;
}

.field-block label, .field-block .field {
display: block;
width: 100%;
}

.field-block label {
margin-bottom: 8px;
font-weight: bold;
}

.field-block .field {
font-size: 16px;
padding: 8px 12px;
line-height: 1.5;
border-radius: 4px;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.field-block .field:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.field-block textarea {
resize: vertical;
}

.check-text {
font-size: 14px;
vertical-align: top;
}

.button {
cursor: pointer;
font-size: 16px;
padding: 6px 12px;
margin-bottom: 5px;
}

#loader {
display: none;
}

На реальном сайте вы можете использовать абсолютно любой HTML-код формы с собственными CSS-стилями, которые подходят для дизайна вашей веб-страницы. Мой вариант внешнего вида формы сделан просто для примера.

В результате получилась вот такая форма:

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

Наполняем main.js:

Включаем маску для ввода номера телефона.
Делаем проверку, если чекбокс согласия на обработку персональных данных не отмечен, то деактивируем кнопку и не даем отправить форму.
Формируем Ajax-запрос для отправки пользовательских данных на сервер и получение ответа от сервера.

Код в main.js получился такой:

jQuery(document).ready(function($) {

// Добавляем маску для поля с номера телефона
$('#phone').mask('+7 (999) 999-99-99');

// Проверяет отмечен ли чекбокс согласия
// с обработкой персональных данных
$('#check').on('click', function() {
if ($("#check").prop("checked")) {
$('#button').attr('disabled', false);
} else {
$('#button').attr('disabled', true);
}
});

// Отправляет данные из формы на сервер и получает ответ
$('#contactForm').on('submit', function(event) {

event.preventDefault();

var form = $('#contactForm'),
button = $('#button'),
answer = $('#answer'),
loader = $('#loader');

$.ajax({
url: 'handler.php',
type: 'POST',
data: form.serialize(),
beforeSend: function() {
answer.empty();
button.attr('disabled', true).css('margin-bottom', '20px');
loader.fadeIn();
},
success: function(result) {
loader.fadeOut(300, function() {
answer.text(result);
});
form.find('.field').val('');
button.attr('disabled', false);
},
error: function() {
loader.fadeOut(300, function() {
answer.text('Произошла ошибка! Попробуйте позже.');
});
button.attr('disabled', false);
}
});

});

});

На этом клиентская часть нашей формы завершена, переходим к серверной части.
Отправка почты на E-mail администратора

Для того чтобы отправка почты работала корректно и не было проблем со спам-фильтрами, отправляться письма должны с реального E-mail адреса и через SMTP-серверы популярных почтовых служб (Яндекс, Mail, Google).

Как это работает? В файле на сайте мы указываем логин и пароль от реального ящика, по этим данным перед отправкой почты происходит авторизация в системе почтовика и отправка с этого ящика на другой E-mail адрес (в данном случае E-mail администратора сайта).

Для реализации такого функционала воспользуемся одной из нескольких PHP-библиотек, например: PHPMailer, на мой взгляд она попроще, и новичку будет легче с ней разобраться. Так как мы имеем дело с лендингом или сайт-визиткой, то у нас нет композера и вряд ли он понадобится, поэтому просто скачиваем и распаковываем архив.

Обратите внимание, что для корректной работы библиотеки PHPMailer версия PHP должна быть 5.5 или выше.

В корне нашего сайта создаем папку mailer и помещаем в нее папку с библиотекой, должно получиться так: site.ru/mailer/PHPMailer, на реальном сервере желательно запретить доступ к папке mailer.

Чтобы не пихать весь код в пока пустой ранее созданный обработчик handler.php, в папке mailer создадим два вспомогательных статических хелпера: Validator.php (валидирует данные из формы) и ContactMailer.php (отправляет почту, обертка над PHPMailer).

Код из Validator.php:

Host = ' smtp.yandex.ru';
// Включает SMTP-авторизацию
$mailer->SMTPAuth = true;
// Логин или E-mail целиком
$mailer->Username = self::$emailFrom;
// Пароль от почтового ящика
$mailer->Password = 'XXXXXXXX';
// Протокол соединения
$mailer->SMTPSecure = 'ssl';
// Порт для исходящаей почты
$mailer->Port = '465';

// Устанавливает кодировку
$mailer->CharSet = 'UTF-8';
// Устанавливает E-mail и имя отправителя
$mailer->setFrom(self::$emailFrom, 'Имя отправителя');
// Добавляет E-mail получателя
$mailer->addAddress(self::$emailTo);
// Настройка HTML-формата
$mailer->isHTML(false);
// Тема письма
$mailer->Subject = 'Заполнена форма обратной связи';
// Основное тело письма
$mailer->Body = $body;

// Отправляет письмо
if ($mailer->send()) {
return true;
}
return false;
}
}

Осталось лишь сформировать наш обработчик handler.php:

<?php

require_once __DIR__ . '/mailer/Validator.php';
require_once __DIR__ . '/mailer/ContactMailer.php';

if (!Validator::isAjax() || !Validator::isPost()) {
echo 'Доступ запрещен!';
exit;
}

$name = isset($_POST['name']) ? trim(strip_tags($_POST['name'])) : null;
$email = isset($_POST['email']) ? trim(strip_tags($_POST['email'])) : null;
$phone = isset($_POST['phone']) ? trim(strip_tags($_POST['phone'])) : null;
$message = isset($_POST['message']) ? trim(strip_tags($_POST['message'])) : null;

if (empty($name) || empty($email) || empty($phone) || empty($message)) {
echo 'Все поля обязательны для заполнения.';
exit;
}

if (!Validator::isValidEmail($email)) {
echo 'E-mail не соответствует формату.';
exit;
}

if (!Validator::isValidPhone($phone)) {
echo 'Телефон не соответствует формату.';
exit;
}

if (ContactMailer::send($name, $email, $phone, $message)) {
echo htmlspecialchars($name) . ', ваше сообщение успешно отправлено.';
} else {
echo 'Произошла ошибка! Не удалось отправить сообщение.';
}
exit;

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

Не забудьте изменить данные в настройках ContactMailer.php: E-mail получателя, E-mail и пароль отправителя, адрес вашего SMTP-сервера и т.д. Ко всем используемым настройкам я написал пояснение в коде. Если будите применять данное решение на реальном сайте, внимательно смотрите все пути к файлам и сделайте бекап, прежде чем вносить изменения.

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

Для чего нужна форма обратной связи на сайте?

Форма обратной связи служит для отправки общений владельцу сайта от посетителей.
В специальные поля вводятся специальные данные (имя, электронная почта, текст). Для отправки сообщения на е-мейл владельцу сайта, необходимо нажать на кнопку «Отправить», может быть и другой вариант.


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

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

Такие формы используются в качестве виджета обратного звонка с сайта, когда клиент хочет что бы ему позвонили.
СОЗДАЕМ ФОРМУ ОБРАТНОЙ СВЯЗИ НА HTML

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

Вставляем в нужное место на сайте следующий код:




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

Вставили код и получилось вот так:

Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили (готовая html верстка формы обратной связи):


/* Форма обратной связи */
#inline {
margin-left: 30px;
width: 80%;
margin: 0 auto;
background: #fff;
padding: 10px 20px;
}
.txt {
display: inline-block;
color: #676767;
width: 190px;
margin-bottom: 10px;
border: 1px solid #ccc;
padding: 5px 9px;
font-size: 15px!important;
line-height: 1.4em;
}
.txtarea {
display: inline-block;
color: #676767;
width: 617px;
margin-bottom: 10px;
border: 1px solid #ccc;
padding: 5px 9px;
font-size: 15px!important;
line-height: 1.4em;
height: 80px;
}
.txt:focus, .txtarea:focus {
border-style: solid;
border-color: #bababa;
color: #444;
}
input.error, textarea.error {
border-color: #973d3d;
border-style: solid;
background: #f0bebe;
color: #a35959;
}
input.error:focus, textarea.error:focus {
border-color: #973d3d;
color: #a35959;
}
#send {
color: #FFFFFF;
display: block;
cursor: pointer;
padding: 5px 11px;
font-size: 1.2em;
border: solid 1px #F9F9F9;
border-radius: 2px;
background: #70C6B9;
width: 210px;
margin-bottom: 20px;
}
#send:hover {
background: #979797;
}
/* Форма обратной связи */

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

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

Выглядит это вот так:

Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.



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

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

Для этого перед закрывающимся тегом вставьте следующий скрипт:



function validateEmail(email) {
var reg = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([ [0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}

$(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });
$("#send").on("click", function(){
var emailval = $("#email").val();
var namevl = $("#name").val();
var phonevl = $("#phone").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);

if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
$("#email").removeClass("error");
}
if(mailvalid == false) {
$("#name").addClass("error");
}
else if(mailvalid == true){
$("#name").removeClass("error");
}
if(mailvalid == false) {
$("#phone").addClass("error");
}
else if(mailvalid == true){
$("#phone").removeClass("error");
}
if(msglen = 4){
$("#msg").removeClass("error");
}

if(mailvalid == true && msglen >= 4) {
// если обе проверки пройдены
// сначала мы скрываем кнопку отправки
$("#send").replaceWith("отправка...");
$.ajax({
type: `POST`,
url: `sendmessage.php`,
data: $("#contact").serialize(),
success: function(data) {
if(data == "true") {
$("#contact").fadeOut("fast", function(){
$(this).before("

Успешно! Ваше сообщение отправлено :)

");
setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
});
});


Как работает этот скрипт?

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

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.


<?php
$sendto = "mail@mail.ru"; // Обязательно измените e-mail на свой
$usermail = $_POST[`email`];
$username = $_POST[`name`];
$userphone = $_POST[`phone`];
$content = nl2br($_POST[`msg`]);
// Формирование заголовка письма
$subject = "Новое сообщение";
$headers = "From: " . strip_tags($usermail) . "rn";
$headers .= "Reply-To: ". strip_tags($usermail) . "rn";
$headers .= "MIME-Version: 1.0rn";
$headers .= "Content-Type: text/html;charset=utf-8 rn";
// Формирование тела письма
$msg = "";
$msg .= "

Новое сообщение

rn";
$msg .= "

Имя: ".$username."

rn";
$msg .= "

Номер телефона: ".$userphone."

rn";
$msg .= "

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

rn";
$msg .= "

Сообщение: ".$content."

rn";
$msg .= "";

// отправка сообщения
if(@mail($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
echo "false";
}
?>

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

ВСПЛЫВАЮЩАЯ ФОРМУ ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА

Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней. Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.






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


Обратный звонок

И придаем ей стили.


.modalbox {
color: #FFFFFF;
display: block;
cursor: pointer;
padding: 10px 11px;
font-size: 1.2em;
border: solid 1px #F9F9F9;
border-radius: 2px;
background: #70C6B9;
width: 210px;
text-decoration: none;
text-align: center;
margin:0 auto 20px;
}
.modalbox:hover {
background: #979797;
}

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline».

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

Для этого нужно заменить стили #inline со старых на новые.


#inline {
display:none;
margin-left: 30px;
width: 80%;
margin: 0 auto;
background: #fff;
padding: 10px 20px;
}

В итоге получаем вот такую кнопку.

При нажатии на которую открывается всплывающее окно с обратной связью.

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

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

Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:

url: `http://site.ru/sendmessage.php`

Принцип работы формы обратной связи на html

Наша форма будет иметь 5 полей для ввода данных – имя, электронный адрес, телефон, адрес сайта, текст сообщения (вы сможете удалить или изменить их самостоятельно).

Все поля, кроме адреса веб сайта будут обязательны для заполнения (это вы тоже сможете настроить самостоятельно).

Для полей с email адресом и сайтом будет проводиться обязательная проверка правильности ввода данных.

Конечная форма связи будет иметь вот такой вид:

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

Для работы контактной формы, созданной на html, требуется 3 элемента.

Первый отвечает за структуру самой формы, за тип и количество полей ввода данных. Это обычный html код.

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

Третий отвечает за внешний вид. Устанавливает размеры и расположение полей ввода данных, добавляет различные цвета и эффекты. Это все задается CSS стилями.

Демо версия формы

Настройку каждого из этих элементов мы с вами разберем по шагам.

Создание HTML макета

Чтобы не делать статью слишком длинной и не добавлять отдельно каждый элемент, я приведу полный html код, а ниже опишу каждый блок и возможные изменения.

Для обозначения форм в html используется тег

, внутри которого заполняются необходимые параметры.

Имя:

Email:

Правильный формат "name@something.com"

Телефон:

Правильный формат "+7-123-4567890"

Сайт:

Правильный формат "http://someaddress.com"

Текст сообщения:

Отправить сообщение

Имя:

Email:

Правильный формат "name@something.com"

Телефон:

Правильный формат "+7-123-4567890"

Сайт:

Правильный формат "http://someaddress.com"

Текст сообщения:

Отправить сообщение

Начнем с первой строки.

class=”contact_form” – указываем класс, для того, чтобы в будущем задать CSS стили.

action=”contact-form.php” – указываем название файла со скриптом, который будет обрабатывать данные формы и осуществлять отправку сообщения. Если файл лежит в той же папке, что и страница с формой, то достаточно указать только название файла, если в другой, то нужно будет указать и путь к файлу.

Дальше идут 4 блока

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

Type – отвечает за тип вводимых данных, text – обычный текст, email – электронный адрес, такие поля автоматически проверяются на правильность (должна присутствовать @), tel – телефон, url – адрес сайта.

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

Placeholder – это подсказка, находящаяся внутри поля, текст, замещающий пустое поле элемента. Ее можно изменить или удалить, на работу формы она не влияет.

Required – этот параметр указывает на то, что поле обязательно для заполнения. Вы можете самостоятельно решить, какие элементы обязательны, а какие нет.

pattern=”(http|https)://.+” – эта конструкция служит для проверки корректности поля веб сайт, указывает на то, что адрес обязательно должен содержать http://текст или https://текст, в противном случае будет ошибка.

Для некоторых полей задана всплывающая подсказка, которая появляется при выборе элемента. Ее задет , где form_hint является классом элемента (его свойства прописываются в CSS). Текст во всплывающей подсказке для каждого поля контактной формы можно задать любой. Если такая фишка вам не нужна – просто удалите весь тег .

Поля для ввода самого сообщения размечается тегом , в котором cols задает количество символов поля в ширину, а rows число строк.<br /><br />Защита от спама – невидимое поле с именем name=bezspama. У него стоит стиль display:none – это значит поле невидимо людям, но боты его будут заполнять на автомате.<br /><br />И завершающий элемент любой формы – кнопка отправки сообщения, она задается тегом <button> </button>, имеющим свой класс для настройки внешнего вида и тип “submit”.<br /><br />Для добавления или удаления полей, достаточно убрать ненужные или вставить новые по аналогии с существующими, прописав для них все свойства и имена.<br />Оформление CSS стилями<br /><br />Если вы посмотрите в браузере на то, что получилось, то увидите нечто корявое и непривлекательное. Для того, чтобы у нас получилась красивая форма обратной связи, придется поработать над ее стилями (html будет недостаточно).<br /><br />Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.<br /><br />Если же вы не знакомы со стилями, то я просто дам вам готовый файл, в котором уже все прописано таким образом, что ваша форма будет идентична той, что в примере.<br /><br />Ссылка на скачивание всех файлов формы в конце статьи.<br /><br />Подключить стили можно двумя способами:<br /><br /> Скопировать содержимое файла в файл style.css, который уже есть на вашем сайте (добавьте в самый конец)<br /> Поместить файл, который я дал, на ваш хостинг и подключить его.<br /><br />Подключаются файлы стилей следующим кодом , размещаемым внутри . Если файл со стилями (styles.css) находится не в одной папке с html страницей, то пропишите полный путь до него.<br /><br />В файле со стилями, который я дал, каждый элемент подписан, поэтому, вы можете вносить в него любые изменения – менять цвета, размеры, форму, эффекты. Владея самыми базовыми знаниями, вы сможете легко его править.<br />Настройка PHP кода (добавлена защита от спама)<br /><br />Как и в случае со стилями, я дам вам готовый код, обрабатывающий HTML форму обратной связи и защищающий от спама. Этот файл адаптирован для конкретной конфигурации и, если вы захотите задать новые поля или удалить существующие, в него придется вносить изменения. Поэтому, я расскажу вам, как он работает, чтобы вы поняли, что нужно менять.<br /><br /> Для сайтов, использующих кодировку windows-1251 и версию php 5.4+, в код нужно будет внести дополнение, связанное с функцией htmlspecialchars. Покажу его ниже. Иначе, вместо кириллицы будут приходить пустые поля.<br /><br />Помните, в свойствах формы (в html файле) мы указывали параметр action=”contact-form.php”. Вам нужно создать файл с названием contact-form.php и поместить в него находящийся ниже код.<br /><br /><br />Первым делом нам необходимо задать переменные, которые будут обрабатываться php кодом. Для того, чтобы не запутаться, присваиваем им такие же имена, как были в самой форме, только начинаются все переменные со знака $. Сама команда присвоения значения имеет такой вид:<br />$название = htmlspecialchars($_POST["название"]);<br />1<br /> <br />$название = htmlspecialchars($_POST["название"]);<br /><br />Если вы добавляли какие-то дополнительные поля данных, то в блоке переменных допишите их имена.<br /><br />Не все переменные мы берем из формы. Как минимум, адрес электронной почты, на который придет письмо (ваш адрес) указывается отдельно. В данном случае это переменная $address – впишите в ее значение свой электронный ящик.<br /><br />Также, в данном примере явным образом задано значение переменной $sub – она будет выдавать тему письма. Можно добавить тему сообщения в HTML форму в виде текстового поля (наподобие name), и брать значение этой переменной оттуда.<br /><br />В блоке формат письма настраивается то сообщение, которое получите вы. Он может отличаться от того, что было написано в поле textarea под названием message. Я просто сделал еще одну переменную $mes и включил в нее дополнительный текст и важные данные отправителя (имя, почту, телефон, сайт). Эту часть вы можете сконфигурировать так, как вам удобно.<br /><br />Дальше идет отправка сообщения.<br /><br />Чтобы получаемые вами письма подписывались именем отправителя, и в них включался их обратный адрес, а не адрес сервера, на котором находится ваш php файл, мы задаем новую переменную $from, в нее включаем имя и электронный ящик отправителя письма.<br /><br />Затем функция mail осуществляет отправку письма по заданным параметрам. В случае успешной отправки появляется сообщение о том, что письмо отправлено, а через 5 секунд пользователя перебрасывает на страницу вашего сайта (адрес страницы и время задержки вы можете изменить). Если письмо отправить не удалось, появляется сообщение, что письмо не отправлено и через 5 секунд идет переход на страницу сайта, аналогичным образом вы можете задать адрес страницы и время.<br />Вставка формы на страницу сайта<br /><br />Для того, чтобы вставить созданную вами форму обратной связи, вам нужно скопировать html код формы и вставить его в ту часть кода страницы, где вы хотите вывести обратную связь для сайта.<br /><br />Еще раз хочу напомнить, если файл с PHP программой находятся не в той же папке, что и страница, на которой размещен html код, то в коде самой формы нужно прописать полный путь к нему, иначе, работать не будет, так как форма не найдет файл обработчик.<br /><br />Скачать файлы контактной формы<br />Активный анти спам с вводом данных в поле<br /><br />Спамеры действуют с помощью различных программных средств и некоторые боты умеют обходить защиту с пустым полем, которая встроена в базовую версию. Если они вас начинают донимать, то можно применить вместо или дополнительно простую защиту со вводом данных в специальное поле. Например, сделать математическое выражение с просьбой ввести ответ или задать какой-либо простой вопрос. Больших изменений в форме это не потребует.<br /><br />Я покажу как изменить код формы и PHP обработчик для использования этого метода антиспама. При желании вы можете не менять защиту с пустым полем, а добавить соответствующие строки в код и у вас будет работать одновременно 2 метода – по идее, должно быть более эффективно.<br /><br />Первым делом нам необходимо добавить поле для ввода и вопрос в HTML код. В качестве основы у нас уже есть строка 25 (input name=“bezspama”). Это поле невидимо. Мы превращаем его в обычное. Для этого всю строку меняем на вот такой блок:<br /><p><br /> <label for="bezspama">2+2*2=:</label><br /> <input name="bezspama" type="text" required="" /><br /></p><br />1<br />2<br />3<br />4<br /> <br /><p><br /> <label for="bezspama">2+2*2=:</label><br /> <input name="bezspama" type="text" required="" /><br /></p><br /><br />Вместо математического выражения 2+2*2 можете ввести любые данные – это визуальный вопрос для пользователя. Из поля input мы убрали стиль display:none и добавили обязательность заполнения.<br /><br />Следующим шагом меняем данные в PHP обработчике, чтобы он делал проверку уже не на пустоту этого поля, а на правильность введенных данных. Проверка у нас делалась в строке 25 выражением empty($bezspama). Мы меняем это выражение и будем делать проверку равенства заполненного поля заранее заданному числу. В моем примере, математическое выражение равно 6, поэтому вся строка будет выглядеть вот так:<br />if ($bezspama==6) /* Проверка математического выражения*/<br />1<br /> <br />if ($bezspama==6) /* Проверка математического выражения*/<!-- Yandex.RTB R-A-263098-42 --> <div id="yandex_rtb_R-A-263098-42"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-263098-42", renderTo: "yandex_rtb_R-A-263098-42", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 336-280 niz ztatia --> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-5249059904040512" data-ad-slot="4568983946"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><!-- Yandex.RTB R-A-263098-5 --> <div id="yandex_rtb_R-A-263098-5"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-263098-5", renderTo: "yandex_rtb_R-A-263098-5", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script><br /><br />В качестве вопроса и ответа вы можете указать любые другие данные, включая текстовые.<br /><br />Для того, чтобы этот вариант защиты использовать в дополнение к изначальному необходимо:<br /><br /> Добавить в HTML код блок для вывода нужного поля, но указать другой идентификатор вместо bezspama;<br /> Добавить в начало PHP обработчика присвоение переменной этого нового идентификатора;<br /> <br />Перед строкой 25, где идет проверка на пустоту переменной bezspama добавить проверку новой переменной на соответствие заданному значению, как описано чуть выше;<br /> После строки с проверкой математического выражения вставить открывающую фигурную скобку “{“, так чтобы следующая команда if стояла после нее;<br /> Перед командой exit вставить еще одну строку с закрывающей фигурной скобкой “}”<br /><br />После всего этого в вашей форме будут работать одновременно обе защиты от спама.<br /><br />Частые проблемы и их решение<br /><br />Читатели часто задают вопросы, если что-то не выходит, наиболее частый проблемы и их решения буду публиковать в этом разделе.<br /><br />Иероглифы при кодировке windows-1251<br /><br />Теперь об особенностях использования кодировки сайта windows-1251. Если у вас такой случай, то указанная выше строчка должна дополниться еще двумя параметрами для функции htmlspecialchars – ENT_COMPAT, ‘cp1251’. Выглядеть это будет вот так:<br />$название = htmlspecialchars($_POST["название"], ENT_COMPAT, 'cp1251');<br />1<br /> <br />$название = htmlspecialchars($_POST["название"], ENT_COMPAT, 'cp1251');<br /><br />Не приходят письма с некоторых или всех ящиков<br /><br />Часто встречается ситуация, когда письма не приходят, хотя сообщение об успешной отправке появляется. Это означает, что хостинг функцию mail, отправляющую письмо, выполнил, а почтовый сервер получателя письмо не принял, посчитав его поддельным. Возникает это вследствие того, что сервер отправки сообщения не совпадает с сервером, указанным в адресе отправителя (стр. 28 переменная $from).<br /><br />Чтобы заработало в этой строчке удаляем часть кода с назначением адреса отправителя, получается вот так:<br />$from = "Reply-To: $email rn";<br />1<br /> <br />$from = "Reply-To: $email rn";<br /><br />В такой конфигурации в заголовке письма не будет указываться адрес отправителя, но его данные вы получите внутри сообщения. Ответ на сообщение будет работать как положено – на адрес отправителя.<br /><br />Создаем форму обратной связи на html<br /><br />Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас.<br /><br />Вставляем в нужное место на сайте следующий код:<br /><br /><div id="inline"><br /><h2>Онлайн заявка</h2><br /><form id="contact" method="post" name="contact"><br /><input id="name" class="txt" name="name" type="name" placeholder="Ваше имя" /><br /><input id="phone" class="txt" name="phone" type="phone" placeholder="Ваш телефон" /> <br /><input id="email" class="txt" name="email" type="email" placeholder="Ваш e-mail" /> <br /><textarea id="msg" class="txtarea" name="msg" placeholder="Ваше сообщение:">
Отправить

Рейтинг:(голосов:1)