Создание контактной формы на сайт
Здравствуйте. Одна из главных составляющих сайта — контакты. На каждом сайте есть номер телефона, почта или адрес. Наша сегодняшняя задача — упростить общение между клиентом и администратором сайта с помощью контактной формы, которую мы установим на сайт.
Первое, что нам нужно сделать, решить, какая будет форма, можно использовать формы от различных сервисов (jivosite.ru и тд), а можно самому написать скрипт, (пример выше). Сейчас мы разберём второй вариант, так как первый особого объяснения не требует.
За пример мы возьмём форму для заказа: http://grand-sait.ru/zakaz, что же, давайте начинать!
Создание index.html
<!doctype html>
<html lang="ru-ru">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Сделать заказ!</title>
<meta name="author" content="ALE">
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
<link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Skranji:400,700|Oxygen:400,700">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="w">
<h1>Сделать заказ!</h1>
<form id="contactform" name="contact" method="post" action="send.php">
<p class="note"><span class="req">*</span> Поля со звездочкой обязательны для заполнения.</p>
<div class="row">
<label for="name">ФИО: <span class="req">*</span></label>
<input type="text" name="name" id="name" class="txt" tabindex="1" placeholder="Иванов Иван Иванович" required>
</div>
<div class="row">
<label for="email">E-mail Адрес <span class="req">*</span></label>
<input type="email" name="email" id="email" class="txt" tabindex="2" placeholder="address@mail.ru" required>
</div>
<div class="row">
<label for="name">Телефон: <span class="req">*</span></label>
<input type="text" name="phone" id="name" class="txt" tabindex="1" placeholder="+7 (999) 99 99 999" required>
</div>
<div class="row">
<label for="subject">Выберите сайт: <span class="req">*</span></label>
<select class="txt" name="site" required>
<option value="Сайт-визитка">Сайт-визитка</option>
<option selected value="Landing page">Landing page</option>
<option value="Корпоративный сайт ">Корпоративный сайт </option>
<option value="Интернет магазин">Интернет магазин</option></select>
</div>
<div class="row">
<label for="message">Сообщение <i>(необязательно)</i></label>
<textarea name="message" id="message" class="txtarea" tabindex="4" placeholder="Дополнительная информация" ></textarea>
</div>
<div class="center">
<input type="submit" id="submitbtn" name="submitbtn" tabindex="5" value="Отправить Сообщение">
</div>
</form>
</div>
</body>
</html>
Тут следует обратить внимание на начало формы, а именно на send.php, именно этому скрипту мы будет отдавать наше письмо для отправки.
Создание style.css
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body {
font-family: 'Oxygen', Arial, Helvetica, sans-serif;
font-size: 62.5%;
line-height: 1;
padding-bottom: 85px;
background: #f5f7f7 url('images/bg.jpg'); /* Image Source: http://subtlepatterns.com/paper-fibers/ */
}
::selection { background: #d2bef5; }
::-moz-selection { background: #d2bef5; }
::-webkit-selection { background: #d2bef5; }
br { display: block; line-height: 2.2em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 {
font-family: 'Skranji', 'Trebuchet MS', sans-serif;
font-weight: bold;
font-size: 3.75em;
line-height: 1.7em;
margin-bottom: 7px;
color: #5b5463;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid #bbb;
}
/* positioning */
#w {
display: block;
width: 660px;
margin: 0 auto;
margin-top: 25px;
padding: 35px 15px;
background: #f2f2f2;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
-moz-box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
}
/* form styles */
form .row {
display: block;
padding: 7px 8px;
margin-bottom: 7px;
}
form .row:hover {
background: #f1f7fa;
}
form label {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
width: 120px;
padding: 6px 0;
color: #464646;
vertical-align: top;
}
form .req { color: #ca5354; }
form .note {
font-size: 1.2em;
line-height: 1.33em;
font-weight: normal;
padding: 2px 7px;
margin-bottom: 10px;
}
form input:focus, form textarea:focus { outline: none; }
/* placeholder styles: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */
:-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #aaafbd; font-style: italic; } /* Internet Explorer 10+ */
form .txt {
display: inline-block;
padding: 8px 9px;
padding-right: 30px;
width: 240px;
font-family: 'Oxygen', sans-serif;
font-size: 1.35em;
font-weight: normal;
color: #898989;
background-color: #f0f0f0;
background-image: url('https://cdn.shortpixel.ai/client/q_glossy,ret_img/images/checkmark.png');
background-position: 110% center;
background-repeat: no-repeat;
border: 1px solid #ccc;
text-shadow: 0 1px 0 rgba(255,255,255,0.75);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
-moz-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
form .txtarea {
display: inline-block;
padding: 8px 11px;
padding-right: 30px;
width: 320px;
height: 120px;
font-family: 'Oxygen', sans-serif;
font-size: 1.35em;
font-weight: normal;
color: #898989;
background-color: #f0f0f0;
background-image: url('images/checkmark.png');
background-position: 110% 4%;
background-repeat: no-repeat;
border: 1px solid #ccc;
text-shadow: 0 1px 0 rgba(255,255,255,0.75);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset;
-moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset;
box-shadow: 0 1px 4px -1px #a8a8a8 inset;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
form .txt:focus, form .txtarea:focus {
width: 300px;
color: #545454;
background-color: #fff;
background-position: 110% center;
background-repeat: no-repeat;
border-color: #059;
-webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7);
-moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7);
box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7);
}
form .txtarea:focus {
width: 375px;
background-position: 110% 4%;
}
form .txt:valid {
background-color: #deecda;
background-position: 98% center;
background-repeat: no-repeat;
color: #7d996e;
border: 1px solid #95bc7d;
}
form .txtarea:valid {
background-color: #deecda;
background-position: 98% 4%;
background-repeat: no-repeat;
color: #7d996e;
border: 1px solid #95bc7d;
}
form .txt:focus:valid, form .txtarea:focus:valid {
-webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);
-moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);
box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);
}
form .center {
margin-top: 25px;
text-align: center;
}
Думаю объяснять стили не нужно, каждый может создать свои, что-то изменить или добавить.
Теперь у нас создана красивая контактная форма, но смысла без следующего скрипта просто нет, переходим к самому главному!
Создание send.php
<meta http-equiv="refresh" content="5; URL='https://grand-sait.ru'" /> <!--перенаправление человека после 5 секунд на основную станицу сайта-->
<p align="center"><font color="green"> Спасибо, мы ответим в течение нескольких часов!</font></p>
<?
$to = 'admin@grand-sait.ru'; //Почта получателя, через запятую можно указать сколько угодно адресов
$subject = 'Заказ с сайта.'; //Заголовок сообщения
$message = '
<html>
<head>
<title>'.$subject.'</title>
</head>
<body>
<p>Имя: '.$_POST['name'].'</p>
<p>E-mail: '.$_POST['email'].'</p>
<p>Телефон: '.$_POST['phone'].'</p>
<p>Сайт: '.$_POST['site'].'</p>
<p>Дополнительная информация: '.$_POST['message'].'</p>
</body>
</html>'; //Текст нащего сообщения можно использовать HTML теги
$headers = "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма
$headers .= "From: Отправитель <from@example.com>\r\n"; //Наименование и почта отправителя
mail($to, $subject, $message, $headers); //Отправка письма с помощью функции mail
?>
Теперь нужно поставить фон для формы и всё готово! Можно добавлять поля, но при этом нужно будет и в файле «send.php» указывать на одну строчку больше. Теперь у нас есть готовая форма для общение клиентами, наша задача выполена!
