Недавно попросили сделать форму обращения граждан для одного сайта! Было много непонятного, но после нескольких видеоуроков и серфинга в интернете получилось очень даже симпатично!
Кому интересно выложу ниже код!
Он состоит из двух файлов, оформление файл main.css код смотрите ниже.
.overlay {
position: absolute; //крепится посередине страницы
top: 0;
left: 0;
display: flex;
padding: 20px;
justify-content: center;
align-items: center;
background-color: rgba(66, 142, 45);
width: 100%;
min-height: 100%;
}
.content-wraper {
max-width: 600px;
box-sizing: border-box;
}
.titles {
color: rgb(247, 247, 247);
font-size: 32 px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
text-align: center;
}
/*Для экранов шириной от 768 пикселей и более*/
@media (min-width: 768px) {
.titles {
font-size: 62 px;
}
}
.form-wraper {
display: flex;
flex-direction: column;
background-color: rgba(66, 142, 45, 1);
border-radius: 14px;
padding: 20px 20px;
box-sizing: border-box;
}
/*Для экранов шириной от 768 пикселей и более*/
@media (min-width: 768px) {
.form-wraper {
padding: 40px 35px;
}
}
.form-group {
margin-bottom: 21px;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.form-groupcapcha {
margin-bottom: 21px;
display: flex;
flex-direction: row;
box-sizing: border-box;
}
.form-inputcapcha {
height: 30px;
background-color: #e3eaea;
border-radius: 8px;
border: none;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 20px;
box-sizing: border-box;
transition: background-color 0.2s ease-in;
-moz-appearance: textfield;
.form-inputcapcha::-webkit-inner-spin-button {
display: none;
}
}
.form-labelcapcha {
font-family: 'Montserrat', sans-serif;
font-size: 30 px;
color: #000;
font-weight: 700;
margin-top: 5px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 5px;
box-sizing: border-box;
}
.form-label {
font-family: 'Montserrat', sans-serif;
font-size: 20 px;
color: #000;
font-weight: 700;
margin-bottom: 10px;
box-sizing: border-box;
}
.form-input {
padding: 0 20px;
height: 52px;
width: 100%;
background-color: #e3eaea;
border-radius: 8px;
border: none;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 20px;
box-sizing: border-box;
transition: background-color 0.2s ease-in;
}
.form-input:focus, .form-message:focus, .form-inputcapcha:focus {
outline: none;
background-color: #6ce8e8;
}
.form-message {
width: 100%;
height: 170px;
padding: 15px 20px;
background-color: #e3eaea;
border-radius: 8px;
border: none;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 20px;
box-sizing: border-box;
resize: vertical;
transition: background-color 0.2s ease-in;
}
.form-submit {
width: 100%;
height: 52px;
border: none;
border-radius: 8px;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 700;
background-color: #DB143D;
cursor: pointer;
transition: background-color 0.2 ease-in;
}
.form-submit:hover, .form-submit:focus, .btn-goback:hover, .btn-goback:focus {
background-color: #fa8181;
outline: none;
}
.form-submit:active {
background-color: #DB143D;
outline: none;
}
/* ------ ADDITIONAL -------*/
.error {
padding: 10px 20px;
margin-bottom: 5px;
background-color: rgba(199, 43, 43, 0.712);
border-radius: 8px;
color: #fff;
font-weight: 700;
font-size: 22px;
}
.titles-success {
font-color: rgb(247, 247, 247);
font-size: 36px;
font-weight: 700;
text-align: center;
}
.btn-goback {
display: block;
width: 100%;
height: 42px;
padding-top: 15px;
border-radius: 18px;
background-color: #DB143D;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: 700;
cursor: pointer;
}И сосбственно самого кода php:
<?php
if (isset($_POST['a'])) {$a = $_POST['a'];}
if (isset($_POST['b'])) {$b = $_POST['b'];}
if (isset($_POST['sum'])) {$sum = $_POST['sum'];}
$s = $a + $b;
if ($s != $sum)//Сравниваем значение суммы с введенным посетителем сайта
{
echo "<b>Введите правильно сумму!<p>";//Если результаты разные, выводим сообщение об ошибке
header('location:capcha_error.html');
//страничка ошибки ввода капчи
}
else//Если результаты совпадают, отправляем письмо
{
if ( !empty($_POST) && trim($_POST['komu']) != '' && trim($_POST['fio']) != '' && trim($_POST['adress']) != '' && trim($_POST['email']) != '' && trim($_POST['message']) != '' )
{
$message = "Вам пришло новое сообщение с сайта ds7.of.by: \n" .
"Кому: " . $_POST['komu'] . " \n" .
"ФИО: " . $_POST['fio'] . " \n" .
"Адрес: " . $_POST['adress'] . " \n" .
"Электронный адрес: " . $_POST['email'] . " \n" .
"Сообщение: " . $_POST['message'];
$subject= "=?utf-8?B?".base64_encode("Электронное обращение")."?=";
$email_from = "user@sevenphantom.";
//здесь почту нужно писать что бы домен совпадал с вашим сайтом иначе попадет в спам
$boundary = md5(date('r', time()));
$filesize = '';
$headers="MIME-Version: 1.0" . PHP_EOL .
"Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n" .
"From: " . "=?utf-8?B?".base64_encode("Сайт sevenphantom.ru")."?=" . "<" . $email_from . ">" . PHP_EOL .
"Reply-TO: " . $email_from . PHP_EOL;
//"Content-Type: text/html; charset=utf-8". PHP_EOL .//
$message="
Content-Type: multipart/mixed; boundary=\"$boundary\"
--$boundary
Content-Type: text/plain; charset=\"utf-8\"
Content-Transfer-Encoding: 7bit
$message";
for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
$attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));
$filename = $_FILES['fileFF']['name'][$i];
$filetype = $_FILES['fileFF']['type'][$i];
$filesize += $_FILES['fileFF']['size'][$i];
$message.="
--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"
$attachment";
}
}
$message.="
--$boundary--";
if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ
mail('sds7@mail.grodno.by', $subject, $message, $headers);
header('location:message_open.html');
//страница сообщение отправлено
} else {
header('location:file_error.html'); //страница ошибки
//echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
}
}
//mail ( 'user@mail.by', "Электронное обращение" , $message, $headers);
//здесь пишем почту куда придет результат
//header('location: message_open.html');
}
//проверка полей на заполненность
function checkValue ($item, $message) {
if (isset($item) && trim($item) == '') {
echo '<div class="error">' . $message . '</div>';
}
}
//распечатка заполненных полей из формы, если произошел вывод ошибки
function printPostValue($item){
if (isset($item) && strlen(trim($item)) > 0){
echo $item;
}
}
?>
<div class="overlay">
<div class="content-wraper">
<!-- <h1 class="titles">Электронные обращения граждан</h1>-->
<form method="POST" action="feedback_new.html" class="form-wraper" enctype="multipart/form-data">
//здесь указывается страница с формой
<?php
// echo "<pre style='font-size: 24px;'>";
// print_r($_POST);
// print_r($_FILES);
// echo "</pre>";
?>
<div class="form-group">
<label for="komu" class="form-label">Кому:<font color="red">*</font></label>
<?php checkValue ($_POST['komu'], 'Заполните поле') ?>
<input name="komu" id="name" type="text" class="form-input" placeholder="Введите Кому"
value="<?php printPostValue($_POST['komu']); ?>"
>
<label for="komucom" ><font color="#fff">Наименование и (или) адрес организации либо должность лица, которым направляется обращение</font></label>
</div>
<div class="form-group">
<label for="fio" class="form-label">ФИО:<font color="red">*</font></label>
<?php checkValue ($_POST['fio'], 'Заполните поле') ?>
<input name="fio" id="fio" type="text" class="form-input" placeholder="Введите ФИО"
value="<?php printPostValue($_POST['fio']); ?>"
>
<label for="fiocom" ><font color="#fff">Фамилия, собственное имя, отчество (если таковое имеется) либо инициалы гражданина</font></label>
</div>
<div class="form-group">
<label for="adress" class="form-label">Адрес:<font color="red">*</font></label>
<?php checkValue ($_POST['adress'], 'Заполните поле') ?>
<input name="adress" id="adress" type="text" class="form-input" placeholder="Введите Адрес"
value="<?php printPostValue($_POST['adress']); ?>"
>
<label for="adresscom" ><font color="#fff">Адрес места жительства (места пребывания)</font></label>
</div>
<div class="form-group">
<label for="E-mail" class="form-label">E-mail:<font color="red">*</font></label>
<?php checkValue ($_POST['email'], 'Заполните поле') ?>
<input name="email" id="E-mail" type="email" class="form-input" placeholder="Введите E-mail"
value="<?php printPostValue($_POST['email']); ?>"
>
<label for="emailcom" ><font color="#fff">Адрес электронной почты отправителя</font></label>
</div>
<div class="form-group">
<label for="message" class="form-label">Обращение:<font color="red">*</font></label>
<?php checkValue ($_POST['message'], 'Заполните поле') ?>
<textarea name="message" id="message" placeholder="Изложите суть обращения" class="form-message" name="" id="" cols="30" rows="10" ><?php printPostValue($_POST['message']); ?></textarea>
</div>
<div class="form-group">
<label for="fileff" name="fileff" class="form-label">Прикрепить файл:</label>
<font color="#fff"><input type="file" name="fileFF[]" multiple id="fileFF"></font>
<label for="filecom" ><font color="#fff">документы, подтверждающие полномочия представителей заявителей, документы о результатах предыдущего рассмотрения обращений и другие документы и (или) сведения, необходимые для решения вопросов, изложенных в обращениях (pdf, docx, doc, rtf, txt, odt, zip, rar, png, tiff, jpeg, jpg). Не более 10 Мб.</font></label>
</div>
<div class="form-group">
<label for="capcha" class="form-label">Введите два любых ненулевых числа и их сумму:<font color="red">*</font></label>
</div>
<br><?php checkValue ($_POST['sum'], 'Вы не ввели числа и сумму') ?></br>
<div class="form-groupcapcha">
<input name="a" id="a" type="number" min="0" max="99999" class="form-inputcapcha" placeholder="a" value="" size="3">
<label for="plus" class="form-labelcapcha"> плюс</label>
<input name="b" id="b" type="number" min="0" max="99999" class="form-inputcapcha" placeholder="b" value="" size="3">
<label for="plus" class="form-labelcapcha">равно</label>
<input name="sum" id="sum" type="number" min="0" max="9999999999" class="form-inputcapcha" placeholder="сумма" value="<?php printPostValue($_POST['sum']); ?>" size="5">
</div>
<br><br>
<input class="form-submit" type="submit" value="Отправить сообщение">
</form>
</div>
</div>На этом сообственно все, только не забываем подключить созданный файл main.css к вашей форме:
<link media="screen" href="{THEME}/style/main.css" type="text/css" rel="stylesheet" >А также добавьте шрифты, чтобы текст выглядел как у меня:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
Еще напишем код страничек отправлено и ошибка:
capcha_error.html
<div class="overlay">
<div class="content-wraper">
<br><br><br>
<h1 class="titles-success">Сообщение не отправлено. <br>Не правильно введена сумма чисел! Попробуйте еще раз!</h1><br><br><br>
<a href="http://ваш сайт/feedback_new.html" class="btn-goback">Вернуться обратно</a>
</div>
</div>
По аналогии создаются страничка отправки и других ошибок, прилагать не буду код тот же просто меняете адрес страницы.
Важно: я вставлял форму на сайт с cms dle, так что не забываем про теги html и body иначе работать не будет!
Рабочую форму можно посмотреть по ссылке http://ds7.of.by/feedback_new.html