used insertBefore() function to add elements between a document

Community feedback

• 

  P

  Jake Godsall•1,390

  @jakegodsallPosted 9 months ago

  Hi 👋

  Great work with this form component. You've really done a great job at building the UI for this form. Looks very professional.

  The only significant advice I could give at this stage would be to try to reduce the layout shift caused when the form control validation messages appear. After clicking submit with invalid inputs the messages appear and cause a significant layout shift across the form.

  One way to deal with this would be to set the error messages in the HTML, and then style them to visibility: hidden. This would cause them to be invisible whilst still taking up the space in the UI. Then, when the input validation occurs, you could manipulate the visibility using JavaScript.

  Another solution if you would rather have the form inputs close together like they are at page load would be to add an expand/collapse animation to make the layout shift smoother. I've created a simple Codepen to describe how this works: https://codepen.io/bazoya/pen/ZEZYvBX

  But overall, great job with this project!

  Marked as helpful

  1

  ---

  

  Sahadev Bhaganagare•150

  @Sahadev18Posted 9 months ago

  @jakegodsall Thank you so much for the feedback. I'll consider the improvements

  0

  

  P

  Jake Godsall•1,390

  @jakegodsallPosted 9 months ago

  @Sahadev18 You're very welcome! Keep up the good work 👍

  1