Форма обратной связи

Недавно попросили сделать форму обращения граждан для одного сайта! Было много непонятного, но после нескольких видеоуроков и серфинга в интернете получилось очень даже симпатично!

Кому интересно выложу ниже код!

Он состоит из двух файлов, оформление файл 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