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

    Customize Date and Time field

    Asked by JOJI ABRAHAM on July 25, 2015 at 06:08 PM
    Hi,

    currently we are using jot form.we would like to customize the Date and Time.When our customers send us request we want them see only our Hours of operations.we are open from 8 Am -6 PM Monday to Friday and Saturday 10 AM-3 PM Sunday 12 PM -3 PM.so please help us to customize the form.thanks

  • Profile Image
    JotForm Support

    Answered by Mike_G on July 25, 2015 at 11:51 PM

    To my understanding, you would like to have a Date/Time field that submitters can pick date and time from but only between your hours of operation, is that correct?

    There's a workaround. However, this may require you to have a separate field for Date field and for Time field. This would also require you to have three Time fields, the other two will be hidden depending on what particular Day of the Week does the date selected fall.

    You can check this Form, 

    http://form.jotformpro.com/form/52058949130962

    Please confirm if this is what you would like to happen. 

    Then, create a condition using the Condition Wizard that will Hide/Show field as necessary.

     

     

    That would result to:

    For the Hours of operation depending on what day of the week is selected, I have added CSS codes to the form using this guide: How-to-Inject-Custom-CSS-Codes

    #input_5_hourSelect option:nth-child(n):nth-child(-n+13){display: none !important}

    #input_5_hourSelect option:nth-child(n+18):nth-child(-n+25){display: none !important}

    #input_4_hourSelect option:nth-child(n):nth-child(-n+9){display: none !important}

    #input_4_hourSelect option:nth-child(n+21):nth-child(-n+25){display: none !important}

    #input_6_hourSelect option:nth-child(n):nth-child(-n+11){display: none !important}

    #input_6_hourSelect option:nth-child(n+18):nth-child(-n+25){display: none !important}

    This would only show the available Hours of Operation for specific Day of the Week. 

    You can clone the form I have used in my example using this guide: How-to-Clone-an-Existing-Form-from-a-URL

     

    I hope this helps. However, if this is not what you would like to happen, kindly help us understand your concern clearly by giving us more information about your request? We will wait for your response. Thank you. 

  • Profile Image

    Answered by jmssprinter on August 17, 2015 at 01:52 AM

    Hi,thanks for your help.i tried to clone the from you created.but it is not working.so please help me.

    my hours of operations are M-F 8 AM-6 PM,SATURDAY 10-3 PM AND SUNDAY 12 PM -3 PM.

    I TRIED MANY WAYS,ITS NOT HELPING.SO PLS HELP ME

  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 17, 2015 at 06:56 AM

    Hello jmssprinter,

    It seems one of my colleague have already moved your question to a new thread :  https://www.jotform.com/answers/640646 

    Thank you!

  • Profile Image

    Answered by jmssprinter on August 24, 2015 at 11:45 PM
    Hi,
    Thanks for creating a form with conditional settings for date and time of
    pick up. But I have problem in customizing the drop of date and time. I add
    same conditions in drop off time. But its not working. If you can help in
    customizing that,its really big help.
    http://www.jotform.com//?formID=52357696297169
    Thanks
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 25, 2015 at 01:05 AM

    Hello,

    It seems you have created one another thread where my colleagues have already responded:  https://www.jotform.com/answers/640646-I-am-looking-to-customize-the-time-in-my-form#8 

    Thank you!

  • Profile Image

    Answered by jmssprinter on August 25, 2015 at 01:45 AM
    Hi,he helped me.but that form contain time range,eg: customer can put to
    time for pick up.we want only one time.the pick upu time for the form is
    working fine.but the drop off form is not working.i use the same
    conditions,which i use in the pick up time.pls help me.
    thanks
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 25, 2015 at 03:42 AM

    Hello jmssprinter,

    I did test your form and it seems to work as expected. If the "Drop Off Date" is "Monday-Fri" or "Saturday" or "Sunday", the respective time field is being displayed correctly. Please check the screenshot below:

     

    I would suggest you to please test your form again. 

    Thank you!

  • Profile Image

    Answered by jmssprinter on August 25, 2015 at 05:45 AM
    Hi,
    Thanks for the quick reply.
    Date is not a problem during any time in the creation of the form.time is
    our problem. The pick up time shows exactly what we look for.but drop of
    time shows the whole 24 hours.
    Our office hours m-f 8am-6 pm,sat 10a-3 pm,Sunday 12- 3 PM.
    Jms Sprinter rentals
    www.jmssprintervanrentals.com
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on August 25, 2015 at 06:40 AM

    Hi,

     

    Can you try to inject this custom CSS code in your form to fix the issue in the drop off time?

    #input_13_hourSelect option:nth-child(n):nth-child(-n+13){display: none !important}

    #input_13_hourSelect option:nth-child(n+18):nth-child(-n+25){display: none !important}

    #input_14_hourSelect option:nth-child(n):nth-child(-n+9){display: none !important}

    #input_14_hourSelect option:nth-child(n+21):nth-child(-n+25){display: none !important}

    #input_12_hourSelect option:nth-child(n):nth-child(-n+11){display: none !important}

    #input_12_hourSelect option:nth-child(n+18):nth-child(-n+25){display: none !important}

     

    Do let us know if you need further help.

     

    Regards.

  • Profile Image

    Answered by jmssprinter on August 25, 2015 at 09:45 AM
    Hi,
    thanks for the replay
    i inject the CSS code at drop off date and time.it works only with Drop off
    date.no more working with pick up.
    So that code is good in 1 condition.
    ...
  • Profile Image
    JotForm Support

    (Private)

    Answered by Charlie on August 25, 2015 at 12:00 PM

    Hi,

    May I know if the time drop down options for the Drop Off date is the same with the Pick Up date?

    If that's the case, you can add this code also in your existing one:

    /** Pickup date **/

    #input_5_hourSelect option:nth-child(n):nth-child(-n+13){display: none !important}

    #input_5_hourSelect option:nth-child(n+18):nth-child(-n+25){display: none !important}

    #input_4_hourSelect option:nth-child(n):nth-child(-n+9){display: none !important}

    #input_4_hourSelect option:nth-child(n+21):nth-child(-n+25){display: none !important}

    #input_6_hourSelect option:nth-child(n):nth-child(-n+11){display: none !important}

    #input_6_hourSelect option:nth-child(n+18):nth-child(-n+25){display: none !important}

     

    Paste that code in your CSS area using your Form Designer Tool. Please do make sure that you do not delete the existing code you already have. Just add this one, probably at the beginning or at the bottom.

    I cloned your form for testing and demo purposes, you can check it here: http://form.jotformpro.com/form/52364918606966? 

    Let us know if that works.

  • Profile Image

    Answered by jmssprinter on August 26, 2015 at 01:45 AM
    Hi,
    Thanks for your wonderful help. I really appreciate it your time ,effort
    and mind.
    by joji
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on August 26, 2015 at 02:56 AM

    On behalf of my colleague, you are welcome. Please feel free to contact us again if you need further help.

  • Profile Image

    Answered by jmssprinter on September 01, 2015 at 08:45 PM
    Hi,
    my form is working perfect. Thanks for all your help.
    I would like to know how to prevent a customer being entering a Time which
    was not in my form. My regular working hours are 8Am-6Pm.today one customer
    enter 6Am pick up by manually entering using the key pad.how to prevent
    some one in doing that.
    Thanks
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on September 01, 2015 at 11:06 PM

    Hi,

     

    I am currently checking your form. Please give me more time to further check this. I will get back to you as soon as I get a result. 

     

    Regards.

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 01, 2015 at 11:48 PM

    Hi,

     

    You can try to add a validation in your form using condition to avoid user from submitting your form with incorrect Time value. Here are the steps that you can try to do:

    1. Add a Text field for your Error Message.

    2. Add Condition to show/hide the Error Message and Submit button to prevent user from submitting your form with incorrect data.

     

    You can also check this sample form that I have created for a closer look on the setup - http://www.jotformpro.com/form/52439088632966?

     

    Do let us know if you need further assistance.


    Regards.

  • Profile Image

    Answered by jmssprinter on September 02, 2015 at 12:45 AM
    Thanks
    ...