Scribd
Upload
10 views

Multi Step Form

The document is an HTML template for a multi-step form that collects personal information, address, and payment details. It includes CSS styles for layout, input validation, and responsive design. The form uses radio buttons to navigate between steps and provides error messages for invalid inputs.

Uploaded by

amitmaurya70688
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Multi Step Form

The document is an HTML template for a multi-step form that collects personal information, address, and payment details. It includes CSS styles for layout, input validation, and responsive design. The form uses radio buttons to navigate between steps and provides error messages for invalid inputs.

Uploaded by

amitmaurya70688
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta

name="viewport"

content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"

/>

<title>Multi-Step Form</title>

<style>

/* Reset and base styles */

*{

box-sizing: border-box;

body {

font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

background: #f5f7fa;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

color: #222;

form {

background: #fff;

border-radius: 10px;

width: 320px;
max-width: 95vw;

padding: 2rem 2rem 3rem;

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

position: relative;

/* Hidden radio buttons controlling steps */

input[type="radio"] {

display: none;

/* Step containers */

.form-step {

display: none;

animation: fadeIn 0.4s ease-in-out;

/* Show step if corresponding radio checked */

#step1:checked ~ form #step-1,

#step2:checked ~ form #step-2,

#step3:checked ~ form #step-3 {

display: block;

@keyframes fadeIn {

from {

opacity: 0;

transform: translateY(15px);

to {
opacity: 1;

transform: translateY(0);

/* Form titles */

h2 {

margin-bottom: 1rem;

color: #33475b;

font-weight: 700;

font-size: 1.5rem;

/* Form controls */

label {

display: block;

margin-bottom: 0.3rem;

font-weight: 600;

color: #44515e;

input,

select {

width: 100%;

padding: 10px 12px;

margin-bottom: 0.8rem;

border-radius: 6px;

border: 2px solid #d1d9e6;

font-size: 1rem;
appearance: none;

transition: border-color 0.3s ease;

input:focus,

select:focus {

outline: none;

border-color: #4f90fa;

box-shadow: 0 0 8px rgba(79, 144, 250, 0.4);

/* Required field highlight (label with required asterisk) */

label.required::after {

content: " *";

color: #d63447;

font-weight: 700;

/* Validation feedback */

input:invalid:not(:focus):not(:placeholder-shown) {

border-color: #d63447;

input:valid:not(:focus):not(:placeholder-shown) {

border-color: #2faa60;

/* Error message container */

.error-message {

color: #d63447;

font-size: 0.85rem;
margin-top: -0.6rem;

margin-bottom: 0.8rem;

display: none;

/* Show error message if input is invalid and not focused and required */

input:invalid:not(:focus):not(:placeholder-shown) + .error-message {

display: block;

/* Navigation buttons container */

.btn-group {

display: flex;

justify-content: space-between;

margin-top: 1rem;

/* Navigation buttons (styled labels) */

.btn {

background: #4f90fa;

color: #fff;

font-weight: 700;

padding: 0.7rem 1.4rem;

border-radius: 8px;

cursor: pointer;

user-select: none;

border: none;

text-align: center;

transition: background-color 0.3s ease;

font-size: 1rem;
box-shadow: 0 4px 8px #3b6fd1aa;

.btn:hover:not([disabled]) {

background: #346ddb;

box-shadow: 0 6px 14px #2a52abcc;

.btn:active:not([disabled]) {

background: #1e4cada;

.btn[disabled],

.btn[disabled]:hover {

background: #ccc;

cursor: not-allowed;

box-shadow: none;

/* Special for previous button */

.btn.prev {

background: #dee3ea;

color: #555;

box-shadow: none;

.btn.prev:hover {

background: #cfd6e3;

color: #444;

.btn.prev:active {

background: #b0b9cf;

}
/* Hide prev button on first step */

#step1:checked ~ form .btn.prev {

visibility: hidden;

/* Submit button style on last step */

#step3:checked ~ form .btn.next {

display: none;

#step3:checked ~ form button.submit-btn {

display: block;

button.submit-btn {

background: #2faa60;

border: none;

padding: 0.8rem 1.5rem;

border-radius: 8px;

color: white;

font-weight: 700;

font-size: 1.1rem;

width: 100%;

cursor: pointer;

box-shadow: 0 6px 16px #229a4dcc;

display: none;

margin-top: 1rem;

user-select: none;

transition: background-color 0.3s ease;

}
button.submit-btn:hover {

background: #238045;

button.submit-btn:active {

background: #1f6d39;

/* Responsive for small screens */

@media (max-width: 400px) {

form {

width: 90vw;

padding: 1.5rem 1.5rem 2.5rem;

</style>

</head>

<body>

<!-- Step control radio buttons -->

<input type="radio" name="form-step" id="step1" checked />

<input type="radio" name="form-step" id="step2" />

<input type="radio" name="form-step" id="step3" />

<form action="#" method="POST" onsubmit="return false;">

<!-- Step 1: Personal Information -->

<section class="form-step" id="step-1">

<h2>Personal Information</h2>

<label class="required" for="fname">First Name</label>

<input

type="text"

id="fname"
name="fname"

placeholder="John"

required

pattern=".{2,}"

title="First Name must be at least 2 characters"

autocomplete="given-name"

/>

<span class="error-message" >Please enter your first name (at least 2 characters).</span >

<label class="required" for="lname">Last Name</label>

<input

type="text"

id="lname"

name="lname"

placeholder="Doe"

required

pattern=".{2,}"

title="Last Name must be at least 2 characters"

autocomplete="family-name"

/>

<span class="error-message" >Please enter your last name (at least 2 characters).</span >

<label class="required" for="email">Email Address</label>

<input

type="email"

id="email"

name="email"

placeholder="[email protected]"

required

autocomplete="email"

/>
<span class="error-message">Please enter a valid email address.</span>

<div class="btn-group">

<label class="btn prev" for="step1">Previous</label>

<label class="btn next" for="step2">Next</label>

</div>

</section>

<!-- Step 2: Address -->

<section class="form-step" id="step-2">

<h2>Address</h2>

<label class="required" for="street">Street Address</label>

<input

type="text"

id="street"

name="street"

placeholder="123 Main St"

required

autocomplete="street-address"

/>

<span class="error-message">Please enter your street address.</span>

<label class="required" for="city">City</label>

<input

type="text"

id="city"

name="city"

placeholder="New York"

required

pattern=".{2,}"
title="City must be at least 2 characters"

autocomplete="address-level2"

/>

<span class="error-message" >Please enter your city (at least 2 characters).</span >

<label class="required" for="zip">Zip Code</label>

<input

type="text"

id="zip"

name="zip"

placeholder="10001"

required

pattern="\\d{5}"

title="Zip code must be 5 digits"

autocomplete="postal-code"

/>

<span class="error-message" >Please enter a valid 5-digit zip code.</span >

<div class="btn-group">

<label class="btn prev" for="step1">Previous</label>

<label class="btn next" for="step3">Next</label>

</div>

</section>

<!-- Step 3: Payment Details -->

<section class="form-step" id="step-3">

<h2>Payment Details</h2>

<label class="required" for="cardnumber">Card Number</label>

<input

type="text"
id="cardnumber"

name="cardnumber"

placeholder="1234 5678 9012 3456"

required

pattern="\\d{13,16}"

title="Card number must be 13 to 16 digits"

inputmode="numeric"

maxlength="19"

autocomplete="cc-number"

/>

<span class="error-message" >Please enter a valid card number (13-16 digits).</span >

<label class="required" for="expiry">Expiry Date (MM/YY)</label>

<input

type="text"

id="expiry"

name="expiry"

placeholder="MM/YY"

required

pattern="(0[1-9]|1[0-2])\/?([0-9]{2})"

title="Expiry date in MM/YY format"

inputmode="numeric"

maxlength="5"

autocomplete="cc-exp"

/>

<span class="error-message">Please enter a valid expiry date (MM/YY).</span >

<label class="required" for="cvv">CVV</label>

<input

type="password"
id="cvv"

name="cvv"

placeholder="123"

required

pattern="\\d{3,4}"

title="CVV must be 3 or 4 digits"

inputmode="numeric"

maxlength="4"

autocomplete="cc-csc"

/>

<span class="error-message" >Please enter a valid 3 or 4 digit CVV.</span >

<div class="btn-group">

<label class="btn prev" for="step2">Previous</label>

<button type="submit" class="submit-btn">Submit</button>

</div>

</section>

</form>

</body>

</html>

You might also like