Frontend Free Code

Frontend Free Code

Developers Codes

Javascript Codes

Suggested Posts

Feel The Power

Bootstrap Forms:

Bootstrap Form Wizard with Validation

Previous Code Next Code

Most websites have a validation form, and they try to accurate your information in a specific way. The following code is so helpful for all websites and you can use it functionally. We have provided the Bootstrap Form Wizard with Validation for you with an attractive design. This Bootstrap Simple Form Code allows the users to enter a website step by step. For entering a website with this Bootstrap Form Wizard, the users need to fill each section separately. This is a great bootstrap for any website and can attract many people.

As you see in the below preview, the Forms with Validation Code have a blue background. Plus, the title of this form is white and has a funny and beautiful font. There is a white field at the central part of the page, and it has a blue line under the writing. There is an arrow in each part. The users should fill each section and click on this arrow to move to the next step. If you don’t fill a part and select the arrow, you will face a warning, and the field moves from left to right. This Bootstrap Form Validation has different sections for personal information.

#

Bootstrap Simple Form Code

#

Forms with Validation Code

#

Bootstrap Form Wizard

#

Bootstrap Form Validation

<!-- This script got from 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://frontendfreecode.com">Free Frontend</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 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">Free Frontend</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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS