249 lines
10 KiB
HTML
249 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html class="no-js" lang="en">
|
|
|
|
<!-- Mirrored from preetheme.com/html/multitier/demo/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 13 Oct 2023 03:12:08 GMT -->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>MultiTier - MultiStep Multipurpose HTML5 Form</title>
|
|
<link rel="icon" href="img/icon.png" type="image/gif" sizes="16x16">
|
|
<link rel="icon" href="img/icon.png" type="image/gif" sizes="18x18">
|
|
<link rel="icon" href="img/icon.png" type="image/gif" sizes="20x20">
|
|
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="css/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<main class="main-section style-2">
|
|
<!-- Left Area -->
|
|
<div class="left-sidebar-area" style="background-image: url('img/left-bg.jpg');">
|
|
<div class="left-sidebar-area-full">
|
|
<div class="logo">
|
|
<a href="index2.html">
|
|
<img src="img/logo-w.png" alt="logo">
|
|
</a>
|
|
</div>
|
|
<div class="content">
|
|
<h2>Easy-to-use ready HTML forms for every business.</h2>
|
|
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Quia quisquam nobis at dolorem fugiat minima veniam amet dolores iusto illum non in molestiae necessitatibus doloribus voluptate aliquam praesentium corrupti, magnam.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Area -->
|
|
<div class="right-wrapper-area">
|
|
<div class="right-wrapper-area-full">
|
|
<div class="from-section-full">
|
|
<div id="wizard_container">
|
|
<div id="top-wizard">
|
|
<div id="progressbar"></div>
|
|
</div>
|
|
<!-- /top-wizard -->
|
|
<form method="POST">
|
|
<input id="website" name="website" type="text" value="">
|
|
<!-- Leave for security protection, read docs for details -->
|
|
<div id="middle-wizard">
|
|
<div class="step">
|
|
<h3 class="main_question"><strong>1/4</strong>Please fill with your details</h3>
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<input type="text" name="firstname" class="form-control required" placeholder="First Name">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<input type="text" name="lastname" class="form-control required" placeholder="Last Name">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<input type="email" name="email" class="form-control required" placeholder="Your Email">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<input type="text" name="mobile" class="form-control " placeholder="Mobile Number">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<select class="wide required" name="country">
|
|
<option value="">Your Country</option>
|
|
<option value="Europe">Europe</option>
|
|
<option value="Asia">Asia</option>
|
|
<option value="North America">North America</option>
|
|
<option value="South America">South America</option>
|
|
<option value="Oceania">Oceania</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<select class="wide required" name="city">
|
|
<option value="">Your City</option>
|
|
<option value="city_1">City 1</option>
|
|
<option value="city_2">City 2</option>
|
|
<option value="city_3">City 3</option>
|
|
<option value="city_4">City 4</option>
|
|
<option value="city_5">City 5</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<input type="text" name="address" class="form-control required" placeholder="Your Address">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="form-group">
|
|
<input type="text" name="age" class="form-control" placeholder="Age">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="form-group radio_input">
|
|
<label class="container_radio">Male
|
|
<input type="radio" name="gender" value="Male" class="required">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
<label class="container_radio">Female
|
|
<input type="radio" name="gender" value="Female" class="required">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /row -->
|
|
<div class="form-group terms">
|
|
<label class="container_check">Please accept our <a href="#" data-bs-toggle="modal" data-bs-target="#terms-txt">Terms and conditions</a>
|
|
<input type="checkbox" name="terms" value="Yes" class="required">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- /step-->
|
|
<div class="step">
|
|
<h3 class="main_question"><strong>2/4</strong>Make a Multiple Choice Test Template Using Excel</h3>
|
|
<div class="form-group">
|
|
<label class="container_radio version_2">Activate Developer Tab
|
|
<input type="radio" name="question_1" value="Activate Developer Tab" class="required" onchange="getVals(this, 'question_1');">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="container_radio version_2">Providing a Lecturer
|
|
<input type="radio" name="question_1" value="Providing a Lecturer" class="required" onchange="getVals(this, 'question_1');">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="container_radio version_2">Personally Quizzes
|
|
<input type="radio" name="question_1" value="Personally Quizzes" class="required" onchange="getVals(this, 'question_1');">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="container_radio version_2">Massive Batches
|
|
<input type="radio" name="question_1" value="Massive Batches" class="required" onchange="getVals(this, 'question_1');">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="container_radio version_2">Extremely Satisfied
|
|
<input type="radio" name="question_1" value="Extremely Satisfied" class="required" onchange="getVals(this, 'question_1');">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- /step-->
|
|
<div class="step">
|
|
<h3 class="main_question"><strong>3/4</strong>Select What Suits you Best and Help us Improve Our Services.</h3>
|
|
<div class="form-group">
|
|
<label class="container_check version_2">Fronted Developer
|
|
<input type="checkbox" name="question_2[]" value="Fronted Developer" class="required" onchange="getVals(this, 'question_2');">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="container_check version_2">Web Designer
|
|
<input type="checkbox" name="question_2[]" value="Web Designer" class="required" onchange="getVals(this, 'question_2');">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="container_check version_2">Full Stack Developer
|
|
<input type="checkbox" name="question_2[]" value="Full Stack Developer" class="required" onchange="getVals(this, 'question_2');">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="container_check version_2">Backend Developer
|
|
<input type="checkbox" name="question_2[]" value="Backend Developer" class="required" onchange="getVals(this, 'question_2');">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="container_check version_2">Other
|
|
<input type="checkbox" name="question_2[]" value="Other" class="required" onchange="getVals(this, 'question_2');">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>In no, please describe with few words why</label>
|
|
<textarea name="additional_message" class="form-control" style="height:100px;" placeholder="Type here additional info..." onkeyup="getVals(this, 'additional_message');"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- /step-->
|
|
<div class="submit step result-before-submit">
|
|
<h3 class="main_question"><strong>4/4</strong>Summary</h3>
|
|
<div class="summary">
|
|
<ul>
|
|
<li><strong>1</strong>
|
|
<h5>Make a Multiple Choice Test Template Using Excel</h5>
|
|
<p id="question_1"></p>
|
|
</li>
|
|
<li><strong>2</strong>
|
|
<h5>Select What Suits you Best and Help us Improve Our Services.</h5>
|
|
<p id="question_2"></p>
|
|
<p id="additional_message"></p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- /step-->
|
|
</div>
|
|
<!-- /middle-wizard -->
|
|
<div id="bottom-wizard">
|
|
<button type="button" name="backward" class="backward">Prev</button>
|
|
<button type="button" name="forward" class="forward">Next</button>
|
|
<button type="submit" name="process" class="submit">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
|
<!-- Js File -->
|
|
<script src="js/jquery-3.6.3.min.js"></script>
|
|
<script src="js/all.scripts.js"></script>
|
|
<script src="js/survey.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
<!-- Mirrored from preetheme.com/html/multitier/demo/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 13 Oct 2023 03:12:12 GMT -->
|
|
</html> |