ПОДПИСКА на УРОКИ


Дополнительное видео

CSS эффект при наведении на картинку / Img Hover Effects

Animation на CSS / Анимированная кнопка с пульсирующем эффектом на CSS3

 МОБИЛЬНАЯ ВЕРСИЯ горизонтального меню | Адаптируем меню на чистом CSS


Хостинг от Макхост

Contact Form на CSS


  • Денис Горелов
  • 06.10.2017
  • CSS и CSS3
  • Просмотров: 741

Contact Form | Эффект плавающего текста в фокусе на CSS и jquery

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

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

И так, приступим к написанию кода.

Создаем каркас формы

Создаем файл стилей и index в котором подключаем css, затем ниже описываем каркас формы.

<head>
   <meta charset="UTF-8">
   <title>Контактная форма с эффектом</title>
   <link rel="stylesheet" href="style.css" type="text/css">
</head>

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

В нем вставим заголовок h3 с текстом «Задать вопрос» и за ним форму, присвоим ей класс .formBox.

Сама форма простая, строка будет состоять из описания label, и поля Input. Каждую такую строку оборачиваем в отдельный блок, блоку присвоим класс .inputBox, label с классом .inputText, input с класс .userInput, все это поможет в дальнейшем придать этим полям индивидуальное оформление.

<wrapper>
   <div class="dws-wrapper">
      <div class="dws-container">
         <h3>Задать вопрос</h3>
         <form class="formBox">
            <div class="inputBox">
               <label class="labelText">Ваше имя:</label>
               <input class="userInput" type="text" name="name">
            </div>
         </form>
      </div>
   </div>
</wrapper>  

Таких блоков делаем пять штук, и меняем у них текстовое содержимое. Последнее поле input размещаем первым и установим у него checkbox, у label меняем класс и описание.

Внизу добавляем кнопку с классом .button.

<form class="formBox">
   <div class="inputBox">
      <label class="labelText">Ваше имя:</label>
      <input class="userInput" type="text" name="name">
   </div>
   <div class="inputBox">
      <label class="labelText">E-mail:</label>
      <input class="userInput" type="text" name="name">
   </div>
   <div class="inputBox">
      <label class="labelText">Номер телефона:</label>
      <input class="userInput" type="text" name="name">
   </div>
   <div class="inputBox">
      <label class="labelText">Сообщение:</label>
      <input class="userInput" type="text" name="name">
   </div>
   <div class="inputBox">
      <input type="checkbox">
      <label>Я согласен на обработку моих <a href="#">персональных данных</a></label>
   </div>
   <input type="submit" value="Отправить" class="button">
</form>    

Структура формы

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

Описываем стили формы

Переходим в файл CSS, для body сбрасываю отступы и установлю шрифт Arial.

body {
 margin: 0;
 padding: 0;
 font-family: Arial, sans-serif;
}    

Для удобства позиционирую форму посередине, отбираю класс .dws-wrapper который мы присваивали для этих целей, и при помощи transform размещаем форму посередине экрана.

.dws-wrapper {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}  

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

.dws-container {
 outline: 1px solid orange;
}    

Оформляем поля формы в CSS

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

background-image: url("img/ep_naturalwhite.png");    

Затем для формы сделаем внутренние отступы в 30 пик, задаем обводку в 4 пик бордового цвета, и задний фон сделаем белого цвета.

Оформляем форму в CSS

.formBox {
 padding: 30px;
 border: 4px solid #8a36a5;
 background: #fff;
}    

Далее оформляем шапку формы, отбираем класс .dws-container h3, задаем блоку бордовый цвет background: #8a36a5;, шрифт делаем белый и центруем его посередине. Выравниваем кнопку по середине блока, и увеличим шрифт до 24 пик. Внутренние отступы сверху и снизу по 10 пик, закругляем верхние углы, ширину укажем в процентах 85% от ширины родителя, при наведении отобразим курсор.

.dws-container h3 {
 background: #8a36a5;
 color: #ffffff;
 text-align: center;
 margin: 0 auto;
 font-size: 24px;
 padding: 10px 0;
 border-radius: 8px 8px 0 0;
 width: 85%;
 cursor: pointer;
}   

Оформляем внешний вида label и input

Начинаем оформление с их родителя, отбираю класс .inputBox и выделяю границы блока, при помощи outline: 1px solid orange;. Сбросим внешние отступы и зададим их только снизу в 20 пик.

.inputBox {
 outline: 1px solid orange;
 margin: 0 0 20px;
}    

Затем приступим к оформлению внутренних элементов. Начнем с блока label с текстовым содержанием. Отбираем класс .inputText, увеличим шрифт до 20 пик., и делаем его немного светлее color: #a5a5a5;.

.labelText {
 font-size: 18px;
 color: #a5a5a5;
}    

Теперь задача расположить данный текст в области input и оформить поля для ввода.

Отбираем все input, для этого поможет класса .userInput который до этого присваивали, ширину установим в 100%, и добавим outline, посмотрим тем самым границы полей.

Текст увеличим на 20 пик., задаем ему цвет немного посветлее color: #575454;. и если скроем outline, то в фокусе появляется область выделения, она нам не нужна и для этого что бы ее убрать outline пропишем в none. Скрываем обводку border: none;, а для нижней черты задаем подчеркивание в 1 пик. border-bottom: 1px solid #a5a5a5;,

Текст в форме

.userInput {
 width: 100%;
 height: 50px;
 font-size: 20px;
 color: #575454;
 outline: none;
 border: none;
 border-bottom: 1px solid #a5a5a5;
}    

Теперь займемся самим текстом и с позиционируем его в input на место области ввода. То-есть, до момента ввода, текст будет расположен в самом поле инпут.

Для этого добавляем родителю .inputBox, position: relative, а блок с классом .inputText позиционируем абсолютно,  тем самым при помощи line-height текст опустим ниже.

Оформляем label текст

.inputBox {
 position: relative;
 margin: 0 0 20px;
}
.labelText {
 position: absolute;
 line-height: 55px;
 font-size: 18px;
 color: #a5a5a5;
}    

Описываем стиль, когда курсор в фокусе

Добавим отдельный класс .focus для блока с классом .inputBox, и за счет этого класса, который будет добавляться и удалятся мы сделаем плавное подымать и опускать текста при помощи transform.

<div class="inputBox focus">    

Для элементов в фокусе (.focus .labelTex) пишем данный стиль. За счет transform: translateY(-30px), подымаем текст по оси Y, уменьшаем его размер до 14 пик., и меняем цвет на фиолетовый.

.focus .labelText {
 transform: translateY(-30px);
 font-size: 14px;
 color: #b33edc;
}    

Что бы сделать анимированный плавный переход, присвоим блоку с классом .labelText, transition в пол секунды.

color: #a5a5a5;
 transition: .5s;
}    

Когда стиль класса .focus описан, теперь стоит задача добавить его к блоку с классом .inputBox, у которого на этот момент курсор будет находиться в фокусе. Для примера, если его уберем, текст плавно опускается, добавляем, подымается.

Для анимации добавляем класс

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

Переходим на сайт Jquery, копируем ссылку и подключаем библиотеку в области head.

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>    

В нижней части открываем, тег script и пишем следующее выражение, если класс .userInput в фокусе, тогда выполняем данную функцию. При помощи метода parent() находим родителя верхнего уровня, а это блок с классом .inputBox, он является родителем и добавляем для него класс .focus при помощи метода addClass().

<script>
    $(".userInput").focus(function () {
        $(this).parent().addClass("focus");
    })
</script>    

Я думаю, многие из вас с этой конструкцией знакомы, и особое внимание тут не заостряем.

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

Оформляем класс focus

Все это происходит из-за того что текстом позиционировали на область input, соответственно он на переднем плане и заграждает поле для ввода.

Эта задача легко решается путем прописывания position: relative; для input, теперь они находятся на переднем плане, и остается сделать их прозрачность, для того чтобы появился текст, добавляем background: transparent;.

.userInput {
 width: 100%;
 height: 45px;
 font-size: 20px;
 color: #575454;
 outline: none;
 border: none;
 border-bottom: 1px solid #a5a5a5;
 position: relative;
 background: transparent;
}    

Теперь, когда курсор в фокусе, получили данную анимацию.

Затем остается удалить класс у родителя, когда элемент теряет фокус. Для этого воспользуемся событием blur(). Которое запустит функцию, где мы проверяем по условию, если поле пустое, тогда у первого родителя добавленный класс .focus удаляем.

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

<script>
    $(".userInput").focus(function () {
        $(this).parent().addClass("focus");
    }).blur(function () {
        if ($(this).val() === '') {
            $(this).parent().removeClass("focus");
        }
    })
</script>  

Проверяем полученный результат.

Обводку можно убрать, для блока с формой добавим фиксированную ширину в 350 пик, и при помощи overflow: hidden;  скроем все за ее пределами.

.dws-container {
 width: 350px;
 overflow: hidden;
}    

Теперь оформим и обработаем поля для проверки на валидацию.

Валидация форм в HTML5

Добавляем для первого поля соответствующий type и name, и для проверки введенных в него данных добавим атрибут required который по умолчанию у нас всегда выключен.

<input type="text" name="name" class="userInput" required>    

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

Валидация формы

Переходим к следующему полю, и так как это email прописываем для него соответствующие type и name, прописывает атрибут required для проверки введенных поля.

<input type="email" name="email" class="userInput" required>   

Для input с телефоном, добавляем type и name, и дополнительно дописываем регулярное выражение pattern="\d+"  где проверяем на ввод чисел.

<input type="tel" name="phone" class="userInput" required pattern="\d+">    

Для текстового поля изменим inpyt на textarea и добавим класс .userInput.

<textarea class="userInput" name="message" required></textarea>   

Checkbox укажем, что поле обязательное для заполнения при помощи required.

<input type="checkbox" name="" required>    

Оформляем соглашение в CSS

Отбираем поле textarea.userInput, делаем высоту в 100 пик, и делаем верхние отступы в 10 пик. что бы набираемый текст не сливался с текстом из label.

textarea.userInput {
 height: 100px;
 margin-top: 12px;
}    

У текста с соглашением, изменим цвет и ссылку на серый цвет.

.personalDoc,
.personalDoc a {
 color: #858585;
}    

А при наведении на ссылку, уберем подчеркивание и цвет заменим на фиолетовый.

.personalDoc a:hover {
 text-decoration: none;
 color: #b33edc;
}    

Оформляем кнопку в CSS

Для, оформления кнопки, отбираем ее класс .button, затем меняем цвет кнопки, текст делаем белым, ширину задаем в процентах, высоту в 35 пик., увеличим шрифт до 18 пик и уберем обводку. Зададим отступы с верху и расположим кнопку с левой стороны. Добавим курсор и поменяем цвет ссылки по наведению, делаем кнопку немного ярче. Для плавности изменения цвета добавим классу .button, transition в пол секунды.

.button {
 background: #8a36a5;
 color: #ffffff;
 width: 45%;
 height: 35px;
 font-size: 18px;
 border: none;
 margin-top: 10px;
 margin-left: 55%;
 cursor: pointer;
 transition: .5s;
}
.button:hover {
 background: #b33edc;
}    

Проверяем валидация form

Добавляем иконку

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">    

На сайте, отберем наш вариант иконки, копируем код и вставим его в заголовке.

<h3><i class="fa fa-question-circle"></i>Задать вопрос</h3>    

Переходим в стили и позиционируем иконку абсолютно родителя, задаем отступы сверху и слева, увеличим ее до 40 пик.

Вставляем иконку

h3 i {
 position: absolute;
 top: 7px;
 left: 40px;
 font-size: 40px!important;
}    

Анимируем появление формы

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

В данном варианте можно воспользоваться Jquery и при помощи его отловить клик, а далее анимировать, но для разнообразии покажу, как это можно реализовать при помощи CSS3, где задействуем checkbox.

И так, допишем немного структуру формы, добавим перед блоком с классом .dws-container еще один Input c атрибутом checkbox. Пропишем для него идентификатор id="dws-form" и зададим класс .toggleForm.

<input type="checkbox" name="toggle" id="dws-form" class="toggleForm">    

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

Для этого пропишем заголовку в место h3 тег label и воспользуемся атрибутом for которому передадим id input, добавим дополнительный класс для его оформления.

<label for="dws-form" class="toggleForm"><i class="fa fa-question-circle"></i>Задать вопрос</label>    

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

В стилях находим, где задавали оформление для заголовка, меняем .dws-container h3 на .toggleForm, делаем его блочным элементом display: block;. Для иконки меняем h3 i на класс .toggleForm I и немного подкорректируем стили.

Отступы сверху делаем в 18 пик, убираем приоритет увеличения шрифта.

.toggleForm {
 display: block;
 background: #8a36a5;
 color: #ffffff;
 text-align: center;
 margin: 0 auto;
 font-size: 24px;
 padding: 10px 0;
 border-radius: 8px 8px 0 0;
 width: 85%;
 cursor: pointer;
}
.toggleForm i {
 position: absolute;
 top: 18px;
 left: 40px;
 font-size: 40px;
}    

Делаем плавную анимацию появления

Закомментируем стили при помощи, которых центровали блок. Добавляем классу .dws-container, position: fixed; при помои которого закрепляем форму в определенной области экрана и далее задаем отступы, снизу устанавливаем в ноль, а справой стороны в 10%.

Съехала немного иконка, вернем ее в начальное положение, изменим верхние отступы на 7 пик.

Далее при помощи трансформации по оси Y transform: translateY(516px); , опусти форму за пределы экрана.

.dws-container {
 position: fixed;
 bottom: 0;
 right: 10%;
 width: 350px;
 overflow: hidden;
 transform: translateY(516px);
 transition: .5s ease;
}    

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

.dws-container:hover {
 transform: translateY(510px);
}    

Добавляем плавность анимации при помощи transition: .5s ease;

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

Отлавливаем клик по форме

.toggleForm:checked ~ .dws-container {
 transform: translateY(0);
}    

В завершении скрываем чекбокс, для этого приписываем для него display: none;.

.toggleForm[type="checkbox"]{
 display: none;
}    

В итоге получили симпатичную форму с различными эффектами.

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

Урок подготовил Горелов Денис.

Оставить комментарий:

Отзывы

Отзывов нет.

Написать отзыв

* - Обязательные поля

Выбирай свою тему, и мы напишем когда выйдет по ней очередное видео.