What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Help with Conditional Logic in creating a Timesheet form

    Asked by Eric  on February 04, 2016 at 11:57 AM

     

    Hi All!

     

    My company has workers that do shift work as independent contractors, and they have to submit a weekly timesheet to me each week. The days and hours change, although there is usually a pattern at each workplace and for each worker.

     

    I tried to design a form that would:

    Be nice to look at

    Be easy to use on a smartphone

    Be as concise as possible, but expand as complexity required

     

    So rather than list every day of the week with detail complexity, I want the user to only see  those days they worked, indicated by choosing from the 'days worked' matrix. A shown day is pre-populated with the default start time and shift duration but can be amended by the user if required.

     

    So as an example, if I worked Monday and Thursday from 7am to 4pm this week, I would start the default start time as 7am, the default hours worked to 9. Then I would click on Monday and Thursday. The conditionals should then show me the pre-populated rows Monday and Thursday at the bottom.

     

    So far, I cannot

    1. Get the default start time to pre-popluate. The default hours does pre-populate correctly

    2. Evaluate the days of the week matrix correctly to show a subset of days

     

    I'm not sure if my programming is buggy or I'm asking the conditional to do something it cannot.

     

    Thanks!!

     

     

    Page URL:
    https://form.jotform.com/60341210314133

    expand pre-populated rows
  • Profile Image
    JotForm Support

    Answered by Boris on February 04, 2016 at 02:22 PM

    I see that the "matrix" field you are talking about is actually a Check Box field named "Choose all days that a shift started". You can easily use the Check Box field in your show/hide conditions to conditionally show the fields for each day, as it is selected in the Check Box.

    Please use the Show Multiple action, and set conditions such as IF "Choose all days..." is equal to "Monday", Show Multiple "Mon" and "Hours":

    After setting up the Show Multiple rules for each of the days in the Check Box field, the form will act as in the following demo:

    https://form.jotformpro.com/form/60345552662960

    When it comes to automatically passing the value from the "Default Start time" field to prepopulate the empty time fields of each day, I'm afraid that this is not possible at the moment. This can generally be achieved on most field types by using the Insert conditions, but in case of passing values to the Time fields - the results of Insert conditions can be a little unexpected.

    Instead, you may want to set up a custom Default Time on your time fields, and set it to the most common time your employees start working:

    Our developers are actively working on improving the conditions, so in the future it may be possible to correctly update the Time fields. For now, please use the Default Time option instead.

    When it comes to the second part of your question, I'm afraid I couldn't quite understand what you meant:

    > 2. Evaluate the days of the week matrix correctly to show a subset of days

    Did you mean the show/hide rules - that when a day is selected, only fields for that day are shown? If so, then please take a look at that demo form with Show Multiple conditions that is linked above, and see if it works to your satisfaction.

    If your question was about something else, please clarify a little about what you meant, and we will be happy to look for possible ways to achieve it. Thank you.

  • Profile Image

    Answered by Eric  on February 04, 2016 at 04:23 PM

    Hi Boris,

    Thanks for the help!

     

    Yes, I meant the show/hide rules. I wrote them as If .. then show AND show but the rules would change parameters by themselves <<shrug>>. Your way is better and works :-)

    I look forward to hearing that the API can deal with correctly passing the value for a time field, but in the meantime will do as you suggest. 

    As a side question --

    Can you tell me why the hours field overlaps the day fields, and how to correct it ?

  • Profile Image

    Answered by Eric  on February 04, 2016 at 04:43 PM

    Boris,

    Here is a screen capture from my iPhone 5S to show the mal-positioned formatting

     

  • Profile Image
    JotForm Support

    Answered by Boris on February 04, 2016 at 06:33 PM

    You are most welcome. I see the overlapping even on a desktop browser:

    The issue happens because the styles of your form were coded for the 24-hour format of the time field, which is narrower than the AM/PM format:

    Please do not worry, this can be fixed by injecting some of our own custom CSS into the form:

    .form-col-1[data-type="control_time"] {
        padding-right: 70px;
    }

    However, to make the code work that way only on desktop browsers, and to fix the fields on mobiles in such a way that the number field is still responsive, we need to move the Number field into the new line on mobiles. To achieve all that, you can use this CSS instead:

    @media only screen and (min-width:481px){
    .form-col-1[data-type="control_time"] {
        padding-right: 70px;
    }
    }
    @media only screen and (max-width:480px){
    .form-col-1[data-type="control_time"],
    .form-col-2[data-type="control_number"] {
        width: 100%;
    }
    .form-label { width: 30% !important; }
    .form-input { width: 70% !important; }
    }

    You can add the code by opening your form in the Designer, and pasting it at the bottom of the textbox under CSS tab:

    Please let us know if this resolves the issue with the hour label overlapping the drop down of the time field.