Главная » Вебмастеру » Как я сделал форму регистрации в Oriflame

Как я сделал форму регистрации в Oriflame

2014-03-16 / Вр:20:26 / просмотров: 13638

Совсем недавно в будний день ко мне позвонил один человек и заказал двухстраничный сайт с формой регистрации для пользователей, которые желают стать консультантами компании Oriflame. За два часа я «нахимичил» форму регистрации. Моя форма регистрации очень простая в отличие от тех, которые вы можете найти в интернете.
Итак, как функционирует придуманная мной форма регистрации?
Пользователь заполняет поля формы регистрации, чтобы вступить в сотрудничество с менеджером Oriflame. После нажатие кнопки «Отправить» откроется новая страница с уведомлением об отправленном письме или с благодарностью (по вашему желанию). Потом через 6 секунд пользователь автоматически перенаправится на главную страницу или на страницу с продукцией (по вашему желанию).

Минус этой формы в том, что нет защиты от не заполненных полей.

Вот так выглядит форма регистрации:

Приступим к созданию формы.
Создайте HTML файл «forma.html» и вставьте в него вот такой код формы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
<link rel="stylesheet" media="screen" ENGINE="text/css" href="style.css" />
<title>Форма регистрации</title>
</head>
<body>

<div class="forma">

<h2>Регистрация в компании Oriflame</h2>
<form id="form5" name="forma" method="post" action="obrabotchik.php">

<div class="obhae">
<p><b>Общее:</b></p>

<div class="form-obhae">
<p><label for="xoxo">Фамилия</label>
<input type="text" name="f" size="27" maxlength="50"> *Иванов &nbsp;&nbsp;</p>
<br>
<p><label for="xoxo">Имя</label>
<input type="text" name="i" size="27" maxlength="50"> *Иван</P>
<br>
<p><label for="xoxo">Отчество</label>
<input type="text" name="o" size="27" maxlength="50"> *Иванович</P>
<br>
<p><label for="xoxo">Дата рождения</label>
<select name="date">
<option value="0"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select name="mesac">
<option value="0"> </option>
<option value="01">Январь</option>
<option value="02">Февраль</option>
<option value="03">Март</option>
<option value="04">Апрель</option>
<option value="05">Май</option>
<option value="06">Июнь</option>
<option value="07">Июль</option>
<option value="08">Август</option>
<option value="09">Сентябрь</option>
<option value="10">Октябрь</option>
<option value="11">Ноябрь</option>
<option value="12">Декабрь</option>
</select>

<input type="text" name="god" size="3" maxlength="4"> *1 Февраля 1984 </P>
<br>
</div>
</div>

<div class="pasport">
<p><b>Паспортные данные:</b></p>

<div class="form-pasport">
<p><label for="xoxo">Серия паспорта</label>
<input type="text" name="seria" size="27" maxlength="50">*Рос.:1234 Укр.:СЕ</p>
<br>
<p><label for="xoxo">Номер паспорта</label>
<input type="text" name="nomer" size="27" maxlength="50">*567890</p>
<br>
</div>
</div>
<div class="adress-base">
<p><b>Адресные данные:</b></p>

<div class="form-adress-base">
<p><label for="xoxo">Страна</label>
<select name="strana"style="width:197px;height:26px;">
<option value="Украина">Украина</option>
<option value="Россия">Россия</option>
</select> * Украина </p>
<br>
<p><label for="xoxo">Область</label>
<input type="text" name="oblast" size="27" maxlength="50"> *Киевская</p>
<br>
<p><label for="xoxo">Город</label>
<input type="text" name="gorod" size="27" maxlength="50"> *Киев</p>
<br>
<p><label for="xoxo">Домашний адрес</label>
<input type="text" name="adres" size="27" maxlength="50"> *ул.Ленина39 кв.9</p>
<br>
<p><label for="xoxo">Почтовый индекс</label>
<input type="text" name="indeks" size="27" maxlength="5"> *11500</p>
<br>
</div>
</div>

<div class="kontaktni-base">
<p><b>Контактные данные:</b></p>

<div class="form-kontaktni-base">
<p><label for="xoxo">Домашний телефон</label>
<input type="text" name="tel" size="27" maxlength="50"> 80(4142)4-50-50</p>
<br>
<p><label for="xoxo">Мобильный телефон</label>
<input type="text" name="mobi" size="27" maxlength="50"> *+78(063)639-63-63</p>
<br>
</div>
</div>

<div class="dopolnitelno">
<p><b>Дополнительно:</b></p>

<div class="form-dopolnitelno">
<p><label for="xoxo">ICQ</label>
<input type="text" name="icq" size="27" maxlength="50"> 123456</p>
<br>
<p><label for="xoxo">Skype</label>
<input type="text" name="skype" size="27" maxlength="50"> ivan.ivanov</p>
<br>
</div>
</div>
<div class="cel-reg">
<p><b>Цель регистрации компании:</b></p>

<div class="form-cel-reg">
<p><input type="checkbox" name="dlasebya" value="ДА">
Покупать косметику для себя <br>
<input type="checkbox" name="zarabotok" value="ДА">
Зарабатывать на продажах<br>
<input type="checkbox" name="biznes" value="ДА">
Построение серьезного бизнеса</p>
<br>
</div>
</div>
<div class="yhetnaya-zapis">
<p><b>Учетная запись:</b></p>

<div class="form-yhetnaya-zapis">
<p><label for="xoxo">Электронная почта</label>
<input type="text" name="email" size="27" maxlength="50">*ivan.ivanov@mail.ru </p>
<br><br>
<p><b>Я согласен с условиями регистрации </b> <input type="checkbox" name="soglasenreg" value="ДА"checked></p>
<br>
</div>
</div>

<br>
<input name="button" type="submit" value="Зарегистрироваться" style="margin-left:140px; margin-bottom:15px;">
</form>
</div>
</body>
</html>

Теперь создайте CSS-файл «style.css» и вставьте в него вот такой код формы:

/* форма*/
.forma
{
border:1px solid #a8c900;
margin:10px 0px;
width:500px;
font:13px Verdana, Arial, Helvetica, sans-serif;
color:#333333;
}

.forma h2
{
text-align:center;
padding:10px 3px;
margin:10px;
background: #a8c900;
font:24px Verdana, Arial, Helvetica, sans-serif;
color:#000;
}

.obhae p, .adress-base p, .kontaktni-base p, .dopolnitelno p, .cel-reg p, .yhetnaya-zapis p, .pasport p
{
padding-left:10px;
}

.form-obhae, .form-adress-base, .form-kontaktni-base, .form-dopolnitelno, .form-cel-reg, .form-yhetnaya-zapis, .form-pasport
{
border-bottom:1px solid #a8c900;
padding-left:0px;
width:480px;
margin:0 auto;
}

.form-obhae p, .form-adress-base p, .form-kontaktni-base p, .form-dopolnitelno p, .form-cel-reg p, .form-yhetnaya-zapis p, .form-pasport p
{
padding:0px 0px;
margin:0 auto;
}

.form-cel-reg p
{
margin-left:120px;
}

#form5 label {
float: left;
width: 120px;
display: block;
text-align: right;
margin-right: 10px;
}

/* конец формы*/

С оформлением формы мы закончили. Теперь можно перейти к обработчику формы. Вы должны понимать, что форма без обработчика – это всего лишь форма, то есть, обычный каркас, который не сможет отправить данные пользователя на почту владельца сайта.
Создайте PHP-файл «obrabotchik.php» и вставьте в него вот такой код обработчика:


<meta http-equiv='refresh' content='6; url=https://bloggood.ru'>
<?php

if (isset($_POST['f'])) {$f = $_POST['f']; if ($f == '') {unset($f);}}
if (isset($_POST['i'])) {$i = $_POST['i']; if ($i == '') {unset($i);}}
if (isset($_POST['o'])) {$o = $_POST['o']; if ($o == '') {unset($o);}}
if (isset($_POST['date'])) {$date = $_POST['date']; if ($date == '') {unset($date);}}
if (isset($_POST['mesac'])) {$mesac = $_POST['mesac']; if ($mesac == '') {unset($mesac);}}
if (isset($_POST['god'])) {$god = $_POST['god']; if ($god == '') {unset($god);}}
if (isset($_POST['seria'])) {$seria = $_POST['seria']; if ($seria == '') {unset($seria);}}
if (isset($_POST['nomer'])) {$nomer = $_POST['nomer']; if ($nomer == '') {unset($nomer);}}
if (isset($_POST['strana'])) {$strana = $_POST['strana']; if ($strana == '') {unset($strana);}}
if (isset($_POST['oblast'])) {$oblast = $_POST['oblast']; if ($oblast == '') {unset($oblast);}}
if (isset($_POST['gorod'])) {$gorod = $_POST['gorod']; if ($gorod == '') {unset($gorod);}}
if (isset($_POST['adres'])) {$adres = $_POST['adres']; if ($adres == '') {unset($adres);}}
if (isset($_POST['indeks'])) {$indeks = $_POST['indeks']; if ($indeks == '') {unset($indeks);}}
if (isset($_POST['tel'])) {$tel = $_POST['tel']; if ($tel == '') {unset($tel);}}
if (isset($_POST['mobi'])) {$mobi = $_POST['mobi']; if ($mobi == '') {unset($mobi);}}
if (isset($_POST['icq'])) {$icq = $_POST['icq']; if ($icq == '') {unset($icq);}}
if (isset($_POST['skype'])) {$skype = $_POST['skype']; if ($skype == '') {unset($skype);}}
if (isset($_POST['dlasebya'])) {$dlasebya = $_POST['dlasebya']; if ($dlasebya == '') {unset($dlasebya);}}
if (isset($_POST['zarabotok'])) {$zarabotok = $_POST['zarabotok']; if ($zarabotok == '') {unset($zarabotok);}}
if (isset($_POST['biznes'])) {$biznes = $_POST['biznes']; if ($biznes == '') {unset($biznes);}}
if (isset($_POST['email'])) {$email = $_POST['email']; if ($email == '') {unset($email);}}
if (isset($_POST['soglasenreg'])) {$soglasenreg = $_POST['soglasenreg']; if ($soglasenreg == '') {unset($soglasenreg);}}

if (!isset($dlasebya)) {$dlasebya="НЕТ";}
if (!isset($zarabotok)) {$zarabotok="НЕТ";}
if (!isset($biznes)) {$biznes="НЕТ";}
if (!isset($soglasenreg)) {$soglasenreg="НЕТ";}

$text = "<h2>Регистрация клиента в компании Oriflame:</h2>";
$text .= "<strong>Ф.И.О</strong> - $f $i $o<br> <strong>Дата рождения:</strong> $date $mesac $god <br>";
$text .= "<strong>Паспортные данные:</strong>Серия паспорта - $seria<br><strong>Номер паспорта</strong>$nomer<br>";
$text .= "<strong>Страна</strong> - $strana<br><strong>Область:</strong>$oblast<br><strong>Город:</strong>$gorod<br><strong>Домашний адрес:</strong>$adres<br><strong>Почтовый индекс:</strong>$indeks<br><br>";
$text .= "<strong>Домашний телефон:</strong>$tel<br>";
$text .= "<strong>Мобильный телефон:</strong>$mobi<br>";
$text .= "<strong>icq:</strong>$icq<br>";
$text .= "<strong>skype:</strong>$skype<br>";
$text .= "<strong>Цель регистрации в компании:</strong><br>
<strong>Покупать косметику для себя</strong> - $dlasebya<br>
<strong>Зарабатывать на продажах</strong>-$zarabotok<br>
<strong>Построение серьезного бизнеса</strong> - $biznes<br><br>";
$text .= "<strong>Электронная почта:</strong> - $email<br>";
$text .= "<strong>Согласие с условиями регистрации:</strong> $soglasenreg";

if (mail ('test-admin@rambler.ru', 'Анкета Консультанта Oriflame', $text, "MIME-Version: 1.0\r\nContent-type: text/html; charset=windows-1251 \r\nFrom: Анкета Консультанта <АДРЕС САЙТА.com>")) echo '<br><br><h1>Сообщение отправлено успешно, через 6 секунд Вы будете направлены на главную страницу блога BLOGGOOD.RU, где сможете продолжить просмотр</h1>';
else echo 'Ошибка, сообщение не отправлено!';

?>

Настройки обработчика формы регистрации «obrabotchik.php»:
1. Строка №1

<meta http-equiv='refresh' content='6; url=https://bloggood.ru'>

content='6; - время, через которое пользователю автоматически откроется другая страница. В данном примере это будет через 6 секунд. Вы можете поменять на удобное вам время, только меняйте цифру и не удаляйте кавычку – ( ' ) и точку с запятой – ( ; ), иначе обработчик работать не будет.

url=https://bloggood.ru' – замените адрес или страницу, на которую вы хотите отправить пользователя. Это может быть главная страница или страница с товарами или услугами, а также доступ к прайс-листу т. д.

2. Строка №47

if (mail ('test-admin@rambler.ru', 'Анкета Консультанта Oriflame',

test-admin@rambler.ru – замените адрес электронной почты на вашу.

3. Строка №47

«Сообщение отправлено успешно, через 6 секунд Вы будете направлены на главную страницу блога BLOGGOOD.RU, где сможете продолжить просмотр» – здесь вы можете поменять фразу на вашу, а также добавить изображение.

Вы можете:

Когда-то давно бывали у меня случаи, когда я делал форму, данные отправлялись, но письмо приходило пустым (с незаполненными полями). Но вот эта форма – рабочая на все 99,99%. :smile: