Заказать обратный звонок для сайта

Добрый день! Сегодня я приготовил для вас интересную информацию о скрипте заказа звонка, возможно вы уже с ним знакомы, а для тех, кто слышит о нем в первый раз, рассказываю – этот скрипт позволяет легко добавить на свой сайт форму заказа обратного звонка. Если у вас интернет магазин или сайт где необходима онлайн поддержка клиентов, то этот скрипт позволяет быстро наладить связь с потенциальным клиентом. Сама работа данного формы заказа звонка, очень проста в архиве присутсвует два файла index.html  и mail.php  Но это первоначальный вариант и его еще можно исправлять и допиливать. Скачать архив с помощью которого вы сможете заказать звонок для сайта.  Немного опишу что и как с ним нужно сделать для того что бы у Вас на сайте отобразилась форма заказа обратного звонка. Разархивируем все что там есть в отдельную папку, открываем на редактирование файл mail.php – там прописываем свою почту вместо [email protected], для того что бы увидомления приходили к вам, после заполнения формы, и скрипт заказа звонка отправляет вам письмо.

Чтобы установить форму заказа обратного звонка на свой сайт скачайте скрипт, распакуйте его в заранее созданную папку call-me в корневой директории вашего сайта.  Теперь остается лишь добавить в любое место файла index вашего шаблона  или страницы между тегом <body> следующий код:

<style>
 .b1{
  border:1px solid #D3D3D3;
  border-radius:6px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:11px;
  padding:10px 8px;
color:#7C7C7C;
}
.b2{
 
  box-sizing:border-box;
  margin-left: 190px;
    font-family:inherit;
  margin-top: -15px;
  color:#7C7C7C;
}
 .b3{
  border:1px solid #D3D3D3;
  border-radius:6px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:15px;
  padding:10px 8px;
  background-color: #24B419;
  color: white;
width: 220px;
}
 
.b4 {
  border:1px solid #D3D3D3;
  border-radius:6px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:15px;
  padding: 10px 10px 10px 10px ;
color:#7C7C7C;
width: 220px;
height: 100px;
}
 
 
#mail {visibility: hidden;}
#mail:checked ~ #popup form {visibility: visible;}
#mail:checked + label {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 99;
  background: #333333;
  cursor: pointer;
  opacity: 0.5;
}
#popup {
  visibility: hidden;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 100;
}
#popup form {
font-family: "Lucida Grande", Tahoma; 
font-size: 11px;
  position: absolute;
  top: 50%; left: 50%;
 -ms-transform: translate(-50%, -50%); -webkit-transform: 
translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center;
  font-size: 16px;
  color:#3b5998;
  background: #fff;
  border-radius: 10px;
  width: 240px;
  padding: 10px 10px 10px 10px ;
}
#popup div:nth-of-type(1) {padding-top: 3%;}
#popup div:nth-last-of-type(1) {padding: 1% 0 4%;}
#popup div:after {
  content: attr(data-title);
  display: block;
  font-size: 50%;
  font-weight: normal;
  text-shadow: none;
}
#popup input {font-size: 100%;}
#popup [type='submit'] {cursor: pointer;}
#popup label:hover {
  color: #dbeaf9;
  cursor: pointer;
}
</style>  
   
<input type="checkbox" id="mail"/><label for="mail" style="cursor: pointer;">
<img src="call-me/callme.png" alt="Заказать звонок"></label> 
 
<div id="popup">
<form method="post" action="call-me/mail.php">
<label for="mail" title="Отменить" class="b2">?</label>
<div style=" text-align: center; font-size: 18px; margin-top: -25px; 
color:#637bad;">Заказать звонок 
</div>
</br>
<div data-title="" style=" clear:both; display:block; font-size:14px; 
color:#637bad;">
<div style=""><input size="30.5" class="b1" type='text' name='name' 
required value='Имя'/
onfocus="if (this.value=='Имя') this.value='' "
onblur="if (this.value==''){this.value='Имя'}"
>
</div>
</div>
</br>
<div style="margin-left:0px;">
<input size="3" class="b1" type="kod" name='kod' required maxlength="11" 
value='Код*'"/
onfocus="if (this.value=='Код*') this.value='' "
onblur="if (this.value==''){this.value='Код*'}"
>
<input size="16" class="b1" type="tel" name='tel' required maxlength="11" 
value='Телефон*'"/
onfocus="if (this.value=='Телефон*') this.value='' "
onblur="if (this.value==''){this.value='Телефон*'}"
>
</div>
<div>
</br>
<div data-title="" style=" clear:both; display:block; font-size:14px; 
color:#637bad;">
<div style=""><input size="30.5" class="b1" type="vremya" name='vremya' 
required maxlength="11" value='Удобное время звонка'"/
onfocus="if (this.value=='Удобное время звонка') this.value='' "
onblur="if (this.value==''){this.value='Удобное время звонка'}" 
>
</div>
</div>
</br>
<textarea class="b4" type="dopinfo" name='dopinfo'  cols="28" rows="10" 
aria-invalid="false"
onfocus="if (this.value=='Доп. информация') this.value='' "
onblur="if (this.value==''){this.value='Доп. информация'}" 
>Доп. информация</textarea>
</br>
</br>
</br>
<div style=""><input class="b3" type='submit' value='Заказать'/></div>
</form>
</div>
</div>




После вставки кода форма должна работать без сбоев.

В разных ЦМС есть возможность установки блока в php или в html виде, так вот Вам так и нужно установить данный код, после чего вы сможете протестируйте её работоспособность сделав тестовый запрос. Если вы правильно заполнили форму заказа звонка,  появится сообщение об успешной отправке сообщения. после чего перенаправит Вас на тут страницу на которой заполнялась данная форма обратного звонка для сайта

P.S.  Надеюсь информация будет для вас полезна и вы сможете её применить, если у вас что-то не получится пишите в комментариях.

 

HTML / CSS, Новости Web Studio Bast
18 comments
  1. Очень понравилась функция и форма обратного звонка, жаль что не работает в IE9
    и нет защиты от “дураков”. Если даже в форму не введена ни одна буква с информацией, твой почтовый ящик быстро заспамят мусором.

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

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

  2. Доброй вечер. Спасибо за скрипт, как раз то что искал. Немного его подправил, и теперь супер работает!

  3. НА ПОЧТУ НЕ ПРИХОДИТ ХОТЯ Я ПОМЕНЯЛ НА СВОЮ И ПИШЕТ ЧТО ПИСЬМО ОТПРАВЛЕНО НО НЕЧЕГО НЕТ

    1. Проверяйте или отправляется письма с хостинга.

  4. Не работает у меня, только темнеет екран и все!

    1. Значит где то стили конфликтуют, смотрите что да как.

  5. косяк какой-то с почтой. Письмо не приходит

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

  6. Полет отличный, спасибо за данный контент, но хотел спросить могли бы сделать “Удобное время звонка” чтобы можно было выбирать из перечисленных, Примерно так:

    Перезвонить
    с 00-00 до 12-00

    1. Добрый день. Спасибо.
      Пока не думал об этом, возможно реализую данный функционал.

  7. Доброе. скачал, поменял почту на свою, залил для теста 099.pp.ua / 01 / call / call3 / но на почте нет ничего в принятых

    1. Добрый. Возможно в спаме? если нет, проверяйте настройки хостинга.

  8. Ссылка на скачивание не работет(

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

  9. Добрый день. Не совсем ясно – у вас тут указано два куска кода – их оба в index или в css тоже нужно?

Comments are closed.

Заказать
Пожалуйста, введите Ваше имя
Пожалуйста, введите Ваш телефон