Home
Code Library
Templates
Contact Us
Step Form
Date
: August 26, 2023
Developed By:
Ujwal Joshi
Sign Up
1. Contact Info
2. Investing Experience
Are you accredited investor?
Yes
No
Have you previously invested in startups or early-stage companies?
Yes
No
How many?
Select Number
1
1-5
5-10
10+
How many?
Select Number
1
1-5
5-10
10+
Have you had any startup exits previously where you gained a return on your investment?
Yes
No
How much capital have you previously invested in total?
Select Number
1
1-5
5-10
10+
Previous
Next
Startup account creation
Welcome to Raiselink
View Source
HTML
CSS
JS
Links
Scripts
HTML
Copy
<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
Copy
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
Copy
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
Copy
<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
Copy
<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>
New
×