Multi-step form interface

Developer
Emil Devantie Brockdorff
Size
4,718 Kb
Views
38,456
  1. Multi-step form interface Previews
  2. Multi-step form interface HTML Codes
  3. Multi-step form interface CSS Codes
  4. Multi-step form interface JS Codes

How do I make an multi-step form interface?

From: http://webdesign.tutsplus.com/articles/build-a-multi-step-form-interface--webdesign-11715. What is a multi-step form interface? How do you make a multi-step form interface? This script and codes were developed by Emil Devantie Brockdorff on 11 September 2022, Sunday.

Multi-step form interface Previews
IQ Test

Multi-step form interface - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multi-step form interface</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form id="signup" action="somewhere" method="POST"> <ul id="section-tabs"> <li class="current active"><span>1.</span> Creds</li> <li><span>2.</span> Deets</li> <li><span>3.</span> Settings</li> <li><span>4.</span> Last Words</li> </ul> <div id="fieldsets"> <fieldset class="current"> <label for="email">Email:</label> <input name="email" type="email" class="required email" /> <label name="password" for="password">Password:</label> <input type="password" minlength="10" class="required"> </fieldset> <fieldset class="next"> <label for="username">Username:</label> <input name="username" type="text"> <label for="bio">Short Bio:</label> <textarea name="bio" class="required"></textarea> </fieldset> <fieldset class="next"> <label for="interests">Basic Interests:</label> <textarea name="bio"></textarea> <p>Receive newsletter?<br> <input type="radio" name="newsletter" value="yes"><label for="newsletter">yes</label> <input type="radio" name="newsletter" value="no"><label for="newsletter">no</label> </p> </fieldset> <fieldset class="next"> <label for="referrer">Referred by:</label> <input type="text" name="referrer"> <label for="phone">Daytime Phone:</label> <input type="tel" name="phone"> </fieldset> <a class="btn" id="next">Next Section ▷</a> <input type="submit" class="btn"> </div>
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Multi-step form interface - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:300);
@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:700);
body { background: url(http://farm5.staticflickr.com/4139/4825532997\_7a7cd3d640\_b.jpg); background-size: cover; height: 100%; font-family: 'Merriweather Sans', sans-serif; color: #666;
}
#signup { width: 600px; height: auto; padding: 20px; background: #fff; margin: 80px auto; position: relative; min-height: 300px;
}
#fieldsets { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; overflow: hidden;
}
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
textarea { display: block; -webkit-appearance: none; -moz-appearance: none; width: 100%; box-sizing: border-box; border: 1px solid #ddd; padding: 8px; margin-bottom: 8px; position: relative;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
textarea:focus { outline: none; border: 1px solid #22918b;
}
input[type=radio] { margin: 6px; display: inline-block;
}
fieldset { border: none; position: absolute; left: -640px; width: 600px; padding: 10px 0; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; opacity: 0;
}
fieldset.current { left: 20px; opacity: 1;
}
fieldset.next { left: 640px;
}
input[type=submit] { display: none; border: none;
}
#section-tabs { font-size: 0.8em; height: 50px; position: relative; margin-top: -50px; margin-bottom: 50px; padding: 0; font-weight: bold; list-style: none; text-transform: uppercase;
}
#section-tabs li { color: #a7a7a7; cursor: not-allowed; border-left: 1px solid #aaa; text-decoration: none; padding: 0 6px; float: left; width: 25%; box-sizing: border-box; text-align: center; font-weight: bold; line-height: 30px; background: #ddd; position: relative;
}
#section-tabs li span { color: #bababa;
}
#section-tabs li.active { color: #444; cursor: pointer;
}
#section-tabs li:after { content: ""; display: block; margin-left: 0; position: absolute; left: 0; top: 0;
}
#section-tabs li.current { opacity: 1; background: #fff; z-index: 999; border-left: none;
}
#section-tabs li.current:after { border: 15px solid transparent; border-left: 15px solid #2cbab2;
}
.error { color: #bf2424; display: block;
}
input.error,
textarea.error { border-color: #bf2424;
}
input.error:focus,
textarea.error:focus { border-color: #bf2424;
}
label.error { margin-bottom: 20px;
}
input.valid { color: green;
}
label.valid { position: absolute; right: 20px;
}
input + .valid,
textarea + .valid { display: none;
}
.valid + .valid { display: inline; position: absolute; right: 10px; margin-top: -36px; color: green;
}
.btn { border: none; padding: 8px; background: #2cbab2; cursor: pointer; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; color: #fff; position: absolute; bottom: 20px; right: 20px; font-family: 'Merriweather Sans', sans-serif;
}
.btn:hover { background: #26a19a;
}

Multi-step form interface - Script Codes JS Codes

$("body").on("keyup", "form", function(e){ if (e.which == 13){ if ($("#next").is(":visible") && $("fieldset.current").find("input, textarea").valid() ){ e.preventDefault(); nextSection(); return false; } }
});
$("#next").on("click", function(e){ console.log(e.target); nextSection();
});
$("form").on("submit", function(e){ if ($("#next").is(":visible") || $("fieldset.current").index() < 3){ e.preventDefault(); }
});
function goToSection(i){ $("fieldset:gt("+i+")").removeClass("current").addClass("next"); $("fieldset:lt("+i+")").removeClass("current"); $("li").eq(i).addClass("current").siblings().removeClass("current"); setTimeout(function(){ $("fieldset").eq(i).removeClass("next").addClass("current active"); if ($("fieldset.current").index() == 3){ $("#next").hide(); $("input[type=submit]").show(); } else { $("#next").show(); $("input[type=submit]").hide(); } }, 80);
}
function nextSection(){ var i = $("fieldset.current").index(); if (i < 3){ $("li").eq(i+1).addClass("active"); goToSection(i+1); }
}
$("li").on("click", function(e){ var i = $(this).index(); if ($(this).hasClass("active")){ goToSection(i); } else { alert("Please complete previous sections first."); }
});
Multi-step form interface - Script Codes
Multi-step form interface - Script Codes
Home Page Home
Developer Emil Devantie Brockdorff
Username Mestika
Uploaded September 11, 2022
Rating 3.5
Size 4,718 Kb
Views 38,456
Do you need developer help for Multi-step form interface?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emil Devantie Brockdorff (Mestika) Script Codes
Name
Vertical Timeline
Getting Data From the Wikipedia API Using jQuery
Hover.css
Email Template
CSS FlowChart
Responsive Email Template
Image Caption Hover Animation
Cool Css3 Image Hover Effects
Stretchy Navigation
Eventbrite HTML Email Template
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!