Форма обратной связи HTML5 + CSS3 + jQuery + php

Форма обратной связи для сайта на HTML5 + CSS3 + jQuery + php. Валидация и экранирование введенных данных, проверка правильности ввода полей формы обратной связи.

1 год назад

Форма обратной связи HTML5 + CSS3 + jQuery + php

В данной статье речь пойдет о динамической форме обратной связи, которая при изменении размера окна, будет становится адаптивной к просмотру. То есть форма обратной связи будет доступна для просмотра на всех видах устройств, на персональных компьютерах, ноутбуках, смартфонах и планшетах.

Форма обратной связи будет состоять из 3 полей ввода данных — имя, адрес электронной почты и текст письма. Все поля будут обязательны для заполнения, отправить пустое письмо будет нельзя. Поле ввода адреса электронной почты дополнительно будет проходить валидацию на правильность ввода. Данные будут представлены в html коде, стили оформления формы обратной связи будут прописаны в отдельном CSS файле. По принципу данного скрипта возможно создание по аналогии большего или меньшего количества полей ввода.

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

В файле send.php править следующие строки:

$to = "admin@site.ru";
$subject= "Message from site.ru";
$header="From: site.ru";;

content.htm

<div class="outer">
  <div class="middle">
    <div class="inner">

      <div class="login-wr">
      <h2>Написать письмо</h2>

      <div class="form">
        <form action="send.php" method="POST">
          <input type="text" id="name" placeholder="Имя" required>
          <input type="email" id="email" placeholder="E-mail" required>
          <textarea id="message" required></textarea>
          <p>* Все поля обязательны для заполнения</p>
          <button type="submit" id="submit"> Отправить </button>
          <img src="loader.gif" id="loader" alt="">
          <div id="result"></div>
        </form>
      </div>

      </div>

    </div>
  </div>
</div>

style.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

html, body {
  height : 100%;
  padding: 0;
  margin: 0;
}

body {
  background: #d3dce1;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

.outer {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  text-align: center;
  width: auto;
  padding: 0 15px;
}

.login-wr {
  position: relative;
  margin: 0 auto;
  background: #fff;
  max-width: 550px;
  box-shadow: 3px 3px 24px #999;
  padding: 15px 15px 15px 15px;
}

h2 {
  text-align: left;
  font-weight: 200;
  font-size: 1.6em;
  margin: 0 0 10px 0;
  padding: 0 0 10px 0;
  border-bottom: 1px solid #eeeeee;
  color: #474747;
}

.form {
  padding-top: 20px;
  text-align: left;
}

input[type="text"], 
input[type="email"] {
  margin-bottom: 25px;
  height: 40px;
  outline: 0;
  -moz-outline-style: none;
}

button {
  height: 40px;
  outline: 0;
  -moz-outline-style: none;
}      

input[type="text"] {
  background: url("img/user.png") no-repeat left 10px center;  
}
input[type="email"] {
  background: url("img/email.png") no-repeat left 10px center;  
}

textarea {
  background: url("img/pencil.png") no-repeat left 10px top 10px;
}

textarea {
  width: calc(100% - 55px);
  height: 120px;
  border: 1px solid #bbb;
  padding: 10px 10px 10px 45px;
  font-size: 14px;
}

input[type="text"],
input[type="email"] {
  width: calc(100% - 45px);
  max-width: 250px;
  border: 1px solid #bbb;
  padding: 0 0 0 45px;
  font-size: 14px;
}

input[type="text"]:focus,
input[type="email"]:focus {
  border: 1px solid #2196f3;
}
     
p {
  padding-bottom: 10px;
}

button {
  width: 100%;
  max-width: 150px;
  background: #e6ebee;
  border:none;
  border-bottom: 5px solid #d3dce1;
  color: #333;
  font-size: 14px;
  font-weight: 200;
  cursor: pointer;
  transition: box-shadow .4s ease;
}

send_message.js

$(function() {
  $("#loader").hide();
  $("form").submit(function(e) {

        var name = $("#name").val();
        var email = $("#email").val();
        var message = $("#message").val();

        var data = 'name=' + name + '&email=' + email + '&message=' + message;
    
        if(data) {
            $.ajax({
                type: "POST",
                url: "./send.php",
                data: data,
                beforeSend: function(html) {
          $("#loader").show();
          $("#submit").hide();
               },
               success: function(html){
          $("#loader").hide();          
          $("#result").html(html);
              }
            });
        }
        return false;
    });
});

send.php

<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
	
header('Content-Type: text/html; charset=UTF-8');

mb_internal_encoding('UTF-8'); 
mb_http_output('UTF-8'); 
mb_http_input('UTF-8'); 
mb_regex_encoding('UTF-8'); 

sleep(2);

if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message'])) {

  if(trim($_POST['name']) == '') {
  $hasError = true;
  } else {
  $name = trim($_POST['name']);
  }
  
  if(trim($_POST['email']) == '')  {
  $hasError = true;
  } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
  $hasError = true;
	echo "Ошибка, адрес электронной почты введен не правильно";
  } else {
  $email = trim($_POST['email']);
  }

  if(trim($_POST['message']) == '') {
  $hasError = true;
  } else {
  if(function_exists('stripslashes')) {
  $message = stripslashes(trim($_POST['message']));
  } else {
  $message = trim($_POST['message']);
  }
  }

  if(!isset($hasError)) {
    $to = "admin@site.ru";
    $subject= "Message from site.ru";
    $header="From: site.ru";
    $header.="\nContent-type: text/plain; charset=\"utf-8\"";
	
    $message = "BHTML \r\nEmail: $email \nИмя: $name \n\nТекс сообщения:\n$message";
	
    //mail($to, $subject, $message, $header);

    $emailSent = true;
    echo "* Сообщение отправлено";
  }
}else {
    echo "* Ошибка, письмо не отправлено";
}

}
?>

1,1K

Демо Скачать

Комментарии