In these kind of forms, the problem is that, FirstName and LastName Labels are small in size as compared to "Explain your previous project details". So while user is filling up the form he might get confused whether he is filling the details for FirstName or LastName. One solution would be making the labels right align. But I dont want to make the labels right align. Here I need another good idea to align them properly.
I would suggest a vertical layout which has been discussed here and here. In addition, I would not recommend using a text input for a fairly descriptive field like Explain your previous project details
Top-aligned labels tend to reduce completion times (how long it takes to complete a form) the most for familiar data (i.e. address, credit card, etc.) because they only require a single eye fixation to take in both input label & field. Top-aligned labels also work well for forms that require localization or long labels as there is plenty of horizontal real estate to expand/contract the label without negatively impacting the overall page layout. Top-aligned labels, however, do take up a lot of vertical real estate.
Also, something similar is discussed in other questions on this very forum as well.
Align them vertically, which is fast in scanning and reduce the alignment problem you've mentioned. But there is disadvantage of vertical scroll if you have too many fields, which can be further get solved with proper categorisation and planning like:
- show only mandatory fields
- combine fields if possible, like First and last name can be pronounced as full name.
- reduce the length of label, you may also use placeholder. "Explain your previous project details" could be "Previous project details" and in placeholder, you can write a more descriptive messge.
To get more information around form design,I suggest Luke W's article: http://static.lukew.com/webforms_lukew.pdf
According to this answer :
Right-aligned labels have a lighter cognitive workload for users
But if you must use left align labels, you may try the following :
- If the label is too long, create two or more lines for that label
- Use meaningful abbreviations
Here is one way ( A material design implementation ) :
It is a little hard to grasp just by looking at it, but basically the placeholder fields move out of the way and become the input field titles, here is a Codepen Example so you can experience it: