Building a form / page to input timesheet data

Hello!

I am building a tool and have been stuck for a while on this part - some help would be appreciated!

I would like a user to be able to send me a report to say the hours they worked and which days they worked on. This might be for one weeks work or a month so they need to be able to set a start date and an end date and have the input form build around those dates.

For each day they should then be able to enter the hours worked on this day. An example of an output I would like is:

18/01/2020 7
19/01/2020 8
20/01/2020 8
21/01/2020 8
22/01/2020 8
23/01/2020 2
24/01/2020 11
25/01/2020 0
26/01/2020 0
27/01/2020 3
28/01/2020 4
29/01/2020 9

If I can get that data into integromate / airtable then I (think) I can handle the next parts of the process - its the data entry that I cant figure out.

Something that looks nice and is each to use, ideally with a mobile friendly data entry option too is what I am going for.

Any suggestions?

Why not an easy glide app where employee can clock-in/out.

Data is written in a google sheet, and then you can do whatever with integromat.

Check this out - https://worktracker.glideapp.io - just made it in 15 min as proof of concept, you can play with the different structure and input types.

I’m a big fan of glide and started making it there once. The issue is that my use case is specifically for people that aren’t tracking time daily but rather need to fill out a timesheet at the end of a sprint / project.

I could do it in glide but the main thing I’m missing from all solutions is finding the number of days between the start and end date and then showing that number of input fields. Hope that makes sense - thanks for the suggestion though :slight_smile:

1 Like

So I’d take a step back and ask - if people are going to be inputting 2 weeks worth of dates and #'s - is a phone the place they will want/enjoy doing this?

If your looking at sheets - why not just uses a google form?

Otherwise I’d look at a Bubble or Adalo web app I think, where you can setup a table like format to enter into.

Just my thoughts.

1 Like

I agree it will be mainly desktop so will definitely start there.

I haven’t played with Google forms much but will take a look. Ideally I need a start date + a number of weeks to build the next section of the form. Can Google forms pass values and do conditional steps?

Just following on from our chat in Slack.

I’d probably look for a tool with a frontend that is designed for time tracking, like Toggl and maybe using their API.

Putting time and date calculations into text fields makes adding & formatting things on the back end difficult when you come to try and organise the data.

1 Like

Workflow:

  1. Enter start date
  2. Enter number of weeks worked
  3. Generate form with fields to collect data based on [start date] and [number of weeks]
  4. Enter data
  5. Store data in [base, sheet]

Is that correct?

Suggested workflow:

  1. Enter week beginning (think in weeks so Monday’s date)
  2. Enter hours for M, T … Sun
  3. Store data for that week

That way you don’t need to dynamically generate the form.

Sheet, base columns:
A. week-beginning [date]
B. monday
C. tuesday

Transform data:

  1. Calculate the dates of the days based on [week-beginning]
  2. Export
2 Likes

This is the correct workflow.

I would need a date picker with only Mondays available. Maybe there is a js library for this?

The rest looks perfect - I’ve been playing with some form options and I think it’s doable in webflow if I can get a decent date picker.

You could just create a prototype using a Google Form and test it with five users of your tool.

Or you could just mock up the screens in Figma and create a clickable prototype.

That way you can validate your concept before finding the no-code products to build it.

1 Like

Ended up doing something in the middle. I didnt know this before (maybe its common knowledge) but you can make a google form and then design a matching form in webflow and map their fields (without zapier or anything). Really useful!

More information here

2 Likes