WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Formulario de registro HTML
8,930
codex
Abrir en el editor
Publica tu código
4
Recomendado
22 January 2026
Plantilla HTML de vida sostenible y retiro en la naturaleza
7 August 2025
diales de volumen
22 October 2025
Plantilla HTML de tarjetas con enlaces a redes sociales
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' }); });