Создадим красивую анимированную форму подписки на новости для сайта с валидацией, используя 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
Сначала мы делаем стили для всего body — display: 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 для работы с формами.
