used insertBefore() function to add elements between a document
Design comparison
Community feedback
- @jakegodsallPosted 8 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 thevisibility
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 helpful1@Sahadev18Posted 8 months ago@jakegodsall Thank you so much for the feedback. I'll consider the improvements
0@jakegodsallPosted 8 months ago@Sahadev18 You're very welcome! Keep up the good work 👍
1
Please log in to post a comment
Log in with GitHubJoin 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