fazzaamiarso/idcamp2023-live-session-2-demo

Created with StackBlitz ⚡️

Frontend Mentor - Multi-step form

The challenge

Your challenge is to build out this multi-step form and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

• Complete each step of the sequence
• Go back to a previous step to update their selections
• See a summary of their selections on the final step and confirm their order
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Receive form validation messages if:
  • A field has been missed
  • The email address is not formatted correctly
  • A step is submitted, but no selection has been made

Want some support on the challenge? Join our Slack community and ask questions in the #help channel.

text

Step 1 Your info Step 2 Select plan Step 3 Add-ons Step 4 Summary Personal info Please provide your name, email address, and phone number. Name e.g. Stephen King Email Address e.g. [email protected] Phone Number e.g. [phone] Next Step Select your plan You have the option of monthly or yearly billing. Arcade $9/mo Advanced $12/mo Pro $15/mo Monthly Yearly Go Back Next Step Pick add-ons Add-ons help enhance your gaming experience. Online service Access to multiplayer games +$1/mo Larger storage Extra 1TB of cloud save +$2/mo Customizable Profile Custom theme on your profile +$2/mo Go Back Next Step Finishing up Double-check everything looks OK before confirming. Total (per month/year) Go Back Confirm Thank you! Thanks for confirming your subscription! We hope you have fun using our platform. If you ever need support, please feel free to email us at [email protected].