cssprofi.ruАлексей Елизаров. Уроки CSS, HTML и не только. Форма обратной связи html для сайта


AJAX Форма обратной связи HTML — создание формы обратной связи

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<title>Di-Grand</title>

<meta name="description" content="Di-Grand" />

<meta name="keywords" content="Di-Grand" />

<meta name="author" content="Di-Grand" />

<link rel="shortcut icon" href="../favicon.ico"/>

        <script src="js/jquery-3.1.1.js" type="text/javascript"></script>

        

        <link rel="stylesheet" href="css/di_custom.css"/>  

        

   <script type="text/javascript" src="js/custom.js"></script>

</head>

<body>  

        

        

            <form action="#" method="post">

                <div>

                    <label><input type="radio" value="3 килограмма" name="radio"/> <span>3</span> килограмма</label>

                    <label><input type="radio" value="5 килограмм" name="radio" /> <span>5</span> килограмм</label>

                    <label><input type="radio" value="10 килограмм" name="radio"/> <span>10</span> килограмм</label>

                    <label><input type="radio" value="10+ килограмм" name="radio"/> <span>10</span><i>+</i> килограмм</label>

                </div>

            

                <input type="text" placeholder="Ваше имя">

                <input type="text" placeholder="Ваша почта">

                <span> <input type="text" placeholder="+7 (___)" > </span>

                  

                

                <div>

                    <div>

                        <input  type="button"  value="отправить"  id="send"/>

                        <div></div>

                    </div>  

                    <div></div>

                </div>  

            </form>

        

    </body>

</html>

di-grand.com

Форма обратной связи на сайт для бесплатного хостинга на HTML. Генератор форм обратной связи, скрипт для cms joomla, dle, для сайтов на народе и ucoz.

Для активизации функций необходимо включить в вашем обозревателе JavaScript !!!

Легкая в установке форма обратной связи для сайта:

1.Скачиваем стандартный код формы, либо с помощью генератора формы обратной связи создаем свою.

2.Устанавливаем код на страницу сайта (например на страницу контакты).

3.Регистрируем страницу, на которой установлен код обратной связи (без регистрации форма работать не будет).

4.Регистрируем e-mail, на который будут приходить сообщения с формы.

Изменить e-mail адрес получателя сообщений

изменить

Условия предоставления сервиса: 1) Сайт не должен противоречить законодательству Российской Федерации. 2) Страница, где вы разместили html код должна быть доступна роботу. 3) Наличие прямой ссылки на сайт masterform.info в размещенном html коде.

генератор формы обратной связи
Для чего нужна форма обратной связи на сайт?

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

Форма обратной связи встроена во многие системы управления сайтами: dle, bitrix, joomla, wp. Однако форму настроить довольно сложно и необходимо иметь определенные навыки и знания. А если вы создали сайт на бесплатном хостинге, например на Яндекс Народ или Ucoz, то в них данная форма и вовсе не предусмотрена.

На помощь придет наш легкий в установке и настройке скрипт обратной связи для сайта. Скрипт работает на хостинге без php. Обработка php производится на нашем сервере. Форма работает с помощью Ajax, использует капчу для предотвращения спама.

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

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

Новые сайты, которые установили нашу форму обратной связи:

 

masterform.info

Форма обратной связи для сайта CSS+HTML

В этом уроке я хочу показать как можно создать форму обратной связи HTML5 с эффектами анимации полей. Мы будем использовать CSS3 и HTML5 без Java скриптов. Форму обратной связи в действии вы можете посмотреть в демо примере.

Просмотр Скачать

Структура HTML Формы

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

<div> <h2>Написать письмо !</h2> <form name="contact" method="post" action="#"> <p><span>*</span> Поля со звездочкой обязательны для заполнения</p> <div> <label for="name">Ваше Имя <span>*</span></label> <input type="text" name="name" tabindex="1" placeholder="Стив Джобс" required> </div>

<div> <label for="email">E-mail Адрес <span>*</span></label> <input type="email" name="email" tabindex="2" placeholder=" Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. " required> </div>

<div> <label for="subject">Тема <span>*</span></label> <input type="text" name="subject" tabindex="3" placeholder="Тема письма" required> </div>

<div> <label for="message">Сообщение <span>*</span></label> <textarea name="message" tabindex="4" required></textarea> </div>

<div> <input type="submit" name="submitbtn" tabindex="5" value="Отправить Сообщение"> </div> </form> </div>

Структура CSS Формы

Вся анимация выполнена с новыми свойствами CSS 3. Все фоны выполнены обыкновенными градиентами. Обратите внимание на анимацию кнопки. Тени при наведении тоже выполнена на CSS3.

/* form styles */ form .row { display: block; padding: 7px 8px; margin-bottom: 7px; } form .row:hover { background: #f1f7fa; }

form label { display: inline-block; font-size: 1.2em; font-weight: bold; width: 120px; padding: 6px 0; color: #464646; vertical-align: top; } form .req { color: #ca5354; }

form .note { font-size: 1.2em; line-height: 1.33em; font-weight: normal; padding: 2px 7px; margin-bottom: 10px; }

form input:focus, form textarea:focus { outline: none; }

/* placeholder styles: http://stackoverflow.com/a/2610741/477958 */ ::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */ :-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 4 to 18 */ ::-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 19+ */ :-ms-input-placeholder { color: #aaafbd; font-style: italic; } /* Internet Explorer 10+ */

form .txt { display: inline-block; padding: 8px 9px; padding-right: 30px; width: 240px; font-family: 'Oxygen', sans-serif; font-size: 1.35em; font-weight: normal; color: #898989; }

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

cssprofi.ru