{"id":135297,"date":"2025-11-07T07:48:23","date_gmt":"2025-11-07T07:48:23","guid":{"rendered":"https:\/\/phppot.com\/?p=24547"},"modified":"2025-11-07T07:48:23","modified_gmt":"2025-11-07T07:48:23","slug":"build-a-multi-step-form-in-react-with-validation-and-progress-bar","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2025\/11\/07\/build-a-multi-step-form-in-react-with-validation-and-progress-bar\/","title":{"rendered":"Build a Multi-Step Form in React with Validation and Progress Bar"},"content":{"rendered":"
by Vincy<\/a>. Last modified on November 18th, 2025.<\/div>\n

A multi-step form is one of the best ways to replace a long form to make the customer feel easy. Example: a student enrolment form will usually be very long. If it is partitioned into multi-steps with section-wise sub forms<\/a>, it encourages enduser to proceed forward. And importantly the merit is that it will increase your signup rate.<\/p>\n

In this React tutorial, a registration form is partitioned into 4 steps. Those are to collect general, contact, personal, and authentication details from the users. Each step loads a sub-form with corresponding sections. Each subform is a separate component with proper structure and easy maintainability.<\/p>\n

\"React<\/p>\n

Rendering multi-step registration form<\/h2>\n

This RegisterForm<\/code> is created as a parent React Form component<\/a>. It loads all the sub-components created for rendering a multi-step form with validation and a progress bar.<\/p>\n

It requires the following custom React component created for this example.<\/p>\n

    \n
  1. GeneralInfo \u2013 to collect basic information, first and last names.<\/li>\n
  2. ContactInfo \u2013 to collect phone or WhatsApp numbers.<\/li>\n
  3. PersonalInfo \u2013 to collect a person\u2019s date of birth and gender.<\/li>\n
  4. ConfirmInfo \u2013 is a last step to register confidential information and confirm registration.<\/li>\n<\/ol>\n

    All information is stored in the formData by using the corresponding handleChange hook.<\/p>\n

    Additionally, this JSX has a Toast container to display success or error responses on the user-entered data.<\/p>\n

    There is a step navigation interface that helps to move along the registration steps. The step navigation helps to verify the data before clicking confirmation.<\/p>\n

    src\/components\/RegisterForm.jsx<\/code><\/p>\n

    import { useState } from \"react\";\nimport { ToastContainer } from \"react-toastify\";\nimport \"react-toastify\/dist\/ReactToastify.css\";\nimport ProgressBar from \".\/ProgressBar\";\nimport GeneralInfo from \".\/FormSteps\/GeneralInfo\";\nimport ContactInfo from \".\/FormSteps\/ContactInfo\";\nimport PersonalInfo from \".\/FormSteps\/PersonalInfo\";\nimport Confirmation from \".\/FormSteps\/Confirmation\";\nimport \"..\/..\/public\/assests\/css\/RegisterForm.css\";\nconst RegisterForm = () => { const [step, setStep] = useState(1); const [formData, setFormData] = useState({ first_name: \"\", last_name: \"\", email: \"\", phone: \"\", dob: \"\", gender: \"\", username: \"\", password: \"\", terms: false, }); const nextStep = () => setStep(prev => prev + 1); const prevStep = () => setStep(prev => prev - 1); const handleChange = (e) => { const { name, value, type, checked } = e.target; setFormData({ ...formData, [name]: type === \"checkbox\" ? checked : value, }); };\nreturn (\n<div className=\"container\"> <header>Register With Us<\/header> <ProgressBar step={step} \/> <div className=\"form-outer\"> {step === 1 && <GeneralInfo formData={formData} handleChange={handleChange} nextStep={nextStep} \/>} {step === 2 && <ContactInfo formData={formData} handleChange={handleChange} nextStep={nextStep} prevStep={prevStep} \/>} {step === 3 && <PersonalInfo formData={formData} handleChange={handleChange} nextStep={nextStep} prevStep={prevStep} \/>} {step === 4 && <Confirmation formData={formData} handleChange={handleChange} prevStep={prevStep} setFormData={setFormData} setStep={setStep} \/>} <\/div> <ToastContainer position=\"top-center\" autoClose={3000} hideProgressBar={false} newestOnTop closeOnClick pauseOnHover\/>\n<\/div>\n);\n};\nexport default RegisterForm;\n<\/code><\/pre>\n
    Form progress bar with numbered in-progress state of registration<\/h2>\n
    When a multi-step form interface is used, the progress bar and prev-next navigation<\/a> controls are very important usability.<\/p>\n
    This example provides both of these controls which will be useful to learn how to make this for other similar cases.<\/p>\n
    The progress bar contains circled, numbered nodes represent each step. This node is a container that denotes the title and the step number. It checks the useState for the current step and highlights the node accordingly.<\/p>\n
    The conditional statements load the CSS className \u2018active\u2019 dynamically when loading the progress bar to the UI.<\/p>\n
    All the completed steps are highlighted by a filled background and shows clarity on the current state.<\/p>\n
    src\/components\/ProgressBar.jsx<\/code><\/p>\n
    const ProgressBar = ({ step }) => {\nreturn (\n<div className=\"progress-bar\"> <div className={`step ${step >= 1 ? \"active\" : \"\"}`}> <p>General<\/p> <div className={`bullet ${step > 1 ? \"active\" : \"\"}`}> <span className=\"black-text\">1<\/span> <\/div> <\/div> <div className={`step ${step >= 2 ? \"active\" : \"\"}`}> <p>Contact<\/p> <div className={`bullet ${step > 2 ? \"active\" : \"\"}`}> <span className=\"black-text\">2<\/span> <\/div> <\/div> <div className={`step ${step >= 3 ? \"active\" : \"\"}`}> <p>Personal<\/p> <div className={`bullet ${step > 3 ? \"active\" : \"\"}`}> <span className=\"black-text\">3<\/span> <\/div> <\/div> <div className={`step ${step >= 4 ? \"active\" : \"\"}`}> <p>Confirm<\/p> <div className=\"bullet\"> <span className=\"black-text\">4<\/span> <\/div> <\/div>\n<\/div>\n);\n};\nexport default ProgressBar;\n<\/code><\/pre>\n
    React Form components collecting types of user information<\/h2>\n
    We have seen all 4 sub-form components created for this React example. Those component purposes are described in the explanation of the parent React container.<\/p>\n
    Each form component accepts the formData, handleChange, nextStep references. The parent component has the scope of reading all the sub-form field data. It supplies the data with the corresponding handleChange hook to each step.<\/p>\n
    The main RegisterForm JSX contains conditional statements to check the current step. Then, it load the corresponding sub form components based on the in-progressing step managed in a React useState.<\/p>\n
    Step 1 \u2013 Collecting general information<\/h3>\n
    \"react<\/p>\n
    src\/components\/FormSteps\/GeneralInfo.jsx<\/code><\/p>\n
    import { useState } from \"react\";\nconst GeneralInfo = ({ formData, handleChange, nextStep }) => { const [errors, setErrors] = useState({}); const validate = () => { const newErrors = {}; if (!formData.first_name.trim()) newErrors.first_name = \"First name is required\"; if (!formData.last_name.trim()) newErrors.last_name = \"Last name is required\"; setErrors(newErrors); return Object.keys(newErrors).length === 0; }; return ( <div className=\"page slidepage\"> <div className=\"title\">General Information<\/div> <div className=\"field\"> <div className=\"label\">First Name<\/div> <input type=\"text\" name=\"first_name\" value={formData.first_name} onChange={handleChange} className={errors.first_name ? \"is-invalid\" : \"\"} \/> {errors.first_name && <div className=\"ribbon-alert\">{errors.first_name}<\/div>} <\/div> <div className=\"field\"> <div className=\"label\">Last Name<\/div> <input type=\"text\" name=\"last_name\" value={formData.last_name} onChange={handleChange} className={errors.last_name ? \"is-invalid\" : \"\"} \/> {errors.last_name && <div className=\"ribbon-alert\">{errors.last_name}<\/div>} <\/div> <div className=\"field nextBtn\"> <button type=\"button\" onClick={() => validate() && nextStep()}> Continue <\/button> <\/div> <\/div> );\n};\nexport default GeneralInfo;\n<\/code><\/pre>\n
    Step 2: Collecting contact information<\/h3>\n
    \"React<\/p>\n
    src\/components\/FormSteps\/ContactInfo.jsx<\/code><\/p>\n
    import { useState } from \"react\";\nconst ContactInfo = ({ formData, handleChange, nextStep, prevStep }) => { const [errors, setErrors] = useState({}); const validate = () => { const newErrors = {}; const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/; if (!formData.email.trim()) newErrors.email = \"Email is required\"; else if (!emailRegex.test(formData.email)) newErrors.email = \"Enter a valid email address\"; if (formData.phone.length < 10) newErrors.phone = \"Phone number must be at least 10 digits\"; setErrors(newErrors); return Object.keys(newErrors).length === 0; }; return ( <div className=\"page\"> <div className=\"title\">Contact Information<\/div> <div className=\"field\"> <div className=\"label\">Email Address<\/div> <input type=\"text\" name=\"email\" value={formData.email} onChange={handleChange} className={errors.email ? \"is-invalid\" : \"\"} \/> {errors.email && <div className=\"ribbon-alert\">{errors.email}<\/div>} <\/div> <div className=\"field\"> <div className=\"label\">WhatsApp Number<\/div> <input type=\"number\" name=\"phone\" value={formData.phone} onChange={handleChange} className={errors.phone ? \"is-invalid\" : \"\"} \/> {errors.phone && <div className=\"ribbon-alert\">{errors.phone}<\/div>} <\/div> <div className=\"field btns\"> <button type=\"button\" onClick={prevStep}>Back<\/button> <button type=\"button\" onClick={() => validate() && nextStep()}>Continue<\/button> <\/div> <\/div> );\n};\nexport default ContactInfo;\n<\/code><\/pre>\n
    Step3 \u2013 Collecting personal information<\/h3>\n
    \"react<\/p>\n
    src\/components\/FormSteps\/PersonalInfo.jsx<\/code><\/p>\n
    import { useState } from \"react\";\nconst PersonalInfo = ({ formData, handleChange, nextStep, prevStep }) => { const [errors, setErrors] = useState({}); const validate = () => { const newErrors = {}; if (!formData.dob) newErrors.dob = \"Please select your date of birth\"; if (!formData.gender) newErrors.gender = \"Please select your gender\"; setErrors(newErrors); return Object.keys(newErrors).length === 0; };\nreturn ( <div className=\"page\"> <div className=\"title\">Personal Information<\/div> <div className=\"field\"> <div className=\"label\">DOB<\/div> <input type=\"date\" name=\"dob\" value={formData.dob} onChange={handleChange} className={errors.dob ? \"is-invalid\" : \"\"} \/> {errors.dob && <div className=\"ribbon-alert\">{errors.dob}<\/div>} <\/div> <div className=\"field\"> <div className=\"label\">Gender<\/div> <select name=\"gender\" value={formData.gender} onChange={handleChange} className={errors.gender ? \"is-invalid\" : \"\"} > <option value=\"\">Select Gender<\/option> <option>Male<\/option> <option>Female<\/option> <option>Other<\/option> <\/select> {errors.gender && <div className=\"ribbon-alert\">{errors.gender}<\/div>} <\/div> <div className=\"field btns\"> <button type=\"button\" onClick={prevStep}>Back<\/button> <button type=\"button\" onClick={() => validate() && nextStep()}>Continue<\/button> <\/div> <\/div>\n);\n};\nexport default PersonalInfo;\n<\/code><\/pre>\n
    Step 4 \u2013 Collecting user consent and confidential information<\/h3>\n
    \"react<\/p>\n
    src\/components\/FormSteps\/Confirmation.jsx<\/code><\/p>\n
    import { useState } from \"react\";\nimport { toast } from \"react-toastify\";\nimport \"react-toastify\/dist\/ReactToastify.css\";\nimport axios from \"axios\";\nimport SERVER_SIDE_API_ROOT from \"..\/..\/config\";\nconst Confirmation = ({ formData, handleChange, prevStep, setFormData, setStep }) => { const [errors, setErrors] = useState({}); const handleSubmit = async (e) => { e.preventDefault(); const newErrors = {}; if (!formData.username) newErrors.username = \"Username is required\"; if (!formData.password) newErrors.password = \"Password is required\"; else if (formData.password.length < 6) newErrors.password = \"Password must be at least 6 characters\"; if (!formData.terms) newErrors.terms = \"You must agree to the terms\"; setErrors(newErrors); if (Object.keys(newErrors).length > 0) return; try { const res = await axios.post(`${SERVER_SIDE_API_ROOT}\/multi-step-form.php`, formData); if (res.data.success) { toast.success(res.data.message || \"User registered successfully!\"); setFormData({ first_name: \"\", last_name: \"\", email: \"\", phone: \"\", dob: \"\", gender: \"\", username: \"\", password: \"\", terms: false, }); setStep(1); setErrors({}); } else { toast.error(res.data.message || \"Registration failed!\"); } } catch (err) { console.error(err); toast.error(\"Error while saving user data.\"); } }; const renderError = (field) => errors[field] ? <div className=\"ribbon-alert\">{errors[field]}<\/div> : null;\nreturn ( <div className=\"page\"> <div className=\"title\">Confirm<\/div> <div className=\"field\"> <div className=\"label\">Username<\/div> <input type=\"text\" name=\"username\" value={formData.username} onChange={handleChange} className={errors.username ? \"is-invalid\" : \"\"} \/> {renderError(\"username\")} <\/div> <div className=\"field\"> <div className=\"label\">Password<\/div> <input type=\"password\" name=\"password\" value={formData.password} onChange={handleChange} className={errors.password ? \"is-invalid\" : \"\"} \/> {renderError(\"password\")} <\/div> <div className=\"field-terms\"> <label> <input type=\"checkbox\" name=\"terms\" checked={formData.terms} onChange={handleChange} \/>{\" \"} I agree with the terms. <\/label> {renderError(\"terms\")} <\/div> <div className=\"field btns\"> <button type=\"button\" onClick={prevStep}>Back<\/button> <button type=\"submit\" onClick={handleSubmit}>Register<\/button> <\/div> <\/div>\n);\n};\nexport default Confirmation;\n<\/code><\/pre>\n
    PHP endpoint processing multi-step form data<\/h2>\n
    It is a usual PHP file which not need to describe if you are already familiar with how the PHP user registration<\/a> works. It reads the form data posted by the front-end multi-step React form.<\/p>\n
    With this form data, it builds the database insert query to save the user-entered information to the backend.<\/p>\n
    This example has the server-side validation for a few fields. If the validation process catches any problem with the submitted data, then it composes an error response to the React frontend.<\/p>\n
    Mainly, it validates email format<\/a> and password-strength<\/a> (minimally by its length). Password strength checking has no limitations. Based on the application sensitivity we are free to add as much validation as possible which is good for a security point of view.<\/p>\n
    Note: <\/strong>The SQL script for the user database is in the downloadable source code attached with this tutorial in multi-step-form-validation-api\/users.sql<\/code>.<\/p>\n
    multi-step-form-validation-api\/multi-step-form.php<\/code><\/p>\n
    <?php\nheader(\"Access-Control-Allow-Origin: *\");\nheader(\"Access-Control-Allow-Headers: Content-Type\");\nheader(\"Access-Control-Allow-Methods: POST\");\nheader(\"Content-Type: application\/json\");\ninclude 'db.php';\n$data = json_decode(file_get_contents(\"php:\/\/input\"), true);\n$firstName = $data[\"first_name\"] ?? \"\";\n$lastName = $data[\"last_name\"] ?? \"\";\n$email = $data[\"email\"] ?? \"\";\n$phone = $data[\"phone\"] ?? \"\";\n$dob = $data[\"dob\"] ?? \"\";\n$gender = $data[\"gender\"] ?? \"\";\n$username = $data[\"username\"] ?? \"\";\n$password = $data[\"password\"] ?? \"\";\nif (!$firstName || !$email || !$password) { echo json_encode([\"success\" => false, \"message\" => \"Required fields missing\"]); exit;\n}\nif (!filter_var($email, FILTER_VALIDATE_EMAIL)) { echo json_encode([\"success\" => false, \"message\" => \"Invalid email\"]); exit;\n}\nif (strlen($password) < 6) { echo json_encode([\"success\" => false, \"message\" => \"Password too short\"]); exit;\n}\n$hashedPassword = password_hash($password, PASSWORD_BCRYPT);\n$stmt = $conn->prepare(\"INSERT INTO users (first_name, last_name, email, phone, dob, gender, username, password) VALUES (?, ?, ?, ?, ?, ?, ?, ?)\");\n$stmt->bind_param(\"ssssssss\", $firstName, $lastName, $email, $phone, $dob, $gender, $username, $hashedPassword);\nif ($stmt->execute()) { echo json_encode([\"success\" => true, \"message\" => \"User registered successfully\"]);\n} else { echo json_encode([\"success\" => false, \"message\" => \"DB insert failed\"]);\n}\n?>\n<\/code><\/pre>\n
    How to set up this application<\/h2>\n
    The below steps help to set up this example to run in your environment.<\/p>\n
      \n
    1. Download the source code into your React project directory.<\/li>\n
    2. Copy the multi-step-form-validation-api into your PHP root.<\/li>\n
    3. Create a database multistep_form_validation_db<\/code> and import the user.sql<\/li>\n
    4. Configure database details with db.php<\/li>\n
    5. Configure the PHP endpoint URL in React in src\/config.js<\/code><\/li>\n
    6. Run npm install<\/code> and then, npm run dev<\/code>.<\/li>\n
    7. Copy the dev server URL and run it to render the React Multi-step form.<\/li>\n<\/ol>\n
      Conclusion:<\/h2>\n
      So, we have seen a simple React example to understand how to create and manage the state of a multi-step form. By splitting the mail and sub form components we had a structural code base that is more feasible for enhancements.<\/p>\n
      The navigation between steps gives a scope for verification before confirm the signup. And the progress bar indicates the state in progress at a quick glance.<\/p>\n
      Definitely, the PHP validation<\/a> and database processing can have add-on features to make the backend more solid. If you have a requirement to create a multi-step form in React, share your specifications in the comments.<\/p>\n
      Download<\/a><\/p>\n
      \n
       \"Vincy\" <\/div>\n
       Written by Vincy<\/a>, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials. <\/div>\n<\/p><\/div>\n
        <\/p>\n
      \n
      Related Tutorials<\/h2>\n<\/p><\/div>\n
       \u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"
      by Vincy. Last modified on November 18th, 2025. A multi-step form is one of the best ways to replace a long form to make the customer feel easy. Example: a student enrolment form will usually be very long. If it is partitioned into multi-steps with section-wise sub forms, it encourages enduser to proceed forward. And […]<\/p>\n","protected":false},"author":2,"featured_media":135298,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-135297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/135297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=135297"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/135297\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/135298"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=135297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=135297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=135297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}