Форма захвата контактов

Форма захвата контактов

by lohmach

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

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

Демо - форма захвата контактов

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

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

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

Скачать архив

Теперь, когда вы забросили папку с файлами формы в корень своего сайта, самое время подцепить всякие библиотеки, стили и скрипты. Делать это лучше всего между тегами <head></head> в файле header.php вашего шаблона. Следует учесть, что библиотека JQuery с очень большой вероятностью уже задействована на вашем сайте, поэтому вставляйте эту строку только при необходимости. Это же касается и фреймворка Bootstrap. Подключайте его лишь в том случае, если дизайн формы отличается от того, что вы видели в примере.

<!-- Подключаем Bootstrap, иконочный шрифт и стили для формы -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="/capture-form/main.css">

<!-- Подключаем библиотеку JQuery, плагин для создания маски номера телефона и скрипт, обслуживающий форму -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="/capture-form/jquery.maskedinput.min.js"></script>
<script src="/capture-form/main.js"></script>

На этом можно считать все подготовительные работы завершенными, а значит, сейчас требуется сделать самое главное - добавить HTML-код нашей формы на сайт. Если вы желаете выводить ее на всех страницах вашего ресурса, то, полагаю, лучше сделать это в файле footer.php текущего шаблона сразу перед закрывающим тегом </body>.

<div class="chatForm" id="chatForm">
	<div class="chatForm-icon" id="chatForm-icon">
		<i class="fas fa-comment-dots"></i>
	</div>
	
	<div class="chatForm-wrapper" id="chatForm-wrapper">
		<div class="chatForm-close" id="chatForm-close">
			<span><i class="fas fa-times"></i></span>
		</div>
		
		<form action="#" method="post">
			<div id="out" class="chat-out">
				<div class="message-line-auto message-greeting">
					<p>Мы онлайн по рабочим дням с 10:00 до 23:00 по московскому времени. Оставьте сообщение - мы ответим Вам на почту.</p>
				</div>
				<div class="message-line-auto message-autoreply">
					<div class="message-item-auto">
						<p>Введите ваши данные и мы свяжемся с вами</p>
						<div class="form-field form-field--name">
							<input type="text" id="userName" name="userName" placeholder="Ваше имя">
						</div>
						<div class="form-field form-field--phone">
							<input type="text" class="phone" id="phone" name="userPhone" placeholder="Ваш телефон">
						</div>
						<div class="form-field form-field--email">
							<input type="text" id="userEmail" name="userEmail" placeholder="Ваш email">
						</div>
						<div class="form-field form-field--submit">
							<p>Нажимая кнопку "Отправить", я принимаю условия <a href="#">пользовательского соглашения</a></p>
							<input type="submit" id="submit" value="Отправить">
						</div>
					</div>
				</div>
				<div class="message-line-auto message-autoreply-data-sent">
					<div class="message-item-auto">Спасибо, мы с вами свяжемся!</div>
				</div>
			</div>
			
			<div class="form-send-block show">
				<div class="form-field form-field--message">
					<textarea name="message" placeholder="Сообщение" id="userMessage"></textarea>
					<button class="btn send-message" id="sendMessage">
						<i class="fas fa-paper-plane"></i>
					</button>
				</div>
			</div>
		</form>
	</div>
</div>

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

Что ж, давайте с этого и начнем. Вписать свой email можно на 12 строке файла sender.php вместо "youremail@mail.ru". Впрочем, необходимые пояснения я также добавил в сам документ.

Далее рассмотрим файл main.js, здесь производятся основные настройки:

  • На 31 строке происходит подгрузка звукового файла (sound.mp3). Воспроизведение срабатывает в момент автоматического разворачивания формы. Из-за политики компании "Google" браузеры на движке Blink (Chrome, Opera, Яндекс.Браузер и пр.) не воспроизводят звук автоматически при переходе на ваш сайт с других ресурсов. Однако, проигрывание срабатывает в случае прямого обращения к сайту или при осуществлении внутренних переходов.
  • На 35 строке можно задать время задержки автоматического разворачивания формы (указывается в миллисекундах). Если вы не хотите, чтобы форма раскрывалась самостоятельно, следует удалить или закомментировать фрагмент кода с 21 по 39 строку.
  • На 38 строке происходит создание куки с периодом существования в 14 дней. Нужно это для того, чтобы запомнить пользователя и не допустить автораскрытия формы для одного и того же посетителя при переходах по страницам вашего сайта. Сейчас эта строка неактивна. Я рекомендую раскомментировать ее, чтобы не свести клиента с ума.
  • Ну и последнее: на 202 строке устанавливается задержка, в течение которой пользователь будет наблюдать сообщение об успешной отправке своего месседжа, после чего форма автоматически закроется и обновится.

Другие пояснения по ключевым функциям я внес в файл main.js.

Если вы решите разместить папку с формой не в корневой директории сайта, то еще вам потребуется изменить некоторые пути к рабочим файлам. Сделать это необходимо в строках, подключающих документы main.css, jquery.maskedinput.min.js и main.js. Также изменения должны коснуться 31 и 179 строк в файле main.js.

А сейчас, когда вы познали одну из главных тайн маркетинга и умеете добывать контакты клиентов, я, пожалуй, откланяюсь. Моя любимая Лохмачиха приготовила вкуснейшую гречку с сосисками. Если у вас возникнут вопросы, затруднения или иные поводы написать в комментариях - не стесняйтесь, я поделюсь с вами авторитетным мнением.

Добавить комментарий