Создание контактной формы на сайт



Здравствуйте. Одна из главных составляющих сайта - контакты. На каждом сайте есть номер телефона, почта или адрес. Наша сегодняшняя задача - упростить общение между клиентом и администратором сайта с помощью контактной формы, которую мы установим на сайт. 

 

 

Первое, что нам нужно сделать, решить, какая будет форма, можно использовать формы от различных сервисов (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('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" указывать на одну строчку больше. Теперь у нас есть готовая форма для общение  клиентами,  наша задача выполена! 

 


Отправить сообщение об ошибке
Сделай мир чуть умней, поделись статьёй :)

Опубликовал Apelsin2017 - 11 января 2017, 14:37 - 5 просмотров


Похожие записи: Textolite - система управления статическим сайтом


Комментарии




  • smilesadblumblushbyecraycrazybiggrindancedance2goodmoskingscratchshokshoutwackowinkyesbeeedntknwfriendsbadgamergamer2irefulmdameetingneaofftopicrofl



 
2 декабря 2017, 04:50 «Цитировать»
JessieficEZ
A Biological Masterpiece, But Subject to Many Ills
The human foot is a biological masterpiece. Its strong, flexible, and functional design enables it to do its job well and without complaint—if you take care of it and don't take it for granted.
healthThe foot can be compared to a finely tuned race car, or a space shuttle, vehicles whose function dictates their design and structure. And like them, the human foot is complex, containing within its relatively small size 26 bones (the two feet contain a quarter of all the bones in the body), 33 joints, and a network of more than 100 tendons, muscles, and ligaments, to say nothing of blood vessels and nerves.
<a href=https://www.cialissansordonnancefr24.com/medicament-cialis-effet/>https://www.cialissansordonnancefr24.com/medicament-cialis-effet/</a>

 

                      
Сделать заказ

Создание сайтов на разных языках или платформах на заказ за несколько дней.




Заказать!




Внимание!

Дорогие читатели, если вы увидели ошибку или опечатку, помогите нам ее исправить! Для этого мы запустили на сайте удобную клавишу для исправления ляпов. Выделите ошибку и нажмите одновременно клавиши «Ctrl» и «Enter». Мы узнаем о неточности и как можно скорее исправим.




Подпишись на еженедельную рассылку!

* indicates required



Рекомендую

Я перепробовал несколько хостингов, некоторые были часто недоступны, на других почти всегда были технические работы, но вот, мне наконец попал под руки этот замечательный хостинг, где цены начинаются от 11 рублей, почти никогда нет каких-то работ, что не может ни радовать. Представляю вашему вниманию: LITE.HOST



Сайт размещен на хостинге LITE.HOST стоимость от 53 рубля в месяц

Вход на сайт


Avatar