What is a good way to allow a user to enter in many rows of data?

Question

I am working on a request system for overtime. The first 4 fields are required, the Dept, Project and Job field are normally optional, but are there to allow the person to enter values as needed, based on what they are doing/have done. The comments may end up being required (project specs are still in flux).

When a person click the Add day button, I have it copy the previous day to make it easy to add more days. The focus of my question is data entry. While what I have works, it is ugly. I am looking for thoughts on how to make this work better and have it work on a mobile phone. The goal of this work is to make it mobile friendly. Any thoughts or direction is appreciated. We are using the bootstrap framework.

Answer 1

The biggest problem I see with your current layout is the separation of content. It's very difficult to see the difference between your first time request to the one below it other than the repeating information.

This will be even more difficult when viewed in a mobile browser.

For the mobile version, I recommend separating the mobile view into two pages. The first page as a general list of all time requests and the second showing the details of a specific time request.

I'm not sure how many time requests will populate your page, but creating a long form of content will be very confusing. For the non-mobile version, you could split the general list of time requests to the left column and have a detailed view on the right. (Similar to how an email app works).