lestvitsa.ru

Как сделать заказать обратный звонок

Как сделать заказать обратный звонок 950
Как сделать заказать обратный звонок 77

Пример: «заказать звонок».

Здесь сделано модальное окно и реализована простая функция php mail.

На HTML страницу добавляем

<style> #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; color: rgba(0,0,0,0); background: rgba(180,180,180,.9); cursor: pointer; } #popup { visibility: hidden; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 100; } #popup form { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: .5% 1% 1%; border: 1px solid rgb(100,100,100); font-size: 140%; font-weight: 600; text-align: right; text-shadow: -1px -1px #666; color: rgb(240,240,240); background: rgb(150,150,150) linear-gradient(rgb(100,100,100), rgb(170,170,170)); } #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: 70%; font-weight: normal; text-shadow: none; } #popup input {font-size: 90%;} #popup [type='submit'] {cursor: pointer;} #popup label:hover { color: #dbeaf9; cursor: pointer; } </style> <input type="checkbox" id="mail"/><label for="mail">заказать звонок</label> <div id="popup"> <form method="post" action="mail.php"> <label for="mail" title="Отменить">✕</label> <div data-title="Например, Мария Петровна">Ваше имя: <input type='text' name='name' required /></div> <div data-title="Например, 89270000000">Моб. телефон: <input type="tel" name='tel' required maxlength="11" value='8' pattern="8\d{10}"/></div> <input type='submit' value='Заказать'/> </form> </div>

Создаём файл mail.php, куда вставляем

<? if($_POST['name']){ $znach = array( 1 => $_POST['name'], 2 => $_POST['tel'], ); mail("", "заказ звонка ".$_SERVER['HTTP_REFERER'], $znach[2]." ".$znach[1]); } Header("Refresh: 8; URL=".$_SERVER['HTTP_REFERER']); ?> <!DOCTYPE html> <title><? print "$znach[1], данные успешно отправлены!"; ?></title> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta name="robots" content="noindex"/> <style> body {background: rgba(180,180,180,.9);} body > div { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: .5% 1% 1%; border: 1px solid rgb(100,100,100); font-size: 140%; font-weight: 600; text-align: right; text-shadow: -1px -1px #666; color: rgb(240,240,240); background: rgb(150,150,150) linear-gradient(rgb(100,100,100), rgb(170,170,170)); } label:hover { color: #dbeaf9; cursor: pointer; } body > div > div {padding-top: 3%;} </style> <div> <label title="Продолжить">✕</label> <div><? print "$znach[1]"; ?>, Ваша заявка получена!<br> Мы позвоним Вам в течении часа.</div> </div> <script> document.getElementsByTagName('label')[0].onclick = function() { window.location.href="<? print $_SERVER['HTTP_REFERER']; ?>" } </script>

Я постаралась употребить как можно меньше кода и у меня это получилось. Вам остаётся подогнать форму под свой дизайн.


Как сделать заказать обратный звонок 306
Как сделать заказать обратный звонок 389
Как сделать заказать обратный звонок 373
Как сделать заказать обратный звонок 834
Как сделать заказать обратный звонок 874
Как сделать заказать обратный звонок 400
Как сделать заказать обратный звонок 89
Как сделать заказать обратный звонок 934
Как сделать заказать обратный звонок 518
Как сделать заказать обратный звонок 828
Как сделать заказать обратный звонок 169
Как сделать заказать обратный звонок 302
Как сделать заказать обратный звонок 202
Как сделать заказать обратный звонок 318
Как сделать заказать обратный звонок 706
Как сделать заказать обратный звонок 931

Советуем почитать

  • Острый соус своими руками
  • Как сделать напоминалку о днях рождениях
  • Всё для кукол мх своими руками
  • Бампер сшить своими руками
  • Как из двушки сделать студию