Heads up! To embark on an Adventure or participate further, sign in with your Treehouse account or enroll in your free, 7-day trial.

Treehouse Code Adventures > Multi-Step Form

Multi-Step Form

Multi-Step Form

A multi-step form that requires user input across three stages.

Created: 11/06/2023 by Brian Jensen

Skill level: beginner

Topics used: HTML CSS JavaScript

Estimated completion time: 1 Hour

    The form aims to collect specific details about a user in three stages. The user will be asked to enter their name, phone number, and email address before being able to submit the form. The design is user-friendly, with intuitive navigation buttons and a progress bar.

  1. 0

    To begin, click "Start Adventure" at the top of the page and then download your starter files.

  2. 1

    Use CSS Flexbox or Grid to layout the elements on the page.

  3. 2

    Use HTML 5 form validation or JavaScript to ensure the user enters the correct information before being able to hit "Next" or "Submit".

  4. 3

    Use JavaScript to add event listeners to the navigation buttons.

  5. 4

    Use JavaScript to update the progress bar.

  6. 5

    Use JavaScript to toggle the visibility of the form steps, so that only one step is shown at a time.

  7. 6

    Extra Challenge: Add friendly custom validation messages to the form inputs.