Ajax-форма заказа обратного звонка

Опубликовано Опубликовано в рубрике Веб-разработка, Советы

На 99% сайтов, предлагающих услуги, есть кнопка или форма с наименованием «Заказать обратный звонок».

Часто эта функция реализована при помощи сторонних сервисов, которые берут плату за обслуживание.

Сегодня мы рассмотрим скрипт простой формы заказа обратного звонка, которая отправляет данные на Ваш E-Mail.

Ну, не совсем простой — она по-умолчанию открывается в модальном (всплывающем) окне и обрабатывает отправку без перезагрузки страницы.

Пример можно посмотреть на одном из сайтов, который я делал — ГК-ИСКЕНДЕР.РФ На нем использованы два варианта использования размещения формы — в модальном окне и непосредственно на странице.

Форма имеет такие отличительные особенности:

  • открытие во всплывающем окне (можно разместить и просто на странице)
  • затемнение экрана
  • ajax-обработка и вывод сообщения об отправке/ошибке без перезагрузки
  • автоматическое закрытие сообщения об отправке

Итак, приступим.

1. Нажимаем кнопку «Купить», оплачиваем символические 100 руб.

kupit

2. Распаковываем архив и открываем файл mail.php

3. Находим в файле mail.php адрес Alexey@Starogorodtsev.Com и меняем его на свой — тот, на который Вы хотите получать оповещения. Сразу замечу, что при тестировании письма с сервера часто не приходят на бесплатные почтовые ящики (mail.ru, yandex.ru, rambler.ru и т.д.), так что лучше подключайте ящик со своего сервера.

4. Открываем index.html

5. Находим там кусок кода

<!-- Hidden Required Fields -->
<input type="hidden" name="project_name" value="Alexey Starogorodtsev">
<input type="hidden" name="form_subject" value="Заявка с сайта">
<!-- END Hidden Required Fields -->

и меняем в нем имя отправителя project_name и тему form_subject.

6. Все сохраняем и загружаем на сервер.

7. Меняем стили по своему усмотрению. Файлы стилей в папке css

Это если Вы хотите просто форму поставить ))

Ну а если Вы хотите форму вписать в сайт, то:

1. Возьмите строки

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- (если еще нет такой в коде. Если уже есть, то не вставляйте эту строку) --!>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/common.js"></script>

и вставьте их перед тегом </body>

2.Теперь возьмите строки

<div style="width:40%; min-width: 300px; float:left; border:0px solid #000; min-height:300px; margin-top: 52px;">
<form class="popup-form callback zoom-anim-dialog" id="callback">
<div class="success"><p><span class="sencs">Спасибо за заявку!</span><br><br>Наши менеджеры свяжутся с Вами в ближайшее время.</p></div>

<!-- Hidden Required Fields -->
<input type="hidden" name="project_name" value="Alexey Starogorodtsev">
<input type="hidden" name="form_subject" value="Заявка с сайта">
<!-- END Hidden Required Fields -->

<h1 style="font-size:36px; margin-bottom: 25px;">ОСТАВЬТЕ ЗАЯВКУ</h1>
<label>

<input type="text" name="Имя" placeholder="Ваше имя">
</label>
<label>
<br/>
<br/>
<input id="phone" type="text" name="Телефон" placeholder="Телефон" required="required">
</label>
<br/>
<br/>
<div class="button-center">
<button class="button" >ОТПРАВИТЬ</button>
</div>
<br/>
<br/>
</form>
</div> 

отредактируйте их так, как выше описано и вставьте в нужных местах страницы

Можете поменять, к примеру скорость анимации. Для этого откройте файл js/common.js , найдите в нем строку removalDelay: 300, (в моем примере она 10-я) и вместо 300 поставьте свое значение.

Еще можно убрать в файле index.hml стиль блока hidden (или лучше весь div убрать) и тогда форма просто полностью отобразится на странице.

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

Если есть вопросы — добро пожаловать в комментарии.

Партнерам (если хотите заработать на продаже этого скрипта)

 

Подождите, промокоды загружаются

РАССКАЖИТЕ ДРУЗЬЯМ



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

Ваш e-mail не будет опубликован. Обязательные поля помечены *