Главная » Сниппеты » Стили CSS для форм обратной связи

Стили CSS для форм обратной связи

Форма обратной связи, или если по другому, , один из самых важных элементов любого сайта. И конечно же, как и все другие элементы пользовательского интерфейса, контактные формы, должны быть как-то внешне стилизованы и оформлены, дабы привлечь внимание пользователей и расположить к общению.
Предлагаю на ваше обозрение парочку вариантов стилей форм обратной связи, исключительно средствами CSS3, без использования дополнительных изображений в оформлении. Ничего лишнего, лишь короткие фрагменты кода (сниппеты) CSS для контактных форм, выполненных в светлых и тёмных тонах.
 

1. Контактная форма в тёмных тонах

В зависимости от цвета основного фона страницы, визуально будет меняться базовый цвет фона самой формы. Размер формы зависит от размеров контейнера, в котором форма будет расположена.
 
Стили CSS для формы контактов

HTML

Html каркас формы стандартный, необходимые поля ввода и кнопка «Отправить», для связки с CSS, каждому элементу формы присвоен определённый класс, ничего сложного, разобраться будет нетрудно.
 

<form>
    <input name="name" placeholder="Укажите ваше имя!" class="name" required />
    <input name="emailaddress" placeholder="Укажите ваш Email!" class="email" type="email" required />
    <textarea rows="4" cols="50" name="subject" placeholder="Введите ваше сообщение:" class="message" required></textarea>
    <input name="submit" class="btn" type="submit" value="Отправить" />
</form>

 

CSS

По стилям особо расписывать ничего не буду, отмечу лишь одно, в оформлении использовал некоторые свойства CSS3, линейный градиент, эффект тени, слегка скруглённые углы и т.д., постарался добиться некой кроссбраузерности для этих свойств, но в старых версиях браузеров, форма будет выглядеть всё же несколько иначе ((.
 

/* Базовый стиль формы */
form {
    margin: 0 auto;
    max-width: 95%;
    padding: 30px 30px 6px 30px;
    border: 1px solid rgba(0,0,0,.2);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    overflow: hidden; 
}
/* Поле сообщения */
textarea{
    background: rgba(255, 255, 255, 0.4); 
    width: 100%;
    height: 110px;
    border: 1px solid rgba(255,255,255,.6);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
    display:block;
    font-family: 'Open Sans', sans-serif;
    font-size:18px;
    font-weight: 300;
    color:#fff;
    padding-left:25px;
    padding-right:20px;
    padding-top:12px;
    margin-bottom:20px;
    overflow:hidden;
}
/* Поля ввода */
input {
    width: 100%;
    height: 48px;
    border: 1px solid rgba(255,255,255,.4);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
    display:block;
    font-family: 'Open Sans', sans-serif;
    font-size:18px;
    font-weight: 300;    
    color:#fff;
    padding-left:20px;
    padding-right:20px;
    margin-bottom:20px;
}
input[type=submit] {
    cursor:pointer;
}
input.name {
    background: rgba(255, 255, 255, 0.4); 
    padding-left:25px;
}
input.email {
    background: rgba(255, 255, 255, 0.4);
    padding-left:25px;
}
input.message {
    background: rgba(255, 255, 255, 0.4);
    padding-left:25px;
}
::-webkit-input-placeholder {
    color: #fff;
}
:-moz-placeholder{ 
    color: #fff; 
}
::-moz-placeholder {
    color: #fff;
}
:-ms-input-placeholder {  
    color: #fff; 
}
input:focus, textarea:focus { 
    background-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    overflow: hidden; 
}
/* Стили для кнопки отправить */
.btn {
    width: 138px;
    height: 44px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    float:right;
    border: 1px solid #253737;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
    background: -webkit-linear-gradient(top, #6da5a3, #416b68);
    background: -moz-linear-gradient(top, #6da5a3, #416b68);
    background: -ms-linear-gradient(top, #6da5a3, #416b68);
    background: -o-linear-gradient(top, #6da5a3, #416b68);
    background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
    padding: 10.5px 21px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    text-shadow: #333333 0 1px 0;
    color: #e1e1e1;
}
.btn:hover {
    border: 1px solid #253737;
    text-shadow: #333333 0 1px 0;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
    background: -webkit-linear-gradient(top, #77b2b0, #416b68);
    background: -moz-linear-gradient(top, #77b2b0, #416b68);
    background: -ms-linear-gradient(top, #77b2b0, #416b68);
    background: -o-linear-gradient(top, #77b2b0, #416b68);
    background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
    color: #fff;
 }
.btn:active {
    margin-top:1px;
    text-shadow: #333333 0 -1px 0;
    border: 1px solid #333333;
    background: #ffCC00;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600));
    background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
    background: -moz-linear-gradient(top, #ffcc00, #ff6600);
    background: -ms-linear-gradient(top, #ffcc00, #ff6600);
    background: -o-linear-gradient(top, #ffcc00, #ff6600);
    background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
    color: #fff;
    -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    outline: none;
}

 

2. Контактная форма в светлых тонах

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

HTML

Как и в первом варианте, структура Html контактной формы стандартная, элементы формы с определёнными классами, соответствующими классам в CSS.
 

<form>
   <input name="name" placeholder="Укажите ваше имя!" class="textbox" required />
   <input name="emailaddress" placeholder="Укажите ваш Email!" class="textbox" type="email" required />
   <textarea rows="4" cols="50" name="subject" placeholder="Введите ваше сообщение:" class="message" required></textarea>
   <input name="submit" class="button" type="submit" value="Отправить" />
</form>

 

CSS

При формировании базовых размеров форм и внутренних элементов, использовал процентные значения для ширины width, благодаря чему, форма легко подстраивается под размеры контейнера в котором она будет расположена. Цветовая гамма кнопки «Отправить», её размеры и расположения, легко меняются, достаточно поэкспериментировать с определёнными значениями.
 

/* Базовые стили формы */
form{
  margin:0 auto;
  max-width:95%;
  box-sizing:border-box;
  padding:40px;
  border-radius:5px; 
  background:RGBA(255,255,255,1);
  -webkit-box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45);        
  box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45);  
}
/* Стили полей ввода */
.textbox{
  height:50px;
  width:100%;
  border-radius:3px;
  border:rgba(0,0,0,.3) 2px solid;
  box-sizing:border-box;
  font-family: 'Open Sans', sans-serif;
  font-size:18px; 
  padding:10px;
  margin-bottom:30px;  
}
.message:focus,
.textbox:focus{
  outline:none;
   border:rgba(24,149,215,1) 2px solid;
   color:rgba(24,149,215,1);
}
/* Стили текстового поля */
.message{
    background: rgba(255, 255, 255, 0.4); 
    width:100%;
    height: 120px;
    border:rgba(0,0,0,.3) 2px solid;
    box-sizing:border-box;
    -moz-border-radius: 3px;
    font-size:18px;
    font-family: 'Open Sans', sans-serif;
    -webkit-border-radius: 3px;
    border-radius: 3px; 
    display:block;
    padding:10px;
    margin-bottom:30px;
    overflow:hidden;
}
/* Базовые стили кнопки */
.button{
  height:50px;
  width:100%;
  border-radius:3px;
  border:rgba(0,0,0,.3) 0px solid;
  box-sizing:border-box;
  padding:10px;
  background:#90c843;
  color:#FFF;
  font-family: 'Open Sans', sans-serif;  
  font-weight:400;
  font-size: 16pt;
  transition:background .4s;
  cursor:pointer;
}
/* Изменение фона кнопки при наведении */
.button:hover{
  background:#80b438;
}

 
Вариантов оформления контактных форм масса, главное иметь чуточку фантазии и базовые знания CSS. На страницах моего блога, вы можете найти другие, готовые решения и примеры стилистики форм обратной связи.
Для особо невнимательных, хочу, в который уже раз, пояснить: представленные в статье формы, это всего лишь внешняя оболочка, чтобы формы реально выполняли свои функции, к ним необходимо прикрутить скрипт-обработчик, коих полно разбросано в «интернетах», так что убедительная просьба, не писать в комментариях, что формы не работают и т.п., всё прекрасно работает, просто нужно понимать что, куда и зачем ))).

С уважением, Андрей.

Буду очень признателен, если поделитесь ссылкой на запись с друзьями в своих соц. сетях.

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

14 комментариев
  1. Евгений:

    А где указать email на который письма должны приходить?

    Ответить
    • driver:

      Здравствуйте.

      Это лишь обложка, стили форм, email получателя указывается непосредственно в php-обработчике, который у вас должен быть установлен

      Ответить
  2. Андрей:

    Подкскажите пожалуйста как добавить выпадающее меню для выбора категорий?

    Ответить
    • driver:

      Используйте теги <select> и <option>, или же один из новых элементов HTML5, <datalist>.

      Ответить
  3. Евгений:

    Здравствуйте, незнаю, читаете вы комментарии еще или нет, но все же спрошу. Во второй форме при незаполнении одного из полей выскакиевает сообшение типа «Please fill out this field»; так вот вопрос, как эту надпись изменить? и где она указывается?

    Ответить
    • driver:

      Здравствуйте. Конечно же я читаю комментарии и стараюсь отвечать, если конечно вопросы внятные. Что касается вашего вопроса.

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

      В каком браузере вы просматриваете примеры форм? Например в Chrome сообщение выглядит так: тынц

      Ответить
  4. Нина:

    Здравствуйте! Подскажите, пожалуйста, все работает нормально, за одним исключением: в поле «укажите ваше имя» — вместо надписи появляется " / ", удаляя его уже на сайте, воспроизводится надпись в поле... Не могу понять почему так получается и как это справить... В остальных полях все как надо отображается...

    Ответить
  5. driver:

    Здравствуйте, Нина.

    Текст внутри поля формы выводится с помощью атрибута placeholder. Для поля ввода имени должно быть так: placeholder="Укажите ваше имя!".

    Для первой формы:

    <input name="name" placeholder="Укажите ваше имя!" class="name" required />

    Для второй(светлой):

    <input name="name" placeholder="Укажите ваше имя!" class="textbox" required />

    Ответить
    • Нина:

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

      [+validationmessage+]

      Онлайн запись:

      и почему-то только в первой строке с именем берется слеш...

      Ответить
    • Нина:

      <div id="respond"> [+validationmessage+] <form method="post" action="[~[*id*]~]"> <input type="hidden" name="formid" value="contact-form" /> <p align="center"><span style="font-size: 16pt;">Онлайн запись:</span></p><br/> <input name="name" placeholder="Ваше имя!" class="textbox" eform="Имя:text:1" /> <input name="tel" placeholder="Ваш телефон!" class="textbox" type="tel" eform="Телефон:tel:1" />

      Ответить
      • driver:

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

        Ответить
        • Нина:

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

          я тут еще с модальным окном для модх мозг свернула))) может знаете, где почитать/посмотреть как на этой цмс установку делать?

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

        • Нина:

          ёёёхоу...))

          нашла решение, делюсь)) вдруг еще кому-то пригодится.

          ненужный слеш исчез, после добавления в код еще одного параметра: type="text"

          полностью код:<input type="text" name="name" placeholder="Ваше имя!" class="textbox" eform="Имя:text:1" />

          и все стало красивенько!!

          спасибо большое за саму форму!!

        • driver:

          Бывает))) Бревна в глазу я и незаметил

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru