35+ дизайнерских Форм обратной связи html css

Ajax Контактная форма (плагин)

Подборка красивых форм обратной связи html css

Форма обратной связи является одной из существенных особенностей сайта. Она помогает пользователям взаимодействовать с администратором сайта, и предлагает надежный и простой способ для посетителей, войти с вами в контакт, будь то для запросов, поддержки или просто отправить письмо.

Как правило, большинство используют отдельную страницу для формы обратной связи, но некоторые пользуются всплывающими модальными окнами а не помещают форму на отдельную страницу.

Поля формы обратной связи могут немного отличаться в зависимости от специфики вашего сайта/блога. Наиболее часто используемые поля форм обратной связи включают в себя:

  • имя
  • Эл. адрес
  • Номер телефона
  • Сообщение

Ниже подборка из 35+ форм обратной связи, которые нетрудно настроить и установить. Надеюсь вы подберете для себя подходящую форму и внедрите на свой сайт/блог.


Полный Набор Всех Форм для Бизнеса — Smart Forms

Скачать

(Добавлена 29/05/2017)


Smart Forms профессиональные формы. Структура форм, включает различные готовые формы виджетов, таких как: Google карты, Colorpickers, Datepickers, UI Элементы, Timepickers и др.

Хорошее кодирование, качественная документация и, организовано очень хорошо.

  • Несколько Форм Входа
  • CSS3 тумблеры/радиофлажки
  • Обзор CSS3 / рейтинг
  • Анимированная информация во всплывающих подсказках
  • Оповещения
  • Анимированные индикаторы прогресса
  • Модальные Popup формы с регулируемым автошоу
  • 3 стиля (Elegant, Dark, Flat)
  • 7 цветов
  • 5 рабочих Ajax PHP форм
  • AJAX PHP CAPTCHA, с проверкой в ​​реальном времени
  • 40+ стартер шаблонов форм в 7 цветах и нескольких вариациях, всего, более — 300 форм включено.

Несколько Демо

Выдвижная Красивая Контактная Форма

Скачать

(Добавлена 29/05/2017)


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

Fullscreen Demo

Demo

 

Современные формы (Контактная форма, Логин и др.)

Скачать

Демо Готовых Форм:       Контакная Форма                         Комментарии                       UI Элементы

Элементы форм, построенные на чистых CSS3/HTML5, нет изображений и JavaScript. Все компоненты созданы для быстрого создания форм, используя массу включенных элементов форм, таких как: вход, радиофлажки, тумблеры, и др. Включены почти все шаблоны для быстрого старта.

 

Адаптивные Bootstrap Модальные формы

Скачать

 

Набор Модальных форм, включает формы: регистрации, восстановления пароля, подписки, контактную форму. Легко обновить / редактировать, просто следуйте документации.

Форма контакта на PHP

Неограниченные цвета, примеры готовых цветных форм на ДЕМО

 

Современная Контактная форма — Vanilla Form

Скачать

Vanilla Form использует JavaScript и AJAX для обработки/отправки данных (страница не перезагружается). Форма использует HTML 5 и красивые правила стилей CSS 3.

100% адаптивна/оптимизирована

Чистая CSS3 Контактная Форма

Скачать

(Добавлено 29/05/2017)


Есть 3 основных CSS3 стиля, каждый из которых включает 3 вариации. Все формы закодированы очень чисто. Осталось добавить обработчик и установить.

Адаптивная боковая форма связи

Скачать

Нажми на иконку

Адаптивный макет формы на основе HTML5/CSS3. Отдельный PHP и Ajax скрипт добавил для работы. В папке «uniMail-master» универсальный скрипт обработчик (можно применить к любой форме). Страница не перезагружается, попробуйте отправить сообщение с этой формы!

Профессиональная Контактная форма — Slick

Скачать

Архив включает: Xhtml, Js, PHP обработчик и CSS файлы. Slick — профессиональная форма для реализации связи на сайте. Простая модификация — изменить электронную почту в PHP (youradress@yourdomain.com), текстов и ссылок до файлов и готово.

  • Профессиональный дизайн
  • Замена шрифта на Yanonekaffeesatz
  • Форма проверки JQuery
  • Функция — обнаружение ошибок
  • Валидный XHTML

Контактная форма на Bootstrap

Скачать

 

  • Адаптивный дизайн
  • Простые параметры
  • Чистый код
  • Готовая для смартфонов

Форма связи для HTML сайта

Скачать   |   Полное Демо

 

Можно подключить и для WordPress сайта, но желательно на отдельной странице, это из-за множества подключаемых модулей, так как форма обрабатывает все необходимые для бизнеса поля.

Контактная Форма, Промо Баннер, Форма Рассылки и др

Скачать

Большой набор всех форм, карты, баннеров, форм для куки, социальных и др. 3 Примера, остальное в архиве.

Ajax Контактная форма

Скачать  |   Демо

Ajax Контактная форма (плагин)
Ajax Контактная форма (плагин)

Плагин предлагает классические и оригинальные функции. Можете создавать собственные шаблоны HTML.

Требования:

  • PHP 5 +

Контроль спама (перетаскивание)

tp>Spam Control дружественная к пользователю альтернатива Captcha.
Эта функция — комплексное решение защиты от спама.

Существует 4 типа Spam Control:

  • основной (просто drag’n’drop)
  • цветной (точный цвет)
  • номера (нужное число)
  • формы (правильная форма)

Дополнительно — capctha Google или AYAH (Вы человек?).

Особенности

  • Оптимизированный
  • Несколько или отдельные вложения файлов (можно отключить).
  • Многократное или одно получение (одновременно или нет).
  • Простота настройки.
  • Функция перетаскивания (вид Live Preview  в архиве).
  • Функция перетаскивания готова к сенсорному экрану.
  • ReCaptcha интеграция.
  • AYAH интеграция.
  • Полная документация.
  • Плагин полностью настраивается.

JQuery Форма связи в модальном окне

Демо | Скачать

JQuery Форма связи в модальном окне

Минималистическая контакная форма на JQuery и FancyBox для управления динамическим содержимым.

Реализован небольшой Ajax вызов ,который отправляет данные используя PHP.

Форма обратной связи на PHP / MySQL и Jquery

PHP обработчик, все рисунки и данные в архиве.

Демо1 |  Демо2  | Скачать

Форма обратной связи на PHP / MySQL и Jquery

Форма обратной связи в модальном окне на Twitter Bootstrap

Демо  | Скачать

Форма обратной связи в модальном окне на Twitter Bootstrap

В архиве все данные от формы, PHP обработчик и версия для MACOSX

Модальное окно хорошая альтернатива отдельной странице, для размещения формы обратной связи, и Twitter Bootstrap позволяет сделать это, а Ajax не перезагружает страницу после отправки сообщения.

Плавающая форма обратной связи на Ajax

Демо  | Скачать

Форма плывет вместе с прокруткой страницы, симпатичная и, это Ajax — страница не перезагружается после отправки. PHP обработчик в архиве.

Плавающая форма обратной связи на Ajax

Форма обратной связи — Супер AJAX

Демо  | Скачать

В форме включены правила проверки заполнения полей и сообщений об ошибках. Форма может отправлять почту локально. PHP обработчик в архиве.

Форма обратной связи — Супер AJAX

Выпадающая форма обратной связи на jQuery с валидацией

Демо  | Скачать

Выпадающая форма обратной связи на jQuery с валидациейФорма расположена в верхней части + ссылка для вызова формы в нижней части сайта. В архиве полная версия формы с PHP обработчиком.

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

Демо  | Скачать

Все проверки осуществляются на стороне сервера а страница не обновляется после отправки сообщения.

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

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

Демо  | Скачать

Ajax Форма обратной связи на jQuery и PHPОчень симпатичная всплывающая форма обратной связи на jQuery и PHP. В архиве все исходники для Демо и PHP обработчик.

Скрипт «Обратный звонок» в модальном окне

Демо

Скрипт «Обратный звонок» в модальном окнеФункцию «Обратный звонок» на сайте реализовать не сложно. Нам понадобится лишь функция php mail

На HTML страницу вставляем код:
<style>
#mail {visibility: hidden;}
#mail:checked ~ #popup form {visibility: visible;}
#mail:checked + label {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 99;
  color: rgba(0,0,0,0);
  background: rgba(180,180,180,.9);
  cursor: pointer;
}
#popup {
  visibility: hidden;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 100;
}
#popup form {
  position: absolute;
  top: 50%; left: 50%;
  -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  padding: .5% 1% 1%;
  border: 1px solid rgb(100,100,100);
  font-size: 140%;
  font-weight: 600;
  text-align: right;
  text-shadow: -1px -1px #666;
  color: rgb(240,240,240);
  background: rgb(150,150,150) linear-gradient(rgb(100,100,100), rgb(170,170,170));
}
#popup div:nth-of-type(1) {padding-top: 3%;}
#popup div:nth-last-of-type(1) {padding: 1% 0 4%;}
#popup div:after {
  content: attr(data-title);
  display: block;
  font-size: 70%;
  font-weight: normal;
  text-shadow: none;
}
#popup input {font-size: 90%;}
#popup [type='submit'] {cursor: pointer;}
#popup label:hover {
  color: #dbeaf9;
  cursor: pointer;
}
</style>

<input type="checkbox" id="mail"/><label for="mail">заказать звонок</label> <!-- Для того, чтобы label шёл не сразу после input, нужно менять немного селекторы -->

<div id="popup">
<form method="post" action="mail.php">
<label for="mail" title="Отменить">✕</label>
<div data-title="Например, Мария Петровна">Ваше имя: <input type='text' name='name' required /></div>
<div data-title="Например, 89270000000">Моб. телефон: <input type="tel" name='tel' required maxlength="11" value='8' pattern="8\d{10}"/></div>
<input type='submit' value='Заказать'/>
</form>
</div>
И нужно создать файл mail.php
<?
if($_POST['name']){ // заносим в массив значение полей, их может быть больше
  $znach = array(
    1 => $_POST['name'],
    2 => $_POST['tel'],
  );
  mail("name@yandex.ru", "заказ звонка  ".$_SERVER['HTTP_REFERER'], $znach[2]." ".$znach[1]); // письмо на свой электронный ящик, измените на свой email
}
Header("Refresh: 8; URL=".$_SERVER['HTTP_REFERER']); // спустя 8 секунд человек будет возвращён на предыдущий URL
?>

<!DOCTYPE html>
<title><? print "$znach[1], данные успешно отправлены!"; ?></title>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta name="robots" content="noindex"/>
<style>
body {background: rgba(180,180,180,.9);}
body > div {
  position: absolute;
  top: 50%; left: 50%;
  -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  padding: .5% 1% 1%;
  border: 1px solid rgb(100,100,100);
  font-size: 140%;
  font-weight: 600;
  text-align: right;
  text-shadow: -1px -1px #666;
  color: rgb(240,240,240);
  background: rgb(150,150,150) linear-gradient(rgb(100,100,100), rgb(170,170,170));
}
label:hover {
  color: #dbeaf9;
  cursor: pointer;
}
body > div > div {padding-top: 3%;}
</style>

<div>
<label title="Продолжить">✕</label>
<div><? print "$znach[1]"; ?>, Ваша заявка получена!<br>
Мы позвоним Вам в течении часа.</div>
</div>

<script> // нажав на label посетитель вернётся на предыдущую страницу, где заполнял форму
document.getElementsByTagName('label')[0].onclick = function() {
  window.location.href="<? print $_SERVER['HTTP_REFERER']; ?>"
}
</script>

Адаптивная форма обратной связи

Демо

Адаптивная форма обратной связи

После отправки форма не перезагружается. Проверка правильности заполнения полей производится не на стороне сервера.

contacts.html
<form method="POST" id="feedback-form">
Как к Вам обращаться:
<input type="text" name="nameFF" required placeholder="фамилия имя отчество" x-autocompletetype="name">
Email для связи:
<input type="email" name="contactFF" required placeholder="адрес электронной почты" x-autocompletetype="email">
Ваше сообщение:
<textarea name="messageFF" required rows="5"></textarea>
<input type="submit" value="отправить">
</form>

<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "contacts.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');    
      f.messageFF.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.messageFF.value='';
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
}, false);
</script>
contacts.php
<?
if (array_key_exists('messageFF', $_POST)) {
   $to = 'свой@yandex.ru';
   $subject = 'Заполнена контактная форма с '.$_SERVER['HTTP_REFERER'];
   $subject = "=?utf-8?b?". base64_encode($subject) ."?=";
   $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$_POST['contactFF']."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
   $headers = 'Content-type: text/plain; charset="utf-8"';
   $headers .= "MIME-Version: 1.0\r\n";
   $headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
   mail($to, $subject, $message, $headers);
   echo $_POST['nameFF'];
}
?>
CSS
#feedback-form { max-width: 400px; padding: 2%; border-radius: 3px; background: #f1f1f1; } #feedback-form [required] { width: 100%; box-sizing: border-box; margin: 2px 0 2% 0; padding: 2%; border: 1px solid rgba(0,0,0,.1); border-radius: 3px; box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 transparent; } #feedback-form [required]:hover { border-color: #7eb4ea; box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 transparent; } #feedback-form [required]:focus { outline: none; border-color: #7eb4ea; box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 4px rgba(35,146,243,.5); transition: .2s linear; } #feedback-form [type="submit"] { padding: 2%; border: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset; background: #669acc; color: #fff; } #feedback-form [type="submit"]:hover { background: #5c90c2; } #feedback-form [type="submit"]:focus { box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05); }

Форма обратной связи с вложением файлов

Демо

Форма обратной связи с вложением файловФорма адаптивная. Поддержка IE10. После отправки страница не перезагружается. Проверка правильности заполнения полей производится не на стороне сервера.

contacts.html
<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Контактная форма</title>
<style>
#feedback-form { /* вся форма */
  max-width: 550px;
  padding: 2%;
  border-radius: 3px;
  background: #f1f1f1;
}
#feedback-form label { /* наименование полей */
  float: left;
  display: block;
  clear: right;
}
#feedback-form .w100 { /* поля */
  float: right;
  max-width: 400px;
  width: 97%;
  margin-bottom: 1em;
  padding: 1.5%;
}
#feedback-form .border { /* граница полей */
  border-radius: 1px;
  border-width: 1px;
  border-style: solid;
  border-color: #C0C0C0 #D9D9D9 #D9D9D9;
  box-shadow: 0 1px 1px rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.1) inset;
}
#feedback-form .border:focus {
  outline: none;
  border-color: #abd9f1 #bfe3f7 #bfe3f7;
}
#feedback-form .border:hover {
  border-color: #7eb4ea #97cdea #97cdea;
}
#feedback-form .border:focus::-moz-placeholder { /* убрать при фокусе первоначальный текст поля */
  color: transparent;
}
#feedback-form .border:focus::-webkit-input-placeholder {
  color: transparent;
}
#feedback-form .border:not(:focus):not(:hover):valid { /* правильно заполненные поля */
  opacity: .8;
}
#submitFF { /* кнопка "Отправить" */
  padding: 2%;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
  background: #669acc;
  color: #fff;
}
#feedback-form br {
  height: 0;
  clear: both;
}
#submitFF:hover {
  background: #5c90c2;
}
#submitFF:focus {
  box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
</style>

<form enctype="multipart/form-data" method="post" id="feedback-form">
<label for="nameFF">Имя:</label>
<input type="text" name="nameFF" id="nameFF" required placeholder="например, Иван Иванович Иванов" x-autocompletetype="name" class="w100 border">
<label for="contactFF">Email:</label>
<input type="email" name="contactFF" id="contactFF" required placeholder="например, ivan@yandex.ru" x-autocompletetype="email" class="w100 border">
<label for="fileFF">Прикрепить файл:</label>
<input type="file" name="fileFF[]" multiple id="fileFF" class="w100">
<label for="messageFF">Сообщение:</label>
<textarea name="messageFF" id="messageFF" required rows="5" placeholder="Детали заявки…" class="w100 border"></textarea>
<br>
<input value="Отправить" type="submit" id="submitFF">
</form>

<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "contacts.php", true);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText);
      if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя
        f.messageFF.removeAttribute('value');
        f.messageFF.value='';
      }
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
  http.send(new FormData(f));
}, false);
</script>
contacts.php
<?php
if (isset ($_POST['contactFF'])) {
  $to = "name@yandex.ru"; // поменять на свой электронный адрес
  $from = $_POST['contactFF'];
  $subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER'];
  $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
  $boundary = md5(date('r', time()));
  $filesize = '';
  $headers = "MIME-Version: 1.0\r\n";
  $headers .= "From: " . $from . "\r\n";
  $headers .= "Reply-To: " . $from . "\r\n";
  $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";
  $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($to, $subject, $message, $headers);
    echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!';
  } else {
    echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
  }
}
?>

Простая и функциональная форма обратной связи

Скачать

Очень простая и функциональная форма с проверкой всех заполняемых полей и капчей. PHP обработчик и HTML код находятся в одном документе.

Простая и функциональная форма обратной связи

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

Демо | Скачать

Симпатичный вариант PHP формы обратной связи на Ajax.

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

Небольшая и симпатичная PHP форма обратной связи 

Демо | Скачать

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

Небольшая и симпатичная PHP форма обратной связи

Форма обратной связи Bootstrap 3 с Капчей

Форма использует:

  1. JQuery, чтобы сделать некоторые простые проверки на стороне клиента, показать сообщения об ошибках, и представить сообщение через AJAX.
  2. Функцию почты PHP для отправки сообщения, чтобы сформировать ответ и сделать очень простую «на стороне сервера» проверку.
  3. SecureImage  Captcha, чтобы защитить нашу контактную форму от удара спамом. Защитный код,  что вы часто видите на HTML формах.

Демо | Скачать

Форма обратной связи Bootstrap 3 с Капчей

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

Демо | Скачать

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

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

Форма обратной связи на jquery и ajax c вложением файлов

Демо | Скачать

В архиве PHP обработчик и все детали от формы

Форма обратной связи на jquery и ajax c вложением файлов

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *