Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Form validation with 3D button 👀

Fraser Watt 1,790

@fraserwat

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Followed a tutorial to get a cool 3d button on this one, which I think turned out nicely!

  • I think I'm starting to get a better intuition around flexbox and (to a lesser extent) css grid, but any tips on any weird habits or inefficiencies I've picked up here v much appreciated.
  • As this form doesn't lead anywhere, I'm not sure if the whole thing is being set up properly? I guess in the "real world" you'd probably be using Hubspot or Mailchimp or something which adds another layer of complexity, but yeah any best practices here would be a real help!
  • Semi-related, the first time you hit the button it reloads, but subsequent times don't, because its got the # in the URL. Not sure what's going on here, are we able to just stop the form submitting without validation, or how does this work?

Beyond this, any misc feedback v much appreciated! Happy Easter! 🐣

Community feedback

P
Grace 27,650

@grace-snow

Posted

Love that button! Very nice indeed

With the rest of the styling there are small details that don't quite match the design and could be tightened up, like

  • font sizes
  • line heights
  • border radius

I'd also do different focus states on the inputs as they look a bit odd not matching the radius.

With the form submit/reload issue it is caused by issues with your javascript. Really the js should be looping over all inputs and running a validation function. The first step in that function should be to prevent default (prevent form submit). Then run the validation checks. If all pass, return true.

1

Fraser Watt 1,790

@fraserwat

Posted

@grace-snow Amazing, have fixed - thanks! I've set preventDefault() upon failing validation, but still seems to work.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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