"Fancy Form"
Bootstrap 4.1.1 Snippet by Demky

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <link rel="stylesheet" href="css/main.css"> <title>Fancy Form</title> </head> <body> <div id="container"> <h1 class="logo">Fancy Form</h1> <div id="form-box"> <i id="prev-btn" class="fas fa-arrow-left"></i> <i id="next-btn" class="fas fa-arrow-right"></i> <div id="input-group"> <input id="input-field" required> <label id="input-label"></label> <div id="input-progress"></div> </div> <div id="progress-bar"></div> </div> </div> <script src="js/main.js"></script> </body> </html>
@import url("https://fonts.googleapis.com/css?family=Pacifico|Roboto"); body { background: #428bca; font-family: 'Roboto', sans-serif; margin: 0; } h1.logo { color: #fff; font-family: 'Pacifico', cursive; font-size: 4em; margin-bottom:1em;} h1.end { position: relative; color: #fff; opacity: 0; transition: 0.8s ease-in-out; } #container { height: 100vh; display: flex; flex-direction: column; justify-content: top; align-items: center; } #form-box { background: #fff; position: relative; width: 600px; border-top-right-radius: 5px; border-top-left-radius: 5px; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.1), 0 6px 10px 5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.2); transition: transform 0.1s ease-in-out; } #form-box.close { width: 0; padding: 0; overflow: hidden; transition: 0.8s ease-in-out; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0); } #next-btn { position: absolute; right: 20px; bottom: 10px; font-size: 40px; color: #428bca; float: right; cursor: pointer; z-index: 2; } #next-btn:hover { color: #b9d4ec; } #prev-btn { position: absolute; font-size: 18px; left: 30px; top: 12px; z-index: 2; color: #9e9e9e; float: right; cursor: pointer; } #prev-btn:hover { color: #b9d4ec; } #input-group { position: relative; padding: 30px 20px 20px 20px; margin: 10px 60px 10px 10px; opacity: 0; transition: opacity 0.3s ease-in-out; } #input-group input { position: relative; width: 100%; border: none; font-size: 20px; font-weight: bold; outline: 0; background: transparent; box-shadow: none; } #input-group #input-label { position: absolute; pointer-events: none; top: 32px; left: 20px; font-size: 20px; font-weight: bold; transition: 0.2s ease-in-out; } #input-group input:valid + #input-label { top: 6px; left: 42px; margin-left: 0 !important; font-size: 11px; font-weight: normal; color: #9e9e9e; } #input-progress { border-bottom: 3px solid #428bca; width: 0; transition: width 0.6s ease-in-out; } #progress-bar { position: absolute; background: #b9d4ec; height: 10px; width: 0; transition: width 0.5s ease-in-out; } .close #next-btn, .close #prev-btn { color: #fff; } .error #input-progress { border-color: #ff2d26; } .error #next-btn { color: #ff2d26; } @media (max-width: 600px) { #form-box { width: 80%; } }
// Questions Array const questions = [ { question: 'Enter Your First Name' }, { question: 'Enter Your Last Name' }, { question: 'Enter Your Email', pattern: /\S+@\S+\.\S+/ }, { question: 'Create A Password', type: 'password' } ]; // Transition Times const shakeTime = 100; // Shake Transition Time const switchTime = 200; // Transition Between Questions // Init Position At First Question let position = 0; // Init DOM Elements const formBox = document.querySelector('#form-box'); const nextBtn = document.querySelector('#next-btn'); const prevBtn = document.querySelector('#prev-btn'); const inputGroup = document.querySelector('#input-group'); const inputField = document.querySelector('#input-field'); const inputLabel = document.querySelector('#input-label'); const inputProgress = document.querySelector('#input-progress'); const progress = document.querySelector('#progress-bar'); // EVENTS // Get Question On DOM Load document.addEventListener('DOMContentLoaded', getQuestion); // Next Button Click nextBtn.addEventListener('click', validate); // Input Field Enter Click inputField.addEventListener('keyup', e => { if (e.keyCode == 13) { validate(); } }); // FUNCTIONS // Get Question From Array & Add To Markup function getQuestion() { // Get Current Question inputLabel.innerHTML = questions[position].question; // Get Current Type inputField.type = questions[position].type || 'text'; // Get Current Answer inputField.value = questions[position].answer || ''; // Focus On Element inputField.focus(); // Set Progress Bar Width - Variable to the questions length progress.style.width = (position * 100) / questions.length + '%'; // Add User Icon OR Back Arrow Depending On Question prevBtn.className = position ? 'fas fa-arrow-left' : 'fas fa-user'; showQuestion(); } // Display Question To User function showQuestion() { inputGroup.style.opacity = 1; inputProgress.style.transition = ''; inputProgress.style.width = '100%'; } // Hide Question From User function hideQuestion() { inputGroup.style.opacity = 0; inputLabel.style.marginLeft = 0; inputProgress.style.width = 0; inputProgress.style.transition = 'none'; inputGroup.style.border = null; } // Transform To Create Shake Motion function transform(x, y) { formBox.style.transform = `translate(${x}px, ${y}px)`; } // Validate Field function validate() { // Make Sure Pattern Matches If There Is One if (!inputField.value.match(questions[position].pattern || /.+/)) { inputFail(); } else { inputPass(); } } // Field Input Fail function inputFail() { formBox.className = 'error'; // Repeat Shake Motion - Set i to number of shakes for (let i = 0; i < 6; i++) { setTimeout(transform, shakeTime * i, ((i % 2) * 2 - 1) * 20, 0); setTimeout(transform, shakeTime * 6, 0, 0); inputField.focus(); } } // Field Input Passed function inputPass() { formBox.className = ''; setTimeout(transform, shakeTime * 0, 0, 10); setTimeout(transform, shakeTime * 1, 0, 0); // Store Answer In Array questions[position].answer = inputField.value; // Increment Position position++; // If New Question, Hide Current and Get Next if (questions[position]) { hideQuestion(); getQuestion(); } else { // Remove If No More Questions hideQuestion(); formBox.className = 'close'; progress.style.width = '100%'; // Form Complete formComplete(); } } // All Fields Complete - Show h1 end function formComplete() { const h1 = document.createElement('h1'); h1.classList.add('end'); h1.appendChild( document.createTextNode( `Thanks ${ questions[0].answer } You are registered and will get an email shortly` ) ); setTimeout(() => { formBox.parentElement.appendChild(h1); setTimeout(() => (h1.style.opacity = 1), 50); }, 1000); }

Related: See More


Questions / Comments: