Нет активных подписок
Войти

Логин для вашего аккаунта

Имя пользователя *
Пароль *
Запомнить меня

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

Приступаем.

Для работы формы нужно всего 3 файла 1-HTML и 2-PHP, наводить красоту мы будем с помощью CSS.

Для начала создадим саму форму, посредством HTML.

<form action="/xxx/port.php" method=post enctype="multipart/form-data">
<br>Выберете подходящий цвет<b><span style="color:red;"> &#10038;</span></b>:<br><select name="color" class="select" required>
<option disabled selected>Не выбрано</option>
<option>Белый</option>
<option>Серебристый</option>
<option>Желтый</option>
<option>Красный</option>
<option>Голубой</option>
<option>Черный</option>
</select>
  
<input type="hidden" name="page_url" value="Nokia Lumia" />

<br>Стандартная комплектация
<input type="radio" class="radio" name="itemtype" value="vehicle" onclick="toggleSet(this)">
<br>Комплект - (телефон + оригинальный чехол)
<input type="radio" class="radio" name="itemtype" value="equipment" onclick="toggleSet(this)">

<br>Количество:<b><span style="color:red;"> &#10038;</span></b><br>
<input type= "number" class="formnumb" name= "amount" required>

<br>Желаемая дата доставки:<b><span style="color:red;"> &#10038;</span></b><br>
<input type= "date" class="formnumb" name= "date" required>

<br>Дополнительная информация о заказе:<br> 
<textarea rows="10" name="info" class="formtext" cols="30"></textarea>

<br>Ваше имя<b><span style="color:red;"> &#10038;</span></b><br>
<input type="text" name="name" class="formname" size="40" placeholder=" Введите текст">

<br>Ваш email<b><span style="color:red;"> &#10038;</span></b><br> 
<input type="email" name="email" class="formname" size="40" placeholder=" Введите e-mail">
  
<br>Ваш телефон<br> 
<input type="tel" name="tel" class="formname" size="40" placeholder=" Введите номер">

<br>От куда Вы узнали о нас?<b><br><select name="title" class="select" >
<option disabled selected>Не выбрано</option>
<option>СМИ</option>
<option>Поисковые системы</option>
<option>Социальные сети</option>
<option>Реклама в интернете</option>
</select>
<br><br>
<input name="attachfile" type="file" size="28">
<br><input type="checkbox" class="checkbox" name="checkbox" required>
Я согласен с <a href="#">условиями сотрудничества.</a> 
<br><br><input class="mybutton" type="submit" value="Отправить" name="submit">
<input class="mybutton" type= "reset" value= "Очистить"><hr>
<input type=button class="button" name=type value='Скрыть форму' onclick="setVisibility('sub3', 'none');";>
   
</form>

В самой первой строчке, мы подключаем файл port.php, который будет обрабатывать нашу форму. Можно создать папку mod_form в корне сайта или в папке modules и поместить туда файл port.php. Тогда путь в первой строчке будет - "/modules / mod_form /port.php".

Содержимое файла - port.php

<?PHP  header("Content-Type: text/html; charset=utf-8");?>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<?

function complete_mail() { 
		
$data=date("d.m.Y");
$time=date("h:i");
$res=" $data | $time ";
$ress=$_POST['name'];
$resss=" $res $ress ";
		
		 
$_POST['title'] =  substr(htmlspecialchars(trim($_POST['title'])), 0, 1000); 
$_POST['mess'] =  substr(htmlspecialchars(trim($_POST['mess'])), 0, 1000000); 
$_POST['name'] =  substr(htmlspecialchars(trim($_POST['name'])), 0, 30); 
$_POST['tel'] =  substr(htmlspecialchars(trim($_POST['tel'])), 0, 30); 
$_POST['email'] =  substr(htmlspecialchars(trim($_POST['email'])), 0, 50);
		
$_POST['color'] =  substr(htmlspecialchars(trim($_POST['color'])), 0, 1000);
$_POST['itemtype'] =  substr(htmlspecialchars(trim($_POST['itemtype'])), 0, 1000);
$_POST['type_of_cover'] =  substr(htmlspecialchars(trim($_POST['type_of_cover'])), 0, 1000);
$_POST['page_url'] =  substr(htmlspecialchars(trim($_POST['page_url'])), 0, 1000);
$_POST['amount'] =  substr(htmlspecialchars(trim($_POST['amount'])), 0, 1000);
$_POST['date'] =  substr(htmlspecialchars(trim($_POST['date'])), 0, 1000);
$_POST['info'] =  substr(htmlspecialchars(trim($_POST['info'])), 0, 1000);
				 
// Проверка на валидность поля "Имя" - ошибка 0 
if (empty($_POST['name'])) 
output_err(0); 
// Проверка на валидность e-mail - ошибка 1 
if(!preg_match("/[0-9a-z_]+@[0-9a-z_^\.]+\.[a-z]{2,3}/i", $_POST['email'])) 
output_err(1); 
// тело письма.
$mess = '
		
<b>Цвет:</b>'.$_POST['color'].'<br />
<b>Комплектация:</b>'.$_POST['itemtype'].'<br />
<b>Тип чехла:</b>'.$_POST['type_of_cover'].'<br />
<b>Количество:</b>'.$_POST['amount'].'<br />
<b>Желаемая дата доставки:</b>'.$_POST['date'].'<br />
<b>Дополнительная информация о заказе:</b>'.$_POST['info'].'<br />
<b>Имя отправителя:</b>'.$_POST['name'].'<br /> 
<b>Телефон:</b>'.$_POST['tel'].'<br /> 
<b>email:</b>'.$_POST['email'].'<br />
<b>Телефон:</b>'.$_POST['page_url'].'<br />
<b>От куда Вы узнали о нас?:</b>'.$_POST['title'].'<br />
   
'.$_POST['mess']; 

// подключаем phpmailer. 
require 'class.phpmailer.php'; 

$mail = new PHPMailer();
$mail->CharSet = "UTF-8"; 
$mail->From = $from; // адрес, от кого письмо
$mail->FromName = $signature; // подпись от кого 
$mail->AddAddress('yourmail', 'Имя'); // Указываем свой e-mail
$mail->IsHTML(true); // Возможность вставки в письмо html 
$mail->Subject = $resss;  // тема письма

		
// если был файл, то прикрепляем его к письму 
if(isset($_FILES['attachfile'])) { 
	if($_FILES['attachfile']['error'] == 0){ 
	$mail->AddAttachment($_FILES['attachfile']['tmp_name'], $_FILES['attachfile']['name']); 
	} 
} 
// Для изображений, прикрепляем картинку к телу письма. 
if(isset($_FILES['attachimage'])) { 
	if($_FILES['attachimage']['error'] == 0){ 
		if (!$mail->AddEmbeddedImage($_FILES['attachimage']['tmp_name'], 'my-attach', 'image.gif', 'base64', $_FILES['attachimage']['type'])) 
		die ($mail->ErrorInfo); 
$mess .= 'Для отправки картынки:<br /><img src="cid:my-attach" border=0><br />В этом примере мы не будем это использовать ;-) '; 
                 } 
        } 
$mail->Body = $mess; 

// отправка письма
if (!$mail->Send()) die ('Mailer Error: '.$mail->ErrorInfo); 
	echo 'Спасибо! Ваше письмо отправлено.<p><a href="http://clickmyweb.net/">Вернитесь на главную</a></p>'; 
} 

function output_err($num) 
{ 
    $err[0] = 'ОШИБКА! Не введено имя.'; 
    $err[1] = 'ОШИБКА! Неверно введен e-mail.'; 
    $err[2] = 'ОШИБКА! Не введено сообщение.'; 
    echo '<p>'.$err[$num].'</p>'; 
//    show_form(); 
    exit(); 
} 

if (!empty($_POST['submit'])) complete_mail(); 
else show_form(); 
?> 
<?php
header('Refresh: 5; URL=http://yourdomainname.com/');
echo 'Через 5 секунд вы будете перенаправлены на главную страницу';
exit;
?>

Обратите внимание на 21 строку, мы вносим в массив данные с html файла (name="color"), строка №2. Так же происходит и с остальными. Затем формируем тело письма, строка №38. В строке №59 замените yourmail на свой e-mail.№ 82. Выводим сообщение об успешной отправке. №99. Делаем перенаправление на любую удобную страницу, с задержкою в 5 секунд. Мы приняли и обработали информацию, теперь нам нужно ее отправить, для этого будем использовать файл - class.phpmailer.php. Просто скачайте изменять в нем ничего не нужно. На этом все - форма работает.

Наводим красоту

form {
	text-align: center;
	background-color: #fff;	
}
.formname {
	line-height: 40px;
	vertical-align: middle;
	color: #00beeb;
	margin-top: 10px;
	margin-bottom: 10px;
}
.formname:hover {
	box-shadow: 0 0 10px 5px rgba(221, 221, 221, 0.5);
}
.select {
	height: 40px;
	line-height: 40px;
	vertical-align: middle;
	min-width: 305px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.select:hover {
	box-shadow: 0 0 10px 5px rgba(221, 221, 221, 0.5);
}
.formnumb {
	min-width: 305px;
	height: 35px;
	margin: 10px 0px;
}
.formtext {
	color: #00beeb;
	min-width: 305px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.formtext:hover {
	box-shadow: 0 0 10px 5px rgba(221, 221, 221, 0.5);
}
.checkbox {
	margin-top: 20px;
}
#equipment {
	display: none;
	padding: 10px;
}
#vehicle {
	display: none;
	padding: 10px;
}
.radio {
	margin-top: 15px;
}
.radio:hover {
	box-shadow: 0 0 10px 5px rgba(221, 221, 221, 0.5);
}
.mybutton {
	width: 130px;
	height: 35px;
	color: white;
	background-color: #00beeb;
	border:2px outset #00beeb;
	cursor: pointer;
	transition: 1s;
}
.mybutton:hover {
	background-color: #F07444;
	border: 2px inset #F07444;
	transition: 0.5s;
}