Контактная форма для сайта html – Как сделать форму обратной связи на сайте на примере с инструкцией — Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Содержание

Создание простой формы обратной связи на HTML, CSS и JavaScript

От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов. Написание абсолютного большинства веб-приложений начинается с создания формы. На счет «абсолютного большинства» я, конечно загнул, серьезные программисты начинают, как правило, с другого. А вот начинающие разработчики, такие как автор этого туториала, начинают проектирование своего первого dt,-приложения с создания простой HTML-формы.

Автор: Павел Карабило

Начинающий веб-разработчик, самоучка. Живу, учусь, работаю в столице Украины. Активно изучаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особый интерес питаю к дизайну и разработке интерактивных интерфейсов веб-приложений (front-end).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В этом туториале я буду использовать HTML, CSS3 и совсем чуточку – JavaScript. Следуя за мной шаг за шагом, начинающий веб-программист (или веб-дизайнер) сможет создать простую форму, которая сможет стать основой для первой гостевой книги, системы комментариев или другого простого веб-приложения. Надеюсь, в недалеком будущем, я предоставлю вашему вниманию небольшой туториал, в котором расскажу, как из одной такой формы спроектировать и написать гостевую книгу, используя PHP и MySQL.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Итак, начнем.

Шаг 1.

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

поле для ввода имени автора сообщения;

поле для ввода адреса его электронной почты;

текстовую область для написания сообщения;

кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.

Начнем, пожалуй, с HTML. Создадим файл и назовем, его, например, index.html. Или как вам будет угодно, я назову его именно так.

Напишем в наш файл следующий HTML-код:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>Простейшая и крутейшая форма</title> </head> <body> <div> <form > <p> <input type=»text» name=»name» value=»Имя автора» /> <label for=»name»>Имя</label> </p> <p> <input type=»text» name=»email» value=»[email protected]» /> <label for=»email» >E-Mail</label> </p> <p> <textarea name=»msg»>Текст сообщения</textarea> </p> <p > <input type=»submit» value=»Отправить» /> </p> </form> </div> </body> </html>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<head>

<title>Простейшая и крутейшая форма</title>

</head>

<body>

<div>

<form >

<p>

</p>

<p>

</p>

<p>

<textarea name=»msg»>Текст сообщения</textarea>

</p>

<p >

</p>

</form>

</div>

</body>

</html>

Думаю, что с разметкой пока ни у кого никаких вопросов не возникнет. У нас есть два поля для ввода имени автора и адреса его электронной почты, каждое поле подписано меткой <label>, одно большое текстовое поле для ввода сообщения и кнопка для отправки всего этого добра куда подальше . Пока это все добро выглядит приблизительно так:

Как видите, каждое текстовое поле имеет подсказку – текст, расположенный в поле.

Шаг 2.

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

<input type=»text» name=»name» value=»Имя автора» onblur=»if(this.value.length == 0) this.value = ‘Имя автора'» onfocus=»if(this.value == ‘Имя автора’) this.value = » «/> ….. <input type=»text» name=»email» value=»[email protected]» onblur=»if(this.value.length == 0) this.value = ‘[email protected]'» onfocus=»if(this.value == ‘[email protected]’) this.value = » » /> ….. <textarea name=»msg» onblur=»if(this.value.length == 0) this.value = ‘Текст сообщения'» onfocus=»if(this.value == ‘Текст сообщения’) this.value=»»>Текст сообщения</textarea>

…..

…..

<textarea name=»msg» onblur=»if(this.value.length == 0) this.value = ‘Текст сообщения'» onfocus=»if(this.value == ‘Текст сообщения’) this.value=»»>Текст сообщения</textarea>

Как видите, мы просто описываем обработку событий onblur и onfocus. Событие onfocus срабатывает, когда мы выделяем элемент формы, событие onblur срабатывает, когда мы выделяем что-либо другое, и элемент возвращается в первоначальное состояние. В общем, кусок кода выглядит так:

onfocus=»if(this.value == ‘какой-то текст’) this.value = » » (если при выделении элемента в нем каходится «какой-то текст», то сделать так, чтобы в нем ничего не находилсь, то есть » «) onblur=»if(this.value.length == 0) this.value = ‘какой-то текст'» (если при удалении фокуса с элемента в нем находится 0 символов, поместить в этот элемент ‘какой-то текст’)

onblur=»if(this.value.length == 0) this.value = ‘какой-то текст'» (если при удалении фокуса с элемента в нем находится 0 символов, поместить в этот элемент ‘какой-то текст’)

Вот как это выглядит на практике:

При нажатии на элемент (при его выделении) подсказка в нем исчезает и автор сообщения может вводить свои данные. При выделении чего-либо другого, если в выделенный до этого элемент автор не внес свои данные, то в текстовом поле опять появится текст подсказки.

Шаг 3.

Разметка и миниатюрный сценарий готовы. Дело осталось за малым – за стилями.

Создадим файл CSS, например styles.css и присоединим его к нашему html-документу, добавив между тегами

… следующую строку:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Первым делом добавим стиль блоку-контейнеру.

#container { margin: 0 auto; border: 3px solid #EEEEEE; width: 800px; -webkit-birder-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }

#container {

margin: 0 auto;

border: 3px solid #EEEEEE;

width: 800px;

-webkit-birder-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px; }

При помощи определений width: 800px; и margin: 0 auto; мы задаем блоку-контейнеру ширину 800 пикселей и располагаем его по центру html-документа. При помощи остальных определений задаем границу блока-контейнера – её тип, ширину цвет, а при помощи определений CSS3 -webkit-birder-radius,-moz-border-radius и border-radius делаем углы границ закругленными. Границу контейнера делаем светлой и невыразительной, чтобы она не отвлекала внимание от более важных элементов.

Теперь, создадим определения для текстовых полей:

input, textarea { border: solid 1px #CCCCCC; margin-left: 10px; padding: 4px; outline: 0; font: Verdana, Geneva, sans-serif; width: 200px; background: #F9F9F9; -webkit-birder-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

input, textarea {

border: solid 1px #CCCCCC;

margin-left: 10px;

padding: 4px;

outline: 0;

font: Verdana, Geneva, sans-serif;

width: 200px;

background: #F9F9F9;

-webkit-birder-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

}

При помощи margin-left задаем отступ от края блока-контейнера в 10 пикселей. Определение padding служит для создания пространства между текстом в текстовом поле и границей текстового поля. Кроме этого, ка видите, мы задаем цвет, стиль границы (опять закругленные углы) и ширину текстовых полей. Вот что у нас получается:

Что ж, неплохо, хотя не мешало бы как-то выделить поле для сообщения и кнопку отправки.

textarea { width: 400px; height: 150px; line-height: 150%; } .send input { width: auto; margin-bottom: 10px; border: 2px solid #E0E0F3; font: Verdana, Geneva, sans-serif; background-color: #E5E5F8; }

textarea {

width: 400px;

height: 150px;

line-height: 150%;

}

.send input {

width: auto;

margin-bottom: 10px;

border: 2px solid #E0E0F3;

font: Verdana, Geneva, sans-serif;

background-color: #E5E5F8;

}

В принципе, ничего нового. Мы просто задаем новые размеры для текстовой области, включая высоту строчки line-height. Для кнопки делаем нижний отступ до границы контейнера при помощи margin-bottom. Вот что получается:

Это уже похоже на что-то. Далее, добавляем стили меткам label, а также делаем небольшой отступ поля Имя автора от верхней границы контейнера.

p label { margin-left: 10px; font-style: italic; color: #c0c0c0; } .name input { margin-top: 10px; }

p label {

margin-left: 10px;

font-style: italic;

color: #c0c0c0;

}

.name input {

margin-top: 10px;

}

Как можно видеть, метки стали светлее и теперь они меньше выделяются, но их все равно видно:

В принципе, выглядит уже довольно неплохо, однако, можно добавить еще немного визуальной интерактивности при помощи CSS:

input:hover, textarea:hover, input:focus, textarea:focus { border-color: #A0A0A0; } .send input:hover { border: 2px solid #C0C0E3; }

input:hover, textarea:hover, input:focus, textarea:focus {

border-color: #A0A0A0;

}

.send input:hover {

border: 2px solid #C0C0E3;

}

При наведении курсора на элемент, его границы становятся немного темнее и четче:

Вот, в принципе и все, урок по созданию простой HTML-формы подходит к концу. Мы с вами с нуля спроектировали и написали простую интерактивную веб-форму в светлых тонах, которая в будущем станет основой первой гостевой книги, написанной, например, на PHP+MySQL.

С уважением Павел Карабило

Ваши отзывы и замечания жду в комментариях!

Автор: Карабило Павел

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

10 критериев идеальной контактной формы для сайта

Клиенты не редко задают нам вопрос: «Если мы установим на сайте онлайн-чат, имеет ли смысл отказываться от контактной формы?» Сегодня мы решили подробно остановиться на особенностях контактной формы и задачах, которые она выполняет, а также рассказать о критериях, которым этот инструмент должен соответствовать.

Контактная форма или чат?

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

Клиент может оставить сообщение и в чате – оно будет переадресовано на электронную почту или смартфон. Еще одна удобная функция – обратный звонок.

Но есть группа посетителей, которые привыкли пользоваться формой из раздела «Контакты», и это нужно учитывать.

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

Третья группа веб-ресурсов, которым необходима контактная форма, – это посадочные страницы, так называемые лендинги.

Функции формы обратной связи

Функции контактной формы мало чем отличаются от задач, которые решают альтернативные инструменты обратной связи: — Через контактную форму вы получаете отзывы, жалобы и предложения посетителей. — С помощью контактной формы потребители задают вам вопросы, касающиеся конкретных товаров и услуг. — Контактная форма – эффективный инструмент формирования клиентской и подписной базы, потому что все обращающиеся указывают свой e-mail или телефонный номер.

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

Контактная форма может стимулировать конверсию и, напротив, негативно влиять на ее показатели. Форма должна быть простой, удобной и приятной для взаимодействия – тогда ее КПД будет максимально высоким. Есть, как минимум, 10 критериев, по которым можно оценить эффективность контактной формы.

1Заголовок

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

2Информативность

Этот критерий вытекает из предыдущего. Чтобы контактная форма была информативной, вы должны обозначить в ней 2 основных пункта:
— Что должен сделать пользователь: ввести e-mail, оставить номер телефона и т.д.
— Что он получит в итоге: сообщение зарегистрировано, ответ придет на электронную почту, ему перезвонят и т.д.

3Краткость

Пользователи не любят длинные формы. Не просите их зарегистрироваться на сайте, придумать и подтвердить пароль, подтвердить адрес электронной почты. Лишние действия отпугнут посетителей, поэтому используйте для них другие инструменты./>/> В идеале в форме должно быть 3 строки: имя, электронный адрес, само сообщение. Можно добавить к ним телефонный номер, но не помечать его красной звездочкой как строку, обязательную к заполнению.

4Заголовки над полями

Оформляйте контактную форму так, чтобы заголовки были над каждым полем. Существует технология исследования eye tracking, которая показывает, что такая компоновка текста работает эффективнее, чем заголовки с выравниваем по правому краю или заголовки, расположенные слева от поля.

5Подсказки

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

6Работа с ошибками

Если пользователь ошибся в букве или цифре при введении электронного адреса, система обычно пишет, что при заполнении формы допущена ошибка, но не указывает, где именно. />/> Посетителей это раздражает, потому что им приходится заполнять форму повторно. Желательно сразу указать на ошибку, например, введен некорректный e-mail, выделить ее цветом и предложить исправить только это поле.

7Юзабилити

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

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

Идеальным с точки зрения юзабилити считается текст высокой контрастности. Классический пример такого текста – черный шрифт на белом фоне. Чем ниже контрастность, тем сложнее взаимодействовать с текстом.

8Мобильность

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

9Откажитесь от капчи

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

Если вы все же используете капчу, упростите по максимуму символы – пусть это будут простые слова на русском языке или галочка в поле «Я не робот».

10Благодарность

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

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

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

P.S.

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

276 629 сайтов доверяют JivoSite

JivoSite помогает превратить посетителей сайта в покупателей. Установите JivoSite сегодня и получите месяц Профессиональной версии бесплатно по промокоду BLOG2019

Установить JivoSite сейчас!

www.jivosite.ru

Простая контактная форма на PHP

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

Представленная форма обратной связи состоит всего из одного файла, за исключением файла со стилями, код которого разделяется на две части реализующих две функции:

html код — отвечает за отображение формы на странице;
php код — обрабатывает данные отправленные при помощи формы и отправляет эти данные на Ваш электронный адрес.

Html код, приведенный ниже, не требует никаких изменений.


<form method="post" action="">
    <div>
        <span>Ваше имя:</span>
        <input name="name" type="text" required>
    </div>
    <div>
        <span>Тема:</span>
        <input  name="theme" type="text" required>
    </div>
    <div>
        <span>Ваш email:</span>
        <input  name="email" type="text" required>
    </div>
    <div>
        <span>Сообщение:</span>
        <textarea name="comment" required></textarea>
    </div>
    <div>
        <span></span>
        <input name="submit" type="submit" value="Отправить">
        <?=$message?>
    </div>
</form>

PHP код рассмотрим несколько подробнее, так как в нем уже требуется небольшая настройка.


<?php
    
    $to = "[email protected]";
    $subject = "Посылка с контактной формы";
    
    if(isset($_POST["submit"]))  
    {
        if(!preg_match("/^(?:[a-z0-9]+(?:[-_.]?[a-z0-9]+)?@[a-z0-9_.-]
        +(?:.?[a-z0-9]+)?.[a-z]{2,5})$/i",trim($_POST["email"])))
        {
            $message = "<div>
            Указанный email не соответствует формату!</div>";
        }
        else
        {
            $message = "<div>
            Форма успешно отправленна!</div>";
        }
    }

?>

В первую очередь необходимо указать Ваш email, ведь именно на него будет отправляться сообщение пользователя Вашего сайта. Целевой email адрес хранится в переменной $to, которой он присваивается в следующей строке:


$to = “[email protected]”;

Следовательно, в этой строке Вам необходимо заменить электронный адрес [email protected] на необходимый.

Так же Вы можете поменять тему сообщения на более удобную для Вас. Тема сообщения содержится в переменной $subject, значение которой можно изменить по тому же принципу, что и адрес электронной почты.

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


$message = "<div> Указанный email не соответствует формату!</div>";


$message = "<div> Форма успешно отправленна!</div>";

где первая строка содержит сообщение об ошибке, а вторая об успешной отправке.

Ниже представлен css код, который использовался в примере этого урока, но Вы можете заменить его другим, тем самым подогнать внешний вид формы под уникальный дизайн Вашего сайта.


@charset "utf-8";

*{
    margin:0;
    padding:0;
    font-family:Verdana, Geneva, sans-serif;
    font-size:13px;
}

#wrapper{
    width:960px;
    margin:0 auto;
}

h2{
    margin:5px 0 10px 115px;
    font-size:24px;
}

.contact{
    margin-top:5px;
    display:inline-block;
}

.contact div{
    padding:5px;
}

.label{
    display:inline-block;
    width:100px;
    text-align:right;
    vertical-align:top;
    margin-right:10px;
    margin-top:2px;
    font-size:16px;
}

.input{
    width:400px;
    height:20px;
    font-size:15px;
}

textarea.input{
    width:402px;
    height:100px;
}

.btn{
    padding:3px 7px;
    font-size:15px;
}

#message{
    display:inline-block;
    font-size:12px;
    padding:6px 5px 4px 5px;
}

.error{
    background:#FFCFCF;
    border:#F00 solid 1px;
}

.success{
    background:#CFCFFF;
    border:#00F solid 1px;
}

В общем, вот такая простая контактная форма у нас получилась с обработчиком на PHP. Кстати, если Вы захотите сделать ее более красивой и привлекательной, можете воспользоваться стильной формой обратной связи, которая также имеется у нас. На этом все, только положительных вам отзывов!

roothelp.ru

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

2019.08.10Viktar Haurylavets

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

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

Основные принципы организации обратной связи

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

Схема организации обратной связи на сайте.

Остановимся только на теоретических моментах, реализацию можете найти в других статьях на нашем сайте, ссылка выше.

Форма

Сама по себе форма является частью HTML документа, поэтому для пользователя нужно просто показать соответствующую форму и проще это сделать в тегах <form> </form>, в которых содержится кнопка Отправить или Сделать запрос, по нажатии на которую будет происходить дальнейшая обработка формы.

Очень важно корректно и понятно указать поля обязательные для заполнения, которые часто обозначаются символом *. В принципе, возможно написать саму форму и в тегах <div> </div>, но существует различие. Если <form> </form> формирует POST запрос, указанный в атрибуте action, который удобно использовать для дальнейшей обработки на сервере с помощью PHP, Pyton, Java и так далее, то в случае div нужно использовать JavaScript. Так же с помощью JavaScript можно данные посылать через Ajax запросы, в таком случае страница не будет обновляться в строке браузера.

Однако принцип один — мы отправляем некие данные на сервер.

Какие данные должны быть обязательными?

Это либо номер телефона для обратного звонка, либо электронная почта для обратной связи. Иногда делают обязательным поле имя, однако же цель получить контактные данные для связи?

Обработка запроса на сервере

Конечная реализация зависит от используемой технологии и языка программирования. Можно либо послать письмо, что появилась новая заявка с формы обратной связи, либо сделать лид в CRM (система управления отношений с клиентами, куда записываются все клиенты компании). Однако нужно убедится, что письма отправляются с сервера и доставляются оперативно.

Ответ с сервера

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

Непосредственный разбор кода на HTML и PHP смотрите здесь.

dev.asifmoda.com

Создаем всплывающую контактную форму для сайта

/* устанавливаем слой затемнения фона,
  ** опрделяем позиции, цвет и интенсивность затемнения  */
.black-overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.7;
	opacity:.70;
	filter: alpha(opacity=70);
}
/* устанавливаем рисунок основы,
  ** опрделяем размеры и положение на экране  */
.envelope {
	display: none;
	position: absolute;
	width: 600px;
	height: 340px;
	background: url(images/envelope.png) center no-repeat;
	z-index:1002;
	position: relative;
	margin: 10% auto;
}
/* формируем кнопку закрытия,
  ** размеры, положение на форме  */
.close-btn {
	width: 31px;
	height: 31px;
	display: block;
	cursor: pointer;/* для случая применения отличных от <a> тегов */
	background: url(images/close.png);
	text-indent: -4999px;
}
/* кнопка закрытия при наведении */
.close-btn:hover{
	background: url(images/close-hover.png);
 
}
/* оформляем заголовок формы */
.title {
	font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
	font-size:22px;
	font-weight: normal;
	font-weight: 200;
	text-align:left;
	position: absolute;
	top: 30px;
	left: 40px;
/* можно заменить на другую картинку
   ** или border-bottom: бла бла бла */	
	background: url(images/divider.png) no-repeat bottom;
	color: #545151;
	height: 40px;
	width: 400px;
	margin: 15px 0;
	text-shadow: 1px 1px #FFF;/* тень текста */
}
/* стили для полей ввода */
input[type=text] {
	font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
	font-size: 13px;
	background-color:rgb(255,255,255);
	color: #787474;
	padding-left: 10px;
	width:208px;
	height:33px;
	border-color:rgb(182,182,182);
	border-width:1px;
	border-style:solid;
	-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
	border-radius: 3px;
	-moz-border-radius: 3px;
}
/* меняем оформление полей ввода при фокусе */
input[type=text]:focus, .your-message:focus {
	outline: none;
	background-color:rgb(255,255,255);
	border-color:rgb(126,139,153);
	border: 1px solid;
	-moz-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
	-webkit-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
	box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
	-ms-filter:"progid:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
		progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
		progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
.your-message {
	font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
	font-size: 13px;
	background-color:rgb(255,255,255);
	color: #787474;
	padding: 10px 0 0 10px;
	width:448px;
	height:93px;
	border-color:rgb(182,182,182);
	border-width:1px;
	border-style:solid;
	-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
	position: absolute;
	top: 150px;
	left: 40px;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
 
.your-name {
	position: absolute;
	top: 100px;
	left: 40px;
}
 
.email-address {
	position: absolute;
	top: 100px;
	left: 280px;
}
/* оформляем кнопку отправки */
.send-message {
    background-color: #929FAB;
	background-image:-moz-linear-gradient(49% 0% -90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%); 
	background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(171,181,191)),color-stop(1, rgb(124,138,152)));
	background-image:-webkit-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
	background-image:-o-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
	background-image:-ms-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
	background-image:linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
	width:130px;
	height:35px;
	-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true); 
	color: #fff;
	font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
	font-size: 13px;
	text-shadow: 0 1px 0 #21405D;
	font-weight: bold;
	border: none;
	cursor: pointer;
	border-radius: 3px;
	-moz-border-radius: 3px;
	position: absolute;
	top: 269px;
	right: 100px;
}
/* оформляем кнопку отправки при наведении */
.send-message:hover{
    background-color: #A0ACB9;
	background-image:-moz-linear-gradient(49% 0% -90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%); 
	background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(170,181,195)),color-stop(1, rgb(144,157,169)));
	background-image:-webkit-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
	background-image:-o-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
	background-image:-ms-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
	background-image:linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
	width:130px;
	height:35px;
	-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
/* оформляем кнопку отправки в режиме активной */
.send-message:active{
	background-image:-moz-linear-gradient(49% 0% -90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%); 
	background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(142,154,167)),color-stop(1, rgb(124,138,152)));
	background-image:-webkit-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
	background-image:-o-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
	background-image:-ms-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
	background-image:linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
	width:130px;
	height:35px;
	-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
	-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
	box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}

dbmast.ru

Конструктор форм обратной связи онлайн для сайта

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

Особенности конструктора:

Позволяет визуально видеть все внесенные изменения.
Работа со всеми основными элементами формы: чекбоксы, радиокнопки, выпадающие списки, файлы, подписи к полям и т.д.
Может включать/отключать ненужные поля, менять их порядок (методом перетаскивания), подписи, вид и делать их обязательными к заполнению.
Возможность открытия формы во всплывающем окне.

Скриншоты:

Инструкция по использованию:

В 1 шаге выбирайте те поля, которые вам нужны и перемещайте их синей стрелкой в форму. В самой форме можно менять порядок данных полей (просто зажав поле мышкой и переместив его куда нужно) или удалять их. Подписи к чему либо нужны, чтобы озаглавить списки чекбоксов или радиокнопок — они отправляются к вам на почту.

Радиокнопки выполнены в виде уникальных наборов. Чтобы сделать несколько наборов, нажмите на кнопку дубля.

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

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

Чтобы форма работала во всплывающем окне, нажмите на последнюю галочку и настройте дополнительные параметры.

Теперь, чтобы построить форму, нажмите на кнопку «Получить код» и скопируйте результат, например, в блокнот.

Как установить полученный код на своем сайте

Данный конструктор идеально подходит на сайтах с поддержкой PHP, например, для Joomla или WordPress.

Чтобы использовать полученный код, вставьте его где угодно на вашем сайте, например, между тегами <body> и </body>

blogjquery.ru

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

.cover {
    background:#CCC; 
    width:700px; 
    margin:auto; 
    padding-left:60px;
}
 
h3.contact { 
    padding-left: 125px; 
    font-size: 66px; 
    color: #ff5400; 
    height: 105px; 
    background: url(images/contact.png) no-repeat -10px -10px;  
    font-family: sans-serif;
}
 
p.contact { 
    font-size: 24px; 
    margin-bottom: 15px; 
    line-height: 36px; 
    font-family: sans-serif, Arial; 
    color: #4b4b4b; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); 
}
 
#contact {
    margin-bottom: 0px; 
}
 
input[type="text"] {
    width: 400px; 
}
 
textarea { 
    width: 600px; 
    height: 275px; 
}
 
label { 
    color: #ff5400; 
}
 
input, textarea { 
    background-color: rgba(255, 255, 255, 0.4); 
    border: 5px solid rgba(122, 192, 0, 0.15); 
    padding: 10px; 
    font-family: Keffeesatz, Arial; 
    color: #4b4b4b; 
    font-size: 24px; 
    -webkit-border-radius: 5px;
    margin-bottom: 15px;
    margin-top: -10px;
}
 
input:focus, textarea:focus { 
    border: 5px solid #ff5400; 
    background-color: rgba(255, 255, 255, 1);
}
 
input[type="submit"] {
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
    background-color: #7ac000;
    padding: 5px 36px 8px 36px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.23, #619702),
        color-stop(0.62, #7ac000)
    );
    background: -moz-linear-gradient(
        center bottom,
        #619702 23%,
        #7ac000 62%
    );
}
 
input[type="submit"]:hover {
    color: #fff; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
    background-color: #ff5400;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.23, #c34000),
        color-stop(0.62, #ff5400)
    );
    background: -moz-linear-gradient(
        center bottom,
        #c34000 23%,
        #ff5400 62%
    );
}
 
input[type="submit"]:active { 
    top: 1px; 
}

sitehere.ru

Создание простой формы обратной связи на HTML, CSS и JavaScript

Автор: Павел Карабило

Шаг 1.

Шаг 2.

Шаг 3.

PSD to HTML

10 критериев идеальной контактной формы для сайта

Контактная форма или чат?

Функции формы обратной связи

1Заголовок

2Информативность

3Краткость

4Заголовки над полями

5Подсказки

6Работа с ошибками

7Юзабилити

8Мобильность

9Откажитесь от капчи

10Благодарность

P.S.

276 629 сайтов доверяют JivoSite

Простая контактная форма на PHP

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

Основные принципы организации обратной связи

Форма

Какие данные должны быть обязательными?

Обработка запроса на сервере

Ответ с сервера

Создаем всплывающую контактную форму для сайта

Конструктор форм обратной связи онлайн для сайта

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

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