WEBLEB
Home
AI Editor
Chat
Login
Pro
English
English
Français
Español
HTML Register Form
9,473
0
Forms
codex
Follow
0
Remix
Open In Editor
Fullscreen
Discuss
Publish Your Code
4
Recommended
19 March 2023
HTML CSS Payment Form
11 May 2026
Simple JavaScript Gun Game in HTML Canvas
27 October 2026
Fullscreen Iframe Game Loader in HTML and JavaScript
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' }); });
Comments
0
Log in to join the discussion
…