WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von gherhz
1106
gherhz
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
5 June 2025
Ein Code von Yotva
30 March 2025
Ein Code von ytr3d3
9 December 2025
Beispiel für ein HTML-Registrierungsformular
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' }); });