Contact Form – Multi-Step Form with Validation (Formulaire)

73 0 Forms codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Contact Form – Multi-Step Form with Validation (Formulaire)

<div class="wrap">
  <div class="info">
    <h1>Contact Us</h1>
    <p>Have a question or a project in mind? Fill in the form and we will get back to you within 24 hours.</p>
    <ul>
      <li><span>📍</span><div><b>Address</b>Hamra Street, Beirut</div></li>
      <li><span>📞</span><div><b>Phone</b>+961 1 234 567</div></li>
      <li><span>✉️</span><div><b>Email</b>hello@example.com</div></li>
      <li><span>🕘</span><div><b>Hours</b>Mon–Fri, 9:00–18:00</div></li>
    </ul>
    <div class="social"><a href="#">f</a><a href="#">𝕏</a><a href="#">in</a><a href="#">◎</a></div>
  </div>
  <form class="form" id="form" novalidate>
    <div class="steps"><i class="on"></i><i></i><i></i></div>
    <fieldset class="step on" data-s="0">
      <h2>Who are you?</h2>
      <label class="f"><input name="name" required minlength="2" placeholder=" "><span>Full name</span><em>Please enter your name</em></label>
      <label class="f"><input name="email" type="email" required placeholder=" "><span>Email address</span><em>Enter a valid email</em></label>
      <label class="f"><input name="phone" type="tel" pattern="[0-9 +()-]{6,}" placeholder=" "><span>Phone (optional)</span><em>Enter a valid phone number</em></label>
    </fieldset>
    <fieldset class="step" data-s="1">
      <h2>What do you need?</h2>
      <div class="chips"><label><input type="radio" name="topic" value="Website" checked><span>🌐 Website</span></label><label><input type="radio" name="topic" value="E-commerce"><span>🛒 E-commerce</span></label><label><input type="radio" name="topic" value="Design"><span>🎨 Design</span></label><label><input type="radio" name="topic" value="Other"><span>💬 Other</span></label></div>
      <label class="range">Budget: <b id="bv">$2,000</b><input type="range" name="budget" min="500" max="10000" step="250" value="2000" id="budget"></label>
    </fieldset>
    <fieldset class="step" data-s="2">
      <h2>Your message</h2>
      <label class="f"><textarea name="msg" required minlength="10" rows="5" placeholder=" " maxlength="500">

Tell us about your projectAt least 10 characters

0/500

I agree to the privacy policy

✓

Message sent!

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; display: grid; place-items: center; padding: 20px; font-family: "Segoe UI", system-ui, sans-serif; background: linear-gradient(135deg, #e0eafc, #cfdef3); color: #1f2440; }
.wrap { display: grid; grid-template-columns: 1fr 1.3fr; width: min(960px, 100%); background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px rgba(30,50,120,.18); }
.info { background: linear-gradient(160deg, #4f46e5, #7c3aed); color: #fff; padding: 44px 36px; position: relative; overflow: hidden; }
.info::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.08); right: -90px; bottom: -90px; }
.info h1 { font-size: 2.2rem; } .info > p { opacity: .85; margin: 12px 0 28px; line-height: 1.6; }
.info ul { list-style: none; display: grid; gap: 18px; }
.info li { display: flex; gap: 14px; align-items: center; } .info li span { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.15); display: grid; place-items: center; }
.info li b { display: block; font-size: .8rem; opacity: .7; font-weight: 600; }
.social { display: flex; gap: 10px; margin-top: 30px; } .social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; display: grid; place-items: center; text-decoration: none; font-weight: 700; }
.form { padding: 40px 36px; position: relative; display: flex; flex-direction: column; }
.steps { display: flex; gap: 8px; margin-bottom: 24px; } .steps i { flex: 1; height: 5px; border-radius: 9px; background: #e5e7f2; transition: .3s; } .steps i.on { background: #4f46e5; }
fieldset { border: 0; display: none; flex-direction: column; gap: 18px; animation: in .35s; }
fieldset.on { display: flex; }
@keyframes in { from { opacity: 0; transform: translateX(20px); } }
h2 { font-size: 1.4rem; }
.f { position: relative; display: block; }
.f input, .f textarea { width: 100%; border: 2px solid #e5e7f2; border-radius: 14px; padding: 22px 14px 8px; font: inherit; outline: none; transition: border-color .2s; resize: vertical; background: #fafbff; }
.f span { position: absolute; left: 16px; top: 16px; color: #8a8fa8; pointer-events: none; transition: .2s; }
.f input:focus, .f textarea:focus { border-color: #4f46e5; }
.f input:focus + span, .f input:not(:placeholder-shown) + span, .f textarea:focus + span, .f textarea:not(:placeholder-shown) + span { top: 6px; font-size: .72rem; color: #4f46e5; }
.f em { display: none; color: #e11d48; font-size: .8rem; font-style: normal; margin-top: 4px; }
.f.bad input, .f.bad textarea { border-color: #e11d48; } .f.bad em { display: block; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chips input { display: none; } .chips span { display: block; padding: 14px; border: 2px solid #e5e7f2; border-radius: 14px; cursor: pointer; text-align: center; transition: .2s; }
.chips input:checked + span { border-color: #4f46e5; background: #eef2ff; color: #4f46e5; font-weight: 700; }
.range { display: grid; gap: 10px; } .range input { accent-color: #4f46e5; }
.count { text-align: right; font-size: .8rem; color: #8a8fa8; margin-top: -10px; }
.agree { display: flex; gap: 8px; align-items: center; font-size: .9rem; } .agree.bad { color: #e11d48; }
.nav { display: flex; justify-content: space-between; margin-top: auto; padding-top: 26px; }
.nav button, .done button { border: 0; border-radius: 12px; padding: 13px 26px; font: inherit; font-weight: 700; cursor: pointer; background: #4f46e5; color: #fff; }
.nav .ghost { background: #eef0f8; color: #4b5070; visibility: hidden; }
.done { position: absolute; inset: 0; background: #fff; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 30px; }
.done.on { display: flex; animation: in .4s; }
.check { width: 80px; height: 80px; border-radius: 50%; background: #22c55e; color: #fff; font-size: 2.6rem; display: grid; place-items: center; animation: pop .5s; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } }
@media (max-width: 760px) { .wrap { grid-template-columns: 1fr; } .info { padding: 30px 24px; } .form { padding: 30px 22px; min-height: 480px; } }

// Multi-step contact form with floating labels, live validation, budget slider, character counter and success screen
var form = document.getElementById('form'), steps = form.querySelectorAll('.step'), bars = form.querySelectorAll('.steps i'), s = 0;
var back = document.getElementById('back'), next = document.getElementById('next');
function go(n) {
  s = n; steps.forEach(function (f, i) { f.classList.toggle('on', i === s); }); bars.forEach(function (b, i) { b.classList.toggle('on', i <= s); });
  back.style.visibility = s ? 'visible' : 'hidden'; next.textContent = s === steps.length - 1 ? 'Send message ✈' : 'Next →';
}
function valid(step) {
  var ok = true;
  step.querySelectorAll('.f').forEach(function (f) { var i = f.querySelector('input,textarea'); var bad = !i.checkValidity(); f.classList.toggle('bad', bad); if (bad) ok = false; });
  var ag = step.querySelector('.agree'); if (ag) { var b = !ag.querySelector('input').checked; ag.classList.toggle('bad', b); if (b) ok = false; }
  return ok;
}
form.addEventListener('input', function (e) { var f = e.target.closest('.f'); if (f && f.classList.contains('bad')) f.classList.toggle('bad', !e.target.checkValidity()); });
next.onclick = function () {
  if (!valid(steps[s])) return;
  if (s < steps.length - 1) return go(s + 1);
  var d = new FormData(form);
  document.getElementById('thanks').textContent = 'Thanks ' + d.get('name').split(' ')[0] + '! We received your ' + d.get('topic') + ' request and will reply to ' + d.get('email') + ' soon.';
  document.getElementById('done').classList.add('on');
  // To send for real: fetch('your-endpoint.php', { method: 'POST', body: d });
};
back.onclick = function () { if (s) go(s - 1); };
var budget = document.getElementById('budget');
budget.oninput = function () { document.getElementById('bv').textContent = '$' + (+budget.value).toLocaleString('en-US') + (budget.value == 10000 ? '+' : ''); };
form.querySelector('textarea').oninput = function () { document.getElementById('cc').textContent = this.value.length; };
document.getElementById('again').onclick = function () { form.reset(); budget.oninput(); document.getElementById('cc').textContent = 0; document.getElementById('done').classList.remove('on'); go(0); };
go(0);

Comments 0

…

Contact Form – Multi-Step Form with Validation (Formulaire)

Recommended

Message sent!

Comments 0