Slick Two Part Form

Developer
Matt Litherland
Size
6,199 Kb
Views
109,296
  1. Slick Two Part Form Previews
  2. Slick Two Part Form HTML Codes
  3. Slick Two Part Form CSS Codes
  4. Slick Two Part Form JS Codes

How do I make an slick two part form?

A slick two part form using HAML, SCSS & Jquery. The form uses CSS mixins and animations. . What is a slick two part form? How do you make a slick two part form? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.

Slick Two Part Form Previews
IQ Test

Slick Two Part Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slick Two Part Form</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class='container'> <!-- / Form --> <form> <!-- / Header --> <h3>Create my account!</h3> <!-- / Fieldset Alpha --> <fieldset class='alpha'> <legend><b>1.</b> Your Info</legend> <div class='frow'> <input class='item' placeholder='Username' type='text'> </div> <div class='frow'> <input class='item' placeholder='Email' type='email'> </div> <div class='frow'> <input class='item' placeholder='Password' type='password'> </div> <div class='frow'> <a class='next-step' href='#'>Let's go!</a> </div> </fieldset> <!-- / Fieldset Beta --> <fieldset class='beta'> <legend><b>2.</b>Your Social Profiles</legend> <div class='frow'> <input class='item' placeholder='CodePen' required='required' type='url'> </div> <div class='frow'> <input class='item' placeholder='Dribbble' required='required' type='url'> </div> <div class='frow'> <input class='item' placeholder='Behance' required='required' type='url'> </div> <div class='frow'> <a class='prev-step' href='#'>Go back!</a> </div> <div class='frow'> <input class='submit' type='submit' value="I'm all done!"> </div> </fieldset> <!-- / Fieldset Charlie --> <fieldset class='charlie'> <legend><b>3.</b>Your All Done</legend> <div class='frow'> <p>Thanks</p> </div> </fieldset> </form>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slick Two Part Form - Script Codes CSS Codes

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body, html { margin: 0; padding: 0; height: 100%; background: #000; background-image: url("http://subtlepatterns.com/patterns/hexabump.png"); font-size: 16px;
}
body { padding: 25px; z-index: -1;
}
body::before { display: block; position: absolute; content: ""; top: 0; right: 0; left: 0; height: 8px; opacity: 1; z-index: 0; background: #31dddb; box-shadow: 0 9px 0 rgba(255, 255, 255, 0.1);
}
.container { display: block; position: relative; margin: 0 auto; width: 100%; max-width: 400px; min-width: 300px;
}
h3 { color: #fff; font-size: 2em; font-weight: bold; font-family: "Lato", sans-serif; text-shadow: 0 0 10px #000; text-align: center;
}
p { color: #555; clear: both;
}
form { float: left; display: block; width: 100%; position: relative;
}
form fieldset { float: left; position: absolute; width: 100%; padding: 20px; border: none; border-radius: 5px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); background: #fff; background: #f5f5f5; background: -webkit-linear-gradient(0deg, #eee 0%, #f5f5f5 100%); background: -moz-linear-gradient(0deg, #eee 0%, #f5f5f5 100%); background: -o-linear-gradient(0deg, #eee 0%, #f5f5f5 100%); background: linear-gradient(0deg, #eee 0%, #f5f5f5 100%); /* W3C */
}
form fieldset legend { float: left; display: block; width: 100%; position: relative; border-bottom: 1px solid #dfdfdf; top: 0; left: 0; clear: both; margin-bottom: 20px; padding-bottom: 10px; line-height: 30px; color: #444; text-shadow: 0 1px 0 #fff;
}
form fieldset.beta, form fieldset.charlie { display: none;
}
form fieldset .frow { float: left; display: block; width: 100%; margin-bottom: 10px;
}
form fieldset .frow:last-child { margin-bottom: 0px;
}
form fieldset input { float: left; width: 100%; padding: 12px 6px; font-size: 14px; font-weight: 400; font-family: "Open Sans", sans-serif; border: 1px solid #dedede; border-radius: 5px; box-shadow: 0 0 0 transparent, inset 0 0 5px #eee; -webkit-transition: all 0.2s ease-in-out;
}
form fieldset input::-webkit-input-placeholder { color: #ccc; opacity: 1; -webkit-transition: opacity 0.2s ease-in-out;
}
form fieldset input:focus { outline: none; border: 1px solid #27c1bf; box-shadow: 0 0 10px #27c1bf; -webkit-transition: all 0.2s ease-in-out;
}
form fieldset input:focus::-webkit-input-placeholder { opacity: 0.5;
}
form fieldset a.next-step,
form fieldset a.prev-step,
form fieldset input[type="submit"] { display: block; width: 100%; height: 50px; padding: 0; background: #31dddb; line-height: 50px; text-align: center; text-decoration: none; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); font-size: 1.2em; font-family: "Helvetica Neue", sans-serif; font-weight: 400; color: #fff; border: 1px solid #27c1bf; border-radius: 4px; box-shadow: 0 0 0 transparent;
}
form fieldset a.prev-step { background: #4a76a8; border: 1px solid #1d5b90;
}
.out, .alpha.out, .beta.out { z-index: 0; opacity: 1; display: block; -webkit-animation: out 0.75s ease forwards; -moz-animation: out 0.75s ease forwards; -o-animation: out 0.75s ease forwards; animation: out 0.75s ease forwards;
}
@-webkit-keyframes out { 0% { -webkit-transform: scale(1); opacity: 1; } 25% { -webkit-transform: scale(1.05); } 99% { -webkit-transform: scale(0.8); } 100% { opacity: 0; display: none; }
}
@-moz-keyframes out { 0% { -moz-transform: scale(1); opacity: 1; } 25% { -moz-transform: scale(1.05); } 99% { -moz-transform: scale(0.8); } 100% { opacity: 0; display: none; }
}
@-o-keyframes out { 0% { -o-transform: scale(1); opacity: 1; } 25% { -o-transform: scale(1.05); } 99% { -o-transform: scale(0.8); } 100% { opacity: 0; display: none; }
}
@keyframes out { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 25% { -webkit-transform: scale(1.05); transform: scale(1.05); } 99% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { opacity: 0; display: none; }
}
.in, .beta.in { z-index: 30; display: block; opacity: 0; -webkit-animation: in 0.75s ease forwards 0.25s; -moz-animation: in 0.75s ease forwards 0.25s; -o-animation: in 0.75s ease forwards 0.25s; animation: in 0.75s ease forwards 0.25s;
}
@-webkit-keyframes in { 0% { -webkit-transform: translate3d(150px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0px, 0, 0); opacity: 1; }
}
@-moz-keyframes in { 0% { -moz-transform: translate3d(150px, 0, 0); opacity: 0; } 100% { -moz-transform: translate3d(0px, 0, 0); opacity: 1; }
}
@-o-keyframes in { 0% { -o-transform: translate3d(150px, 0, 0); opacity: 0; } 100% { -o-transform: translate3d(0px, 0, 0); opacity: 1; }
}
@keyframes in { 0% { -webkit-transform: translate3d(150px, 0, 0); -moz-transform: translate3d(150px, 0, 0); -o-transform: translate3d(150px, 0, 0); transform: translate3d(150px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0px, 0, 0); -o-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); opacity: 1; }
}
.alpha.in { z-index: 30; display: block; opacity: 0; -webkit-animation: in-prev 0.75s ease forwards 0.25s; -moz-animation: in-prev 0.75s ease forwards 0.25s; -o-animation: in-prev 0.75s ease forwards 0.25s; animation: in-prev 0.75s ease forwards 0.25s;
}
@-webkit-keyframes in-prev { 0% { -webkit-transform: translate3d(-150px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0px, 0, 0); opacity: 1; }
}
@-moz-keyframes in-prev { 0% { -moz-transform: translate3d(-150px, 0, 0); opacity: 0; } 100% { -moz-transform: translate3d(0px, 0, 0); opacity: 1; }
}
@-o-keyframes in-prev { 0% { -o-transform: translate3d(-150px, 0, 0); opacity: 0; } 100% { -o-transform: translate3d(0px, 0, 0); opacity: 1; }
}
@keyframes in-prev { 0% { -webkit-transform: translate3d(-150px, 0, 0); -moz-transform: translate3d(-150px, 0, 0); -o-transform: translate3d(-150px, 0, 0); transform: translate3d(-150px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0px, 0, 0); -o-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); opacity: 1; }
}
.charlie.in { z-index: 30; display: block; opacity: 0; -webkit-animation: in-charlie 0.75s ease-out forwards 0.25s; -moz-animation: in-charlie 0.75s ease-out forwards 0.25s; -o-animation: in-charlie 0.75s ease-out forwards 0.25s; animation: in-charlie 0.75s ease-out forwards 0.25s;
}
@-webkit-keyframes in-charlie { 0% { -webkit-transform: translate3d(0, 150px, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
}
@-moz-keyframes in-charlie { 0% { -moz-transform: translate3d(0, 150px, 0); opacity: 0; } 100% { -moz-transform: translate3d(0, 0, 0); opacity: 1; }
}
@-o-keyframes in-charlie { 0% { -o-transform: translate3d(0, 150px, 0); opacity: 0; } 100% { -o-transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes in-charlie { 0% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; }
}

Slick Two Part Form - Script Codes JS Codes

jQuery(document).ready(function(){ function doStep(){ // Next Button $('a.next-step').click(function(event){ event.preventDefault(); // Part 1 if($('.alpha').hasClass("in")) { $('.alpha').removeClass("in"); } $('.alpha').addClass("out"); // Part 2 if($('.beta').hasClass("out")) { $('.beta').removeClass("out"); } $('.beta').addClass("in"); }); // Previous Button $('a.prev-step').click(function(event){ event.preventDefault(); $('.alpha').removeClass("out").addClass("in"); $('.beta').removeClass("in").addClass("out"); }); // Submit & Complete $('.submit').click(function(event){ event.preventDefault(); // Part 1 if($('.beta').hasClass("in")) { $('.beta').removeClass("in"); } $('.beta').addClass("out"); // Part 2 if($('.charlie').hasClass("out")) { $('.charlie').removeClass("out"); } $('.charlie').addClass("in"); }); } // Active Functions doStep();
});
Slick Two Part Form - Script Codes
Slick Two Part Form - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 4.5
Size 6,199 Kb
Views 109,296
Do you need developer help for Slick Two Part Form?

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!

Matt Litherland (mattsince87) Script Codes
Name
Responsive Flat UI Kit
Vertical Align Images - Explained
SCSS Social Icons Flat
Share Your Profile
Animated CSS3 Mobile Phone
Animated SVG Path
Cool Hidden Drawer
Node Waves
Animated Resposnive SVG Path
Better Bootstrap Buttons
Create amazing love letters 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!