WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML Register Form
8588
codex
Open In Editor
Publish Your Code
Recommended
27 November 2025
HTML Button Code Example
21 August 2024
Creative HTML Portfolio Template
21 July 2025
UNO Card HTML CSS Example
HTML
Copy
Register
Account Setup
Personal Details
Social Profiles
Create your account
Please fill below
Personal Details
We will never sell it
Social Profiles
Your presence on the social network
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap'); html { height: 100%; } body { margin:0; padding:0; font-family: 'Poppins'!important; background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); overflow: hidden; } .register-box { position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; } .register-box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .register-box .user-box { position: relative; } input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } label { position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } #msform { text-align: center; position: relative; } #msform fieldset { border: 0 none; padding: 20px 30px; box-sizing: border-box; width: 80%; margin: 0 10%; position: relative; } #msform fieldset:not(:first-of-type) { display: none; } #msform .action-button { width: 100px; background: #0e65b6; font-weight: bold; color: white; border: 0 none; border-radius: 7px; cursor: pointer; padding: 10px; margin: 10px 5px; text-decoration: none; font-size: 14px; } #msform .action-button:hover, #msform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #2575fc; } .fs-title { font-size: 15px; text-transform: uppercase; color: #2C3E50; margin-bottom: 10px; } .fs-subtitle { font-weight: normal; font-size: 13px; color: #666; margin-bottom: 20px; } #progressbar { margin-bottom: 30px; overflow: hidden; counter-reset: step; } #progressbar li { list-style-type: none; color: white; text-transform: uppercase; font-size: 9px; width: 33.33%; float: left; position: relative; } #progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #333; background: white; border-radius: 3px; margin: 0 auto 5px auto; } #progressbar li:after { content: ''; width: 100%; height: 2px; background: white; position: absolute; left: -50%; top: 9px; z-index: -1; } #progressbar li:first-child:after { content: none; } #progressbar li.active:before, #progressbar li.active:after{ background: #2575fc; color: white; }
JS
Copy
var current_fs, next_fs, previous_fs; var left, opacity, scale; var animating; $(".next").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); next_fs.show(); current_fs.animate({opacity: 0}, { step: function(now, mx) { scale = 1 - (1 - now) * 0.2; left = (now * 50)+"%"; opacity = 1 - now; current_fs.css({ 'transform': 'scale('+scale+')', 'position': 'absolute' }); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, easing: 'easeInOutBack' }); }); $(".previous").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); previous_fs.show(); current_fs.animate({opacity: 0}, { step: function(now, mx) { scale = 0.8 + (1 - now) * 0.2; left = ((1-now) * 50)+"%"; opacity = 1 - now; current_fs.css({'left': left}); previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, easing: 'easeInOutBack' }); });