Step Form

HTML

<section class="section step-form-section valign" id="sfm-main-section">
        <div class="container">
            <div class="row py-5">
                <div class="col-md-6 col-lg-6 text-center ">
                    <div class="sfm-form-main text-white">
                        <h4 class="mb-lg-4">Sign Up</h4>
                        <div class="sfm-sfm-status-main sfm-pdb15">
                            <ul class="sfm-status-main-list">
                                <li class="st1 active">1. Contact Info</li>
                                <li class="st2">2. Investing Experience</li>
                            </ul>
                            <div class="divider-botttom">
                                <i class="fa-solid fa-angles-right"></i>
                            </div>
                        </div>
                        <form action="form-post.php" method="post" class="sfm-form" id="sfm-form">
                            <div class="sfmtab">
                                <div class="row">
                                    <div class="col-md-6 col-lg-6">
                                        <div class="form-group mb-2">
                                        <i class="fa-solid fa-user"></i>
                                        <input type="text" class="form-control " id="exampleFormControlInput1" placeholder="First Name" >
                                        </div>
                                        <div class="form-group mb-2">
                                            <i class="fa-regular fa-envelope"></i>
                                            <input type="email" class="form-control " id="exampleFormControlInput1" placeholder="Email ID" >
                                        </div>
                                        <div class="form-group mb-2">
                                            <i class="fa-solid fa-building"></i>
                                            <input type="text" class="form-control " id="exampleFormControlInput1" placeholder="Company Name" >
                                        </div>
                                        <div class="form-group mb-2">
                                            <i class="fa-solid fa-clipboard-list"></i>
                                            <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Company Address">
                                        </div>
                                        <div class="form-group mb-2">
                                            <i class="fa-solid fa-phone"></i>
                                            <input type="number" class="form-control" id="exampleFormControlInput1" placeholder="Company Phone no.">
                                        </div>
                                        
                                    </div>
                                    <div class="col-md-6 col-lg-6">
                                        <div class="form-group mb-2">
                                            <i class="fa-solid fa-user"></i>
                                            <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Last name">
                                        </div>
                                        <div class="form-group mb-2">
                                            <i class="fa-solid fa-phone"></i>
                                            <input type="number" class="form-control" id="exampleFormControlInput1" placeholder="phone number" pattern="[0-9]{10}">
                                        </div>
                                        <div class="form-group mb-2">
                                            <i class="fa-solid fa-globe"></i>
                                            <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Country" >
                                        </div>
                                        <div class="form-group mb-2">
                                            <i class="fa-solid fa-user"></i>
                                            <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="State" >
                                        </div>
                                        <div class="form-group mb-2">
                                            <i class="fa-solid fa-user"></i>
                                            <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="City" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- tab2 -->
                            <div class="sfmtab">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 sfm-big-label">
                                        <label class="big-label-ques">Are you accredited investor?</label>
                                        <div class="form-group mb-2 sfm-big-label box-grid-flexed">
                                            
                                            <label class="radio-container">
                                                <input type="radio" name="accredited" value="yes">
                                                <span class="custom-radio"></span>
                                                <span class="radio-label">Yes</span>
                                            </label>
                                            
                                            
                                            <label class="radio-container">
                                                <input type="radio" name="accredited" value="no">
                                                <span class="custom-radio"></span>
                                                <span class="radio-label">No</span>
                                            </label>
                                            
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 sfm-big-label">
                                        <label class="big-label-ques">Have you previously invested in startups or early-stage companies?</label>
                                        <div class="form-group mb-2 sfm-big-label box-grid-flexed">
                                                <label class="radio-container">
                                                    <input type="radio" name="invested" value="yes">
                                                    <span class="custom-radio"></span>
                                                    <span class="radio-label">Yes</span>
                                                </label>
                                                <label class="radio-container">
                                                    <input type="radio" name="invested" value="no">
                                                    <span class="custom-radio"></span>
                                                    <span class="radio-label">No</span>
                                                </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 sfm-big-label">
                                        <label class="big-label-ques">How many?</label>
                                        <div class="form-group mb-2">
                                            <i class="fa-solid fa-cubes"></i>
                                            <select id="sfm-select1" name="">
                                                <option value="placeholder" selected>Select Number</option>
                                                <option value="1">1</option>
                                                <option value="1-5">1-5</option>
                                                <option value="5-10">5-10</option>
                                                <option value="10+">10+</option>
                                              </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 sfm-big-label">
                                        <label class="big-label-ques">How many?</label>
                                        <div class="form-group mb-2">
                                            <i class="fa-solid fa-cubes"></i>
                                            <select id="sfm-select1" name="">
                                                <option value="placeholder" selected>Select Number</option>
                                                <option value="1">1</option>
                                                <option value="1-5">1-5</option>
                                                <option value="5-10">5-10</option>
                                                <option value="10+">10+</option>
                                              </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 sfm-big-label">
                                        <label class="big-label-ques text-center">Have you had any startup exits previously where you gained a return on your investment?</label>
                                        <div class="form-group mb-2 sfm-big-label box-grid-flexed">
                                            <label class="radio-container">
                                                <input type="radio" name="startup1" value="yes">
                                                <span class="custom-radio"></span>
                                                <span class="radio-label">Yes</span>
                                            </label>
                                    
                                            <label class="radio-container">
                                                <input type="radio" name="startup1" value="no">
                                                <span class="custom-radio"></span>
                                                <span class="radio-label">No</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 sfm-big-label">
                                        <label class="big-label-ques">How much capital have you previously invested in total?</label>
                                        <div class="form-group mb-2">
                                            <i class="fa-solid fa-cubes"></i>
                                            <select id="sfm-select1" name="">
                                                <option value="placeholder" selected>Select Number</option>
                                                <option value="1">1</option>
                                                <option value="1-5">1-5</option>
                                                <option value="5-10">5-10</option>
                                                <option value="10+">10+</option>
                                              </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- buttons -->
                            <div class="sfm-buttom-grp">
                                <div class="row">
                                    <div class="col-md-12 col-lg-12 pt-3">
                                        <!-- <button class="btn btn-lg sfm-btn-style" type="button">Next</button> -->
                                        <button type="button" class="btn btn-lg sfm-btn-style" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
                                        <button type="button" class="btn btn-lg sfm-btn-style" id="nextBtn" onclick="nextPrev(1)">Next</button>
                                    </div>
                                    <div style="text-align:center;margin-top:40px;">
                                        <span class="step"></span>
                                        <span class="step"></span>
                                      </div>
                                </div>
                            </div>
                          </form>

                    </div>
                </div>
                <div class="col-md-6 col-lg-6 text-center">
                    <div class="sfm-content-group">
                        <div class="sfm-logo-inner">
                            <img src="" alt="" class="img-fluid" loading="lazy">
                        </div>
                        <div class="sfm-heading-group text-white">
                            <div class="sfm-title">
                                <h3 class="text-white">Startup account creation</h3>
                            </div>
                            <div class="sfm-desc">
                                <p>Welcome to Raiselink</p>
                            </div>
                            <div class="sfm-image-wrapper">
                                <img src="https://nuitsolutions.co.in/nova/nova_form_meta/assets/images/hosting3-home-image-11.png" alt="" class="img-fluid" loading="lazy">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS

body .container{
    width: 80%;
    margin: auto;
}
.sfm-pdb15{
padding-bottom: 15px;
}
.valign{
    display: grid;
    align-items: center;
}
.sfm-image-wrapper img
{
    width: 350px;
    height: 500px;
}
.step-form-section{
    background-image: url('https://nuitsolutions.co.in/nova/nova_form_meta/assets/images/Section_bg.jpg');
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    /* height: 100vh; */
    background-size: 100% 100%;
}
.sfm-form-main{
    background: rgb(16,8,40);
background: linear-gradient(45deg, rgba(16,8,40,1) 0%, rgba(168,109,225,1) 50%, rgba(61,30,120,1) 100%);
    padding: 30px 25px;
    border-radius: 8px;
}
.sfm-btn-style{
    background-color: #000;
    color: #fff;
    /* width: 90%; */
    margin-inline: 15px !important;
    transition: 0.5s ease;
    padding: 10px 50px;

}
.sfm-btn-style:hover{
    background-color: #fff0;
    border: 1px solid #301653 !important;
    color:#000 !important;


}
.sfm-status-main-list{
    list-style-type:none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 40px;
}
.form-group input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #000;
    opacity: 1; /* Firefox */
  }
  
  .form-group input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #000;
  }
  
  .form-group input::-ms-input-placeholder { /* Microsoft Edge */
    color: #000;
  }
.sfm-form .form-group input, .sfm-form .form-group select {
    border: 1px solid #8c7ca4;
    border-radius: 5px;
    padding: 15px 15px 15px 35px;
    margin-bottom: 20px;
}
.sfm-form .form-group input::before{
    content: "";
    position:absolute;
    width: 1px;
    height: 10px;
    color: #8c7ca4;
    top: 0;
    left: 10px;

}
.sfm-form .form-group{
    position: relative;
}
.sfm-form .form-group i{
    position: absolute;
    left: 12.5px;
    top: 20px;
    z-index: 3;
    color: rgba(61,30,120,1);
    font-size: 18px;
}
.sfm-buttom-grp{
    overflow:hidden;
    
}
.sfmtab{
    display: none;
}
.sfm-form .form-group input.invalid {
    background-color: #ffdddd;
  }
  .step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;  
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
  }
  .step.active {
    opacity: 1;
  }
  
  /* Mark the steps that are finished and valid: */
  .step.finish {
    background-color: #04AA6D;
  }
.sfm-big-label{
    text-align: left;
}
.sfm-big-label .big-label-ques{
    display: grid;
}
.box-grid-flexed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
}
.sfm-status-main-list li{
    color: #1c003e;
    font-weight: 700;
    font-size: 17px;
}
.sfm-form .form-group select{
    width: 100%;
    padding: 15px 0 15px 35px;
    border-radius: 7px;
}
.divider-botttom{
    position: relative;
    margin-top: -14px;
    margin-left: -20px;
}
.divider-botttom::before, .divider-botttom::after{
    content: "";
    width: 150px;
    height: 2px;
    border: 1.6px dashed #fff;
    border-bottom: 0px;
    border-inline: 0px;
    background-color: #fff0;
    position: absolute;
    top: 0px;
    left: -180px;
    right: 0;
    bottom: 0;
    margin: auto;
}

.divider-botttom::after{
    left: 0px;
    right: -180px;
}
.sfm-status-main-list li{
    position: relative;
}
.sfm-status-main-list .st1::before, .sfm-status-main-list .st2::before{
    border: 1px solid #fff;
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 0px;
    right: 0;
    bottom: -20px;
    margin: auto;
    z-index: 99;
}

.sfm-status-main-list .st1.active::before, .sfm-status-main-list li.active::before{
    background-color: blue;
}
 .radio-container {
    position: relative;
    display: inline-block;
}

.radio-label {
    font-size: 24px;
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    transition: all 300ms ease;
    user-select: none;
    color: #000;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0;
    text-align: center;
}

input[type="radio"] {
    display: none;
}

.custom-radio {
    max-width: 100%;
    background-color: #fff0;
    box-shadow: 0px 3px 6px #0000000f;
    border: 1px solid #CBCBCB;
    border-radius: 5px;
    display: block;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-family: inherit;
    font-weight: 900;
    margin-right: 0px;
    padding: 25px 50%;
    margin-bottom: 10px;
}

/* Style for the custom radio button when selected */
input[type="radio"]:checked + .custom-radio::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #ffffff1f;
    position: absolute;
    top: 0%;
    left: 0%;
}
@media only screen and (max-width: 991px){
    .step-form-section {
        background-size: cover;
        height: max-content;
    }
}

JS

console.log('i am loaded');
var currentTab = 0;
showTab(currentTab);
function showTab(n) {
    // This function will display the specified tab of the form...
    var x = document.getElementsByClassName("sfmtab");
    x[n].style.display = "block";
    //... and fix the Previous/Next buttons:
    if (n == 0) {
      document.getElementById("prevBtn").style.display = "none";
    } else {
      document.getElementById("prevBtn").style.display = "inline";
    }
    if (n == (x.length - 1)) {
      document.getElementById("nextBtn").innerHTML = "Submit";
    } else {
      document.getElementById("nextBtn").innerHTML = "Next";
    }
    //... and run a function that will display the correct step indicator:
    fixStepIndicator(n)
  }
  function nextPrev(n) {
    // This function will figure out which tab to display
    var x = document.getElementsByClassName("sfmtab");
    // Exit the function if any field in the current tab is invalid:
    if (n == 1 && !validateForm()) return false;
    // Hide the current tab:
    x[currentTab].style.display = "none";
    // Increase or decrease the current tab by 1:
    currentTab = currentTab + n;
    // if you have reached the end of the form...
    if (currentTab >= x.length) {
      // ... the form gets submitted:
      document.getElementById("sfm-form").submit();
      return false;
    }
    // Otherwise, display the correct tab:
    showTab(currentTab);
  }
  
  function validateForm() {
    // This function deals with validation of the form fields
    var x, y, i, valid = true;
    x = document.getElementsByClassName("sfmtab");
    
    y = x[currentTab].getElementsByClassName("test1");
    // let input = document.querySelectorAll('input');
    // y = x[currentTab].input.hasAttribute('required');
    // A loop that checks every input field in the current tab:
    for (i = 0; i < y.length; i++) {
      // If a field is empty...
      if (y[i].value == "") {
        // add an "invalid" class to the field:
        y[i].className += " invalid";
        // and set the current valid status to false
        valid = false;
      }
    }
    // If the valid status is true, mark the step as finished and valid:
    if (valid) {
      document.getElementsByClassName("step")[currentTab].className += " finish";
    }
    return valid; // return the valid status
  }
  
  function fixStepIndicator(n) {
    // This function removes the "active" class of all steps...
    var i, x = document.getElementsByClassName("step");
    for (i = 0; i < x.length; i++) {
      x[i].className = x[i].className.replace(" active", "");
    }
    //... and adds the "active" class on the current step:
    x[n].className += " active";
  }
  jQuery(document).ready(function(){ 
      jQuery('#nextBtn').on('click', function(){
        console.log('clicked');
        jQuery('.sfm-status-main-list .st1').removeClass('active');
        jQuery('.sfm-status-main-list li.st1').next().addClass('active');
      })
      jQuery('#prevBtn').on('click', function(){
        console.log('clicked prev');
        jQuery('.sfm-status-main-list li').prev().addClass('active');
        jQuery('.sfm-status-main-list .st2').removeClass('active');
      })
      jQuery('.sfm-status-main-list .st1').addClass('active');
  })

Links

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js' ></script>
<script type='text/javascript' src="assets/js/main.js"></script>