Добрый день! Сегодня я приготовил для вас интересную информацию о скрипте заказа звонка, возможно вы уже с ним знакомы, а для тех, кто слышит о нем в первый раз, рассказываю – этот скрипт позволяет легко добавить на свой сайт форму заказа обратного звонка. Если у вас интернет магазин или сайт где необходима онлайн поддержка клиентов, то этот скрипт позволяет быстро наладить связь с потенциальным клиентом. Сама работа данного формы заказа звонка, очень проста в архиве присутсвует два файла 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. Надеюсь информация будет для вас полезна и вы сможете её применить, если у вас что-то не получится пишите в комментариях.
Кому статья помогла, лайкните.