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

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

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

Email*

Выбери свою тему

Предложи новую тему

Соглашение на обработку перс. данных *

Предоставлено SendPulse

скачать

Demo

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

Описание видео
Отзывы

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 пик бордового цвета, и задний фон сделаем белого цвета.

.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 текст опустим ниже.

.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, мы увидим его границы, и как раз в этой области, клик не срабатывает.

Все это происходит из-за того что текстом позиционировали на область 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;
}

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

С оформлением кнопки закончили, и теперь займемся к добавлению иконки к заголовку. Для этого подключим шрифты при помощи 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;
}

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

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

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

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

Загрузка...

Отзывы

Отзывов нет.

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

Ваше имя:*

Текст отзыва:*

Защита от автоматического заполнения:

CAPTCHA

Введите слово с картинки:*

Отправляя форму, Вы принимаете условия "Соглашения на обработку персональных данных"

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

5 предыдущих видео

CSS эффект при наведении на картинку / Img Hover Effects Просмотров:(
0
)
Animation на CSS / Анимированная кнопка с пульсирующем эффектом на CSS3 Просмотров:(
0
)
Кнопка с анимацией для сайта на CSS Просмотров:(
0
)
Media queries CSS / Адаптации страниц Просмотров:(
0
)
МОБИЛЬНАЯ ВЕРСИЯ горизонтального меню | Адаптируем меню на чистом CSS Просмотров:(
0
)

Контактная форма с Анимацией на CSS и Jquery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отзывы

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

5 предыдущих видео