Блог

Делаем анимированную форму подписки с валидацией

9 ноября 2020

Создадим красивую анимированную форму подписки на новости для сайта с валидацией, используя HTML CSS и JavaScript.

Форма подписки
Форма подписки

Что делаем

Эта форма подписки по электронной почте имеет небольшой эффект анимации с проверкой. Я использовал jQuery для создания функции валидации, все остальные остались в чистом JS.

Перед тем, как поделиться исходным кодом, давайте поговорим о том, как можно создать форму. Как вы уже знаете, для создания этой формы подписки по электронной почте я использовал HTML, CSS, JavaScript и jQuery.

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

HTML

Сначала обсудим часть HTML. Я создал div и поместил в него форму.

Перед input я разместил кнопку button для подписки, а затем разместил поле input для ввода электронной почты с кнопкой для отправки. После этого я создал div для поздравления после отправки электронного письма:

<div class="main">
        <form id="singular-form">
            <button class="shown" type="button" id="subs">Subscribe</button>
            <div id="email-input">
                <input type="text" placeholder="E-mail" id="email">
                <button type="button" class="addbut1" disabled="disabled">Add Me</button>
            </div>
            <div id="success">Congrats!</div>
        </form>
    </div>

Далее я привязал CSS, JS, jQuery и ссылку на шрифт внутри HTML. Я использовал шрифт Google для создания привлекательного интерфейса.

CSS

Сначала мы делаем стили для всего bodydisplay: flex; и height: 100vh;. Высота 100vh используется для полной высоты экрана.

По сути, значение 100vh — это 100% высота области просмотра (viewport). Я использовал функцию cubic-bezier(), определяющую кубическую кривую Безье. Осталось поработать с цветом, шрифтом и переходами.

JavaScript

JavaScript выполняет основную работу. В основном я использовал функцию JS Constants. Константы имеют блочную область видимости, как и переменные, определенные с помощью оператора let.

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

Также мы добавляем много условий, например, если кнопка нажата, появится поле электронной почты с анимацией задержки 0,6 секунды и т.п.

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

jQuery

Мы использовали jQuery для реализации валидации формы. Сначала создаем шаблон электронной почты с объявлением допустимых условий. Например: 4 символа перед @, должна иметь @, после @ требуется минимум 3 символа, далее точка, и затем минимум 2 символа. Паттерн выглядит так:

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

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

Создание формы

Для создания этой программы нам необходимо создать 3 файла — для HTML, второй для CSS и третий для JavaScript.

Первым делом создаем index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Форма подписки с валидацией</title>
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css"> 
</head>
<body>

  <div class="main">
        <form id="singular-form">
            <button class="shown" type="button" id="subs">Subscribe</button>
            <div id="email-input">
                <input type="text" placeholder="E-mail" id="email">
                <button type="button" class="addbut1" disabled="disabled">Add Me</button>
            </div>
            <div id="success">Congrats!</div>
        </form>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script  src="function.js"></script>

</body>
</html>

Теперь создайте файл CSS с именем «style.css» и поместите в него код ниже:

* {
    font-size: 2rem;
    font-family: 'Righteous', cursive;
    font-weight: bold;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: #333;
}
.main {
    width: 19rem;
    height: 5rem;
    padding: 12px;
    background-color: white;
    text-align: center;
    border-radius: 3rem;
    overflow: hidden;
    transition: width .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.main>#singular-form {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;
}
.main>#singular-form button {
    width: 9rem;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 3rem;
    cursor: pointer;
}
.main>#singular-form>button#subs {
    padding: 0;
    width: 100%;
    color: #fbb016;
    background-color: transparent;
    z-index: 3;
}
.main>#singular-form>#email-input {
    z-index: 2;
}
.main>#singular-form>#email-input>input {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    border: none;
    outline: none;
    padding: 0 26% 0 3%;
    opacity: 0;
    transform: scale(0);
    transition: all .6s ease .4s;
}
.main>#singular-form>#email-input>button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #fbb016;
    color: white;
    opacity: 0;
    transform: scale(0);
    transition: all .6s ease .4s;
}
.main>#singular-form>#success {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fbb016;
    font-weight: bold;
    z-index: 1;
}
.main>#singular-form>button#subs,
.main>#singular-form>#email-input,
.main>#singular-form>#success {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(0);
    opacity: 0;
}
.main>#singular-form>button#subs {
    transition: all .6s ease;
}
.main>#singular-form>#email-input {
    transform: scale(1);
    opacity: 1;
    transition: all .6s ease .4s;
}

.main>#singular-form>#success {
    transition: all .2s ease .6s;
}
.main>#singular-form>button#subs.shown,
.main>#singular-form>#email-input.shown,
.main>#singular-form>#success.shown,
.main>#singular-form>#email-input>button.shown,
.main>#singular-form>#email-input>input.shown {
    transform: scale(1);
    opacity: 1;
}

Последний шаг — создайте файл JS с именем «function.js» и поместите в него следующий код:

var validateEmail = function(elementValue) {
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    return emailPattern.test(elementValue);
}
$('#email').keyup(function() {

    var value = $(this).val();
    var valid = validateEmail(value);

    if (!valid) {
        $(this).css('color', 'red');
		$('.addbut1').prop('disabled', true);
    } else {
        $(this).css('color', '#2bb673');
		$('.addbut1').prop('disabled', false);
    }
});

const newsletter = {};

newsletter.main = document.querySelector('.main');
newsletter.form = document.querySelector('.main > #singular-form');
newsletter.subs = document.querySelector('.main > #singular-form > button#subs');
newsletter.input = document.querySelector('.main>#singular-form>#email-input>input');
newsletter.submitButton = document.querySelector('.main > #singular-form > #email-input > button');
newsletter.successMessage = document.querySelector('.main > #singular-form > #success');

newsletter.submitDelay = 1000;

newsletter.clickHandler = (e) => {
    switch (e.target) {
        case newsletter.subs:
            console.log('case subs');
            newsletter.main.style.width = '37rem'
            e.target.classList.remove('shown');
            newsletter.input.classList.add('shown');
            newsletter.submitButton.classList.add('shown');
            newsletter.input.focus();
            break;
        case newsletter.submitButton:
            newsletter.submitForm();
            break;
    }
}
newsletter.handleInputKeypress = (e) => {
    if (e.keyCode === 13) {
        e.preventDefault();
        newsletter.submitForm();
    }
}
newsletter.submitForm = () => {
    newsletter.input.style.transition = 'all .6s ease';
    newsletter.submitButton.style.transition = 'all .6s ease';
    newsletter.input.classList.remove('shown');
    newsletter.submitButton.classList.remove('shown');
    newsletter.main.style.transition = 'all .6s cubic-bezier(0.47, 0.47, 0.27, 1.20) .4s';
    newsletter.main.style.width = '';
    newsletter.successMessage.classList.add('shown');
    let submission = setTimeout(() => newsletter.form.submit(), newsletter.submitDelay);
}

newsletter.input.addEventListener('keypress', (e) => newsletter.handleInputKeypress(e));
document.addEventListener('click', (e) => newsletter.clickHandler(e));

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

Опубликовано 9 ноября 2020 в 18:01
Обновлено 10 августа 2024 в 10:43
Категория: Блог
Теги: , ,

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Реклама

Связь со мной

uzabila@yandex.ru