content logo

Bootstrap Forms:

Bootstrap Form Wizard with Validation

This code can be used when we want the user of our website to fill in each field and then go to the next step. In this code, a field is displayed first and the user must fill it in to display the next field of the form. If the user does not fill in the field and presses the next button, the text box will move left and right and will show a warning to fill the field by making the text input red.

#Bootstrap Simple Form Code #Forms with Validation Code #Bootstrap Form Wizard #Bootstrap Form Validation

<!-- This script got from www.frontendfreecode.com -->
<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><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
@import url("https://fonts.googleapis.com/css?family=Pacifico|Roboto");
body {
    background: #428bca;
    font-family: "Roboto", sans-serif;
    margin: 50px;
}
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%;
    }
    #input-group #input-label {
        font-size: 13px;
    }
    body {
        margin: 5px;
    }
}
// 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);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Pacifico|Roboto");
body {
    background: #428bca;
    font-family: "Roboto", sans-serif;
    margin: 50px;
}
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%;
    }
    #input-group #input-label {
        font-size: 13px;
    }
    body {
        margin: 5px;
    }
}
</style>

</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><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>
<script>
// 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);
}
</script>

</body>
</html>
Preview