Пошаговая форма на сайт

Подборка красивых форм обратной связи 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 использует JavaScript и AJAX для обработки/отправки данных (страница не перезагружается). Форма использует HTML 5 и красивые правила стилей CSS 3.

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

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

Скачать

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

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

Form 1

Form 2

Form 3

Скачать

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

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

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

Скачать

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

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

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

Скачать

 

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

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

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

 

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

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

Скачать

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

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

На 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

И нужно создать файл mail.php

<? if($_POST['name']){ // заносим в массив значение полей, их может быть больше $znach = array( 1 => $_POST['name'], 2 => $_POST['tel'], ); mail("", "заказ звонка ".$_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

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

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

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

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="например, " 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

contacts.php

<?php if (isset ($_POST['contactFF'])) { $to = ""; // поменять на свой электронный адрес $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
Источник: http://interzarabotok.ru/35-dizajnerskix-form-obratnoj-svyazi-html-css/


Закрыть ... [X]

В этой статье мы рассмотрим пошаговую регистрацию с использованием jQuery Узор сердечко связанный спицами

Пошаговая форма на сайт Пошаговая форма на сайт Пошаговая форма на сайт Пошаговая форма на сайт Пошаговая форма на сайт Пошаговая форма на сайт