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

Готовим страницу с формой

Возь­мём стан­дарт­ный шаб­лон стра­ни­цы и напол­ним его сти­ля­ми и кодом для фор­мы.

Шаблон страницы

    language: HTML
      
  

Ско­пи­ро­вать код
Код ско­пи­ро­ван

Про­пи­шем CSS-стили, что­бы наша стра­ни­ца выгля­де­ла опрят­но. Забе­жим немно­го впе­рёд и исполь­зу­ем в сти­лях раз­де­лы input и textarea:

    language: CSS
      
  

Ско­пи­ро­вать код
Код ско­пи­ро­ван

Что­бы сде­лать фор­му на стра­ни­це, мы будем исполь­зо­вать такие теги:

— для вво­да име­ни, почты для свя­зи и темы пись­ма. Они зани­ма­ют одну стро­ку, нам это­го доста­точ­но.

— здесь будут писать само сооб­ще­ние, поэто­му нуж­но будет сде­лать это поле поболь­ше и поши­ре.

Ещё мы вос­поль­зу­ем­ся тегом — он мыс­лен­но соби­ра­ет наши поля в одну фор­му и помо­га­ет управ­лять ими из одно­го места. У каж­дой фор­мы есть свой метод, по кото­ро­му она рабо­та­ет с дан­ны­ми. Фор­ма может или отправ­лять дан­ные (post), или полу­чать их (get). Так как нам надо отпра­вить сооб­ще­ние в PHP-скрипт, будем исполь­зо­вать метод post. Сра­зу про­пи­шем путь к скрип­ту на сер­ве­ре — по это­му адре­су мы зальём нуж­ный файл на сле­ду­ю­щем эта­пе. Этот скрипт, кото­рый мы поз­же напи­шем, и есть обра­бот­чик фор­мы.

Офор­мим всё в виде кода:

    language: HTML
      
  

Ско­пи­ро­вать код
Код ско­пи­ро­ван

У нас уже есть фор­ма, но она пока не рабо­та­ет. Сей­час это испра­вим.

Установка готовой бесплатной формы обратной связи на сайт

Итак, на одном сайтов установлена вот такая «кнопка»:

Если нажать на нее, вниз «выпадет» форма обратной связи:

На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:

А вот что придет вам на почту, после того как пользователь оставит свои контактные данные в форме:

Очень удобно. Вот код для работы формы как в первом случае:

div id=»form»>p>a style=»text-decoration: none; border-bottom: 1px dotted; cursor: pointer;» id=»forma0″>Заказать звонокa>/p>div id=»forma1″ style=»display:none; background-color: #fff;»>script src=»sendmailforms/jquery.maskedinput-1.2.2.min.js» type=»text/javascript»>/script>link rel=»stylesheet» type=»text/css» href=»sendmailforms/form.css» >script src=»sendmailforms/wait_for_call.js» type=»text/javascript»>/script>script src=»sendmailforms/ajaxupload.js» type=»text/javascript»>/script>script src=»sendmailforms/upload_file.js» type=»text/javascript»>/script>div class=»call-me-form» title=»Заказать звонок» button=»Заказать звонок» style=»width: 200px»>/div>div>script>
$(«#forma0»).toggle(function() {
$(«#forma1»).slideDown(«slow»);
}, function() {
$(«#forma1»).slideUp(«slow»);
});script>div>

Расшифровываю: в скрытом div-блоке подгружается скрипт и все что с ним связано, этот блок при помощи JavaScript открывается и все — можно оставлять свои данные. Преимущество такого подхода — пользователю не нужно ждать, пока там что-то подгрузится еще.

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

Приведу содержимое конфиг-файла

Все! Больше ничего нет, остальное (стили) — вручную. Но они и так везде вручную. При этом форма использует Ajax, выводит сообщения об ошибке, а еще можно задать свою собственную маску номеров. Вот скриншоты:

После отправки номера, пользователю увидит ваше сообщение, которое также можно задать.

Это проверенное решение, которым я вполне доволен. Я нашел в этом скрипте для себя несколько преимуществ:

1. Он присылает URL страницы, с которой была отправлена заявка через форму.

2. На одной странице может быть несколько таких форм обратной связи и они никак не будут конфликтовать друг с другом.

3. Форма подгружается не PHP-кодом, а div-блоком — это упрощает ее вставку в любое место сайта на порядок. Можно даже в тексте вставлять, если умеете.

И он тоже позволяет загружать файл, то есть ничем не уступает.

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

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

Область для ввода сообщения

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

Стили я уже добавил в ‘style.css’, так что теперь наша форма выглядит так:

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

Для этого перейдем в файл ‘config.php’ и укажем ‘true’ в константе, отвечающей за это текстовое поле.

	// Текстовое поле
	const TEXTISREQUIRED = true;
	const MSGSTEXTERROR = "Поле обязательно для заполнения";

Теперь наше текстовое поле стало обязательно для заполнения. В файле ‘valid.php’, по аналогии с другими полями напишем такую проверку:

if (isset($_POST) ) {
        if(empty($_POST) && TEXTISREQUIRED) {
            $msgs = MSGSTEXTERROR;
        } else {
            if (!empty($_POST)) {
                $text = "Сообщение:  " . trim(strip_tags($_POST)) . "";
            }
        }
    }

Обратите внимание на ‘text’ в проверке POST запроса. Этот то самое значение, которое указывали в параметре ‘name’ у тега ‘textarea’

В файле ‘mail.js’ сохраним ‘div’ в который будем выводить ошибку, если валидатор ее вернет для текстового поля:

// Сохраняем в переменные дивы, в которые будем выводить текст ошибки
let inpNameError = $(this).find('.contact-form__error_name');
let inpEmailError = $(this).find('.contact-form__error_email');
let inpTelError = $(this).find('.contact-form__error_tel');
let inpTextError = $(this).find('.contact-form__error_text');

А затем, ниже, напишем проверку:

if (respond.text) {
 inpTextError.text(respond.text);
} else {
 inpTelError.text('');
}

По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную ‘$text’ в тело письма. Делается это в файле ‘mail.php’ в 34 строке, той самой, о которой я уже упоминал выше.

$mail->Body = "$name $tel $email $text";

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

Инструкция по созданию формы на QForm

Чтобы продемонстрировать удобство сервиса, поэтапно разберем процесс создания формы обратной связи. Допустим, нужен простой вариант с 4 полями, согласием на обработку персональных данных и кнопкой «Отправить».

Добавляем новую форму и даем название для собственного удобства. Щёлкаем Редактировать и переходим к настройкам.

Настраиваем параметры формы

Работаем с вкладкой Основные параметры формы. Ставим галочку активности, и если требуется дополнительная защита от спама, добавляем галочку в пункте ИСПОЛЬЗОВАТЬ Google ReCAPTCHA. В этом случае на странице «Общие настройки» сайта (в разделе Google ReCAPTCHA) задаем необходимые для взаимодействия параметры — ключ сайта и секретный ключ, получаемые на сайте сервиса ReCaptcha.

Возвращаемся в ОСНОВНЫЕ ПАРАМЕТРЫ ФОРМЫ. Справа система выдаст 2 кода: 1-й размещается в разделе сайта Head, 2-й в месте, где форма должна показываться (в контенте, в конце или начале страницы, в футере и т.д.). Но продолжим работу с настройками.

Задаём поля формы

Переходим в раздел Поля формы. Добавляем новое поле и задаем имя — Name, выбираем тип поля text, в placeholder прописываем подсказку для пользователя внутри поля. В нашем случает это — «Ваше имя». Ставим галочку «Обязательно для заполнения».

Затем добавляем поле для телефона. В placeholder прописываем «Ваш телефон», в имени поля – Phone и выбираем тип поля Phone. Если требуется настройка интеграции с телефонией, то переходим в соответствующий раздел и настраиваем.

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

Чтобы пользователь мог сопровождать свои заявки комментариями, нужно создать текстовое поле с типом textarea, в имени прописать message, а в плейсхолдере — Сообщение.

Последнее поле (обязательное для любой формы) — кнопка ОТПРАВИТЬ: прописываем имя поля, например send, выбираем тип submit, в placeholder добавляем название кнопки. Перед кнопкой встраивается ссылка на соглашение об обработке персональных данных, которое мы создаем в разделе Соглашения. По умолчанию уже прописано типовое соглашение, которое можно отредактировать. Сохраняем изменения и переходим в следующую вкладку.

Определяемся с дизайном

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

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

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

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

Соглашение о персональных данных

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

Java-Script события

Если есть потребность отслеживать статистику по обращениям (а она почти всегда есть), мы можем настроить отправку целей в систему аналитики Яндекса или Google во вкладке JavaScript-события. Шаблоны кода для отправки указаны на этой же странице, останется только подставить в код номер счётчика и имя событий. Эту же вкладку можно использовать для выполнения любого другого Java-script кода, например JS-редирект на другую страницу вашего сайта.

Завершив настройку формы, устанавливаем коды из первой вкладки в раздел Head и на нужной странице сайта. Вот что в итоге у нас получилось! Создание формы обратной связи заняло примерно 5 минут, а в первый раз займёт не более 10. 

Назад на главную

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

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

Больше на эту тему можно почитать в статье с вредными советами, которые помогут испортить ваш landing page.

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

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

Давайте, кратко объясню, что тут к чему. В теге ‘form’ я размещаю два параграфа. В одном будет заголовок формы, а второй послужит для вывода сообщений и уведомлений, возникающих при отправке формы. Например, о том, что сообщение успешно отправлено в варианте, когда все происходит без перезагрузки.

Под каждым полем создаю ‘div’ для вывода уведомлений об ошибках при валидации ‘.contact-form__error’.

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

Далее, для простоты работы с js воспользуемся jQuery. Подключаем его, как обычно, перед всеми скриптами, которые зависят от него. Я, обычно, делаю это ближе к закрывающему тегу ‘body’, чтобы основной контент грузился быстрее.

Скрипт ‘mail.js’ — это файл формы, который помогает в отправке и обработке ответа сервера. О нем чуть позже. Сейчас нужно познакомить вас со структурой всех файлов, отвечающих за отправку.

Конструкторы создания форм

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

Плюсы конструкторов форм:

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

Минусы конструкторов фом:

• исходный код формы хранится на стороннем сервере и вы не сможете скачать полностью код, если захотите
• не во всех конструкторах форм можно подключить свои скрипты и дополнительные сервисы, например, CRM, Google Analytics и т.п.

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

Вот несколько самых популярных конструкторов для создания форм:

Работаем с полями формы

Добавляем тип поля text, в имени поля прописываем Name, в плейсхолдере –  ФИО, ставим галочку рядом с ОБЯЗАТЕЛЬНО ДЛЯ ЗАПОЛНЕНИЯ и сохраняем изменения.

Создание поля для имени

Добавляем тип поля Phone, в имени поля прописываем то же самое, в плейсхолдере – ТЕЛЕФОН, ставим галочку рядом с ОБЯЗАТЕЛЬНО ДЛЯ ЗАПОЛНЕНИЯ, выбираем интеграцию с облачной АТС Beeline, на звонок ответит менеджер и прописываем номер телефона менеджера. Настройки интеграции производятся в соответствующем разделе.  

Создаём поле для номера телефона (phone)

Добавляем тип поля select, в имени прописываем city, в плейсхолдере – Выберите город, отмечаем галочкой ОБЯЗАТЕЛЬНО ДЛЯ ЗАПОЛНЕНИЯ и добавляем нужное количество значений списка. Рядом с value прописываем код значения, напротив text  – название города. Сохраняем изменения.

Настраиваем выбор города через поля формы

Добавляем тип поля radiobutton, в имени прописываем sex, в плейсхолдере – Выберите пол. Так как поле необязательное, галочку не ставим. Добавляем 2 значения списка, прописываем value (man и women) и text (Мужчина/Женщина).  Изменения сохраняем.

«Радио» кнопка, выбор из нескольких вариантов

Добавляем тип поля submit, в имени прописываем send, в плейсхолдере – Отправить заявку. Перед кнопкой встраивается ссылка на соглашение об обработке персональных данных, которое мы создаем в разделе «Соглашения». По умолчанию уже прописано типовое соглашение, которое можно отредактировать.

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

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

В случае, если ваш сайт работает на движке wordpress, вы можете использовать специальные плагины для добавления контактной формы. Один из лучших плагинов Contact Form 7. Скачать его можно с официального сайта, либо через админку в разделе Плагины.

После активации плагина в левом меню появится новая вкладка. Открываете ее и нажимаете Add New.

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

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

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

Затем проверяем, отображается ли форма на странице и корректно ли работает. Для этого, достаточно будет просто перейти на страницу, где вставили код. У вас должна появиться вот такая форма:

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

Отправка формы

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

<?php // mb_internal_encoding("UTF-8");
// ini_set('error_reporting', E_ALL);
// ini_set('display_errors', 1);
// ini_set('display_startup_errors', 1);

	use PHPMailer\PHPMailer\PHPMailer;
	if ($_SERVER == "POST") {

		require_once($_SERVER . '/mail/phpmailer/phpmailer.php');
		require_once($_SERVER . '/mail/php/config.php');
		require_once($_SERVER . '/mail/php/valid.php');

		if(defined('HOST') && HOST != '') {
			$mail = new PHPMailer;
			$mail->isSMTP();
			$mail->Host = HOST;
			$mail->SMTPAuth = true;
			$mail->Username = LOGIN;
			$mail->Password = PASS;
			$mail->SMTPSecure = 'ssl';
			$mail->Port = PORT;
			$mail->AddReplyTo(SENDER);
		} else {
			$mail = new PHPMailer;
		}

		$mail->setFrom(SENDER);
    $mail->addAddress(CATCHER);
    $mail->CharSet = CHARSET;
    $mail->isHTML(true);
		$mail->Subject = SUBJECT;
		$mail->Body = "$name $tel $email"; 
		if(!$mail->send()) {
    } else {
      echo json_encode($msgs);
    }
	
	} else{
          header ("Location: /"); // главная страница вашего лендинга
	}

Но еще раз напомню, что чуть ниже мы будем добавлять в форму и другие поля, а там изменяться и все эти файлы. Файлы phpmailer — это вспомогательная библиотека для правильной отправки данных на почту. Там ничего трогать нельзя.

Также, в отправке формы и валидацие участвует файл ‘mail.js’. Именно он помогает реализовать отправку без перезагрузки страницы. Тут тоже ничего менять не нужно, если вы не планируете использовать страницу благодарности, а вам достаточно того, что уведомление об успешной отправке выводится в форме.

(function ($) {
$(".contact-form").submit(function (event) {
event.preventDefault();

	// Сохраняем в переменную form id текущей формы, на которой сработало событие submit
	let form = $('#' + $(this).attr('id'));

	// Сохраняем в переменные дивы, в которые будем выводить текст ошибки
	let inpNameError = $(this).find('.contact-form__error_name');
	let inpEmailError = $(this).find('.contact-form__error_email');
	let inpTelError = $(this).find('.contact-form__error_tel');

	// Сохраняем в переменную див, в который будем выводить сообщение формы
	let formDescription = $(this).find('.contact-form__description');

	let fd = new FormData(form);
	$.ajax({
		url: "/mail/php/mail.php",
		type: "POST",
		data: fd,
		processData: false,
		contentType: false,
		success: function success(res) {
			let respond = $.parseJSON(res);

			if (respond.name) {
			 inpNameError.text(respond.name);
			} else {
			 inpNameError.text('');
			}

			if (respond.tel) {
				inpTelError.text(respond.tel);
			} else {
				inpTelError.text('');
			}

			if (respond.email) {
				inpEmailError.text(respond.email);
			} else {
				inpEmailError.text('');
			}

			if (respond.attantion) {
				formDescription.text(respond.attantion).css('color', '#e84a66').fadeIn();
			} else {
				formDescription.text('');
			}

			if (respond.success) {
				formDescription.text(respond.success).fadeIn();
				setTimeout(() => {
					formDescription.fadeOut("slow");
				}, 4000);
				setTimeout(() => {
					formDescription.text('');
				}, 5000);
			}
		},
	});
});
}(jQuery));

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

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

Размер:
1.4 Мб

Скачать исходник

Стили специально не добавлял в статью, так как статья и так очень большая. В исходнике все есть.

Пишем обработчик формы на PHP

Когда мы запол­ним и отпра­вим фор­му на нашей стра­ни­це, про­изой­дёт сле­ду­ю­щее:

1. Бра­у­зер собе­рёт вве­дён­ные нами дан­ные и ском­по­ну­ет таким обра­зом, что­бы их мож­но было пере­дать в про­грам­му на PHP. Как бы упа­ку­ет в посыл­ку.
2. В нашей PHP-программе мы смо­жем полу­чить доступ к этим дан­ным, как бы засо­сать их в память и хра­нить в пере­мен­ных. Мож­но пред­ста­вить, что мы рас­па­ку­ем посыл­ку и смо­жем поль­зо­вать­ся её содер­жи­мым.
3. Скрипт PHP что-то сде­ла­ет с полу­чен­ны­ми дан­ны­ми, а потом выплю­нет поль­зо­ва­те­лю какой-то ответ. Этот ответ будет отоб­ра­жён в виде веб-страницы в бра­у­зе­ре.

Логи­ка рабо­ты PHP-программы будет такая:

• полу­ча­ем зна­че­ния пере­мен­ных из тех дан­ных, кото­рые полу­чил обра­бот­чик;
• гото­вим сооб­ще­ние, где ука­жем все поля в фор­ме;
• отправ­ля­ем это сооб­ще­ние и смот­рим на резуль­тат выпол­не­ния функ­ции отправ­ки;
• если пись­мо ушло по нуж­но­му адре­су — пишем, что всё хоро­шо, если нет — гово­рим, что что-то не так;
• через 10 секунд после выво­да сооб­ще­ния авто­ма­ти­че­ски пере­хо­дим на сайт «Кода»

    language: PHP
      
  

Ско­пи­ро­вать код
Код ско­пи­ро­ван

Делаем всплывающую форму обратной связи для wordpress

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

1. Всплывающую форму, описанную выше в статье, просто прикручиваем ее не к html сайту, а к движку.
2. Форму, созданную через плагин всплывающей формы Contact Form 7, внеся небольшие доработки.

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

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

<?php echo do_shortcode(''); ?>

Давайте разберемся что есть что:

• Ссылка, имеющая id=”callme-open” при нажатии на которую, наша форма будет открываться. Обратите внимания, что эту ссылку нужно вставить не после открытого тега, а в то место, где вы хотите, чтобы эта кнопка располагалась. Обычно ее добавляют в правый угол шапки, рядом с телефоном вашей компании.
• Блок bg-b будет создавать затемненный фон сайта, когда всплывающая форма будет открыта.
• Блок callme будет содержать саму форму обратной связи.
• X – это будет наш крестик в углу форму, при клике на которую форма будет закрываться.
• Ну и php код, в котором будет запускаться шорткод плагина Contact Form 7.

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

.bg-b {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background:rgba(51,51,51,0.55);
  z-index:1000;	
}
body {
 position:relative;
}
.callme {
  position:fixed;
  top:30%;
  left:50%;
  width:300px;
  margin-left:-150px;
  z-index:1100;
  background:#fff;
  padding:20px 20px 10px;
  border-radius:4px;
}
.callme small {
  position:absolute;
  right:10px;
  top:10px;
  font-size:15px;
  cursor:pointer;
}

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

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

Остались последние штрихи и всплывающая форма на wordpress будет готова. Добавьте классам .callme и .bg-b стиль display:none. Это необходимо для того, чтобы форма не появлялась на экране при запуске сайта.

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

UPDATE 06.06.2018

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

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

UPDATE 04.07.2018

По многочисленным просьбам, форма обратной связи была модернизирована. Теперь в ней учтена установка галочки на согласие об отправке данных согласно законодательству РФ № 152-ФЗ «О персональных данных», доработана адаптивность под любые разрешения экранов, сжаты js и css файлы.

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

Переброс на страницу благодарности

Как и говорил в начале статьи данная форма может работать как без перезагрузки, так и с перебросом на страницу благодарности. Давайте реализуем это. Нам понадобится немного подправить код в файле ‘mail.js’ и сама страница благодарности. На скриншоте со структурой проекта вы видели файл ‘thank-you-page.php’ — это и есть страница благодарности, которую я буду использовать. Как вы могли заметить, он лежит в корне. У вас она может быть где угодно, главное правильно указать к ней путь.

Итак, открываем файл ‘mail.js’, находим участок кода:

if (respond.success) {
   formDescription.text(respond.success).fadeIn();
   setTimeout(() => {
	formDescription.fadeOut("slow");
   }, 4000);
   setTimeout(() => {
	formDescription.text('');
   }, 5000);
}

И заменяем на:

if (respond.success) {
  window.location.replace("/thank-you-page.php?status=success"); 
}

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

Делать мы это будем при помощи php, поэтому убедитесь, что страница благодарности у вас сохранена именно в этом формате.

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

 if ($_GET == 'success') { ?>




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

		

Страница благодарности

Оформляйте как вам будет угодно

Вернуться на главную

} else {
header («Location: /»); // главная страница вашего лендинга
} ?>

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

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

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

Если вам важен такой функционал, то раскомментируйте ее и настройте приемлемое время.