Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

Multistep form made with SolidJS and TailwindCSS

solid-js, tailwind-css, typescript
Viveka Barneaud•30
@vivekabarneaud
A solution to the Multi-step form challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hello! Alright, I think I chose this project a bit too quickly, I think it was a bit out of my league. But I could manage to come with something functional enough, maybe. I wanted to try SolidJS and practice some Tailwind.

I'm honestly not sure if my Solid code is good or bad practice, so any advice would be welcome! I had troubles trying to use the form validation example on the Solid docs (https://www.solidjs.com/examples/forms), I couldn't manage to make it work with my project, so I used solid-form-handler (https://solid-form-handler.com/docs/), which I'm very grateful for. I have to admit that I only used it on the first form, personal information. I didn't find the courage to do it on the other pages. I also met another issue with this: the first click on the Next step button of the Personal information form wasn't triggering any display of the "Invalid email" (for example) error, only the native one (which I didn't know how to remove), so I had to disable the Next step button. I also allowed myself to disable the last step button until the form isn't fully filled.

There is also something that I'm not proud of, it's the fact that the data is immediately stored in the store, even if you don't press the Next Step button (for example if you fill the first form and then you go to the "Select plan" form, even if you don't "save" your choice by clicking on Next step, it's still saved and you can directly go to the summary). I'm not sure whether that's a good thing or not, I actually don't think so, I think I know how to fix it but I'm being lazy.

Another issue, is that I couldn't find how to get the "tick" back on my checkboxes. They just turn purple, and I don't know how to fix this, if anyone knows I'd gladly take any lead.

And I'm sure there are some more things I forgot to tell you about, but that's it. I feel so excited to submit my very first FrontendMentor project solution! Again, any feedback would be appreciated! Thank you, and have a nice weekend!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Viveka Barneaud's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.