I was reading the website supplied by the textbook Designing Efficient WebForms. And I found a part called “MANDATORY VS. OPTIONAL”, It explained, The best practice for forms is to avoid optional fields, but if used, clearly differentiate between required and non-required fields using an asterisk (*) for required fields and providing a hint at the bottom of the form to explain its meaning to users. I always remember the asterisks when signing up for stuff or buying things so I wanted to know how to do that design to my own form but it didn't show me how to do this so I had to look it up. I found this website called Indicating form controls as required using asterisks (*) it showed me how to use asterisks and it showed example codes for both HTML and CSS.
The other website was also supplied by the textbook and when reading the site Form Design Best Practices: 15 Tips to Boost Conversions and UX I found a few things that can help with the form. For starters, number 2 uses one column as it explains. A single-column web form layout is recommended as it is easier to follow, understand, complete, and submit for visitors, as supported by a study by CXL Institute which found that participants completed single-column forms faster than multi-column forms. For all the recommendations it gave it didn't show me how to implement it into my own form so I had to do more research and I found a website called “HTML Forms: From Basics to Style: More Layouts'' which gives a detailed guide on how to change the column layout in multiple ways. Back to the main website, another tip it gave is number 4 using inline form field validation as it says Inline form validation is a real-time process that provides error messages for incorrect information entered by visitors, allowing them to quickly correct errors and proceed with the form. This was complicated as I had to look at multiple websites to understand what it meant and what the code was but in the end, I figured it out.