Edit start and end time

  • Profile Image
    Asked on August 17, 2011 at 03:05 PM

    I need to add a control to my form that allows a user to request an appointment that includes the date and start and end time.

    I added the date picker which includes a time (i use for start time) I would like to just add a time field to capture the end time.  Is this possible?

  • Profile Image
    Answered on August 17, 2011 at 11:06 PM

    Hi Ishad24,

    First of all, thank you for using JotForm.

    Yes, it is possible. You can edit the full source code of the form and delete the date, month, and year fields, leaving only the time. But, I would not recommend it due to the risk that you may affect the entire form. The best thing you can do is to add another 2 textbox fields for the hour and minutes, and a dropdown box for am/pm.

    Use a FreeText HTML to put "To" before the end time. Hope this helps. If you have further issues and concerns, please feel free to contact us.


    Albert | JotForm Support

  • Profile Image
    Answered on August 22, 2011 at 09:24 AM

    I added two textboxes per your instruction. How can i align the free html so that the / and the to are aligned centered and closer to the textboxes?  There is too much space in the example you gave.

  • Profile Image
    Answered on August 24, 2011 at 01:19 AM


    Can you please provide more details with regard to the nature of your latest response? I checked your form but I cannot see a free text field in it.

    We'll await your response. Thank you for using JotForm!


  • Profile Image
    Answered on August 25, 2011 at 10:43 PM


    Hi there,

    I've figured out that instead of using freetext html, you can also use textbox alone and have it labeled as "End Time" and "/" or a semicolon then align it to left. After doing so, let's start the editing.


    1. Copy the full source code of your form to notepad (I will name it as orig.html) or any IDE such as dreamweaver

    2. Identify what part of it is the code for the "end time".

    3. Cut and paste the code of your end time from orig.html to another file, we will name it as scratch.txt

    4. Insert to orig.html the code below in place of the omitted part of your end time. 

     <li class="form-line form-line-column form-line-column-clear" id="id_3">

                    <label class="form-label-top" id="label_3" for="input_3"> End time</label>

                    <div id="cid_3" class="form-input-wide"><span class="form-sub-label-container"><input type="text" class="form-textbox validate[Numeric]" id="input_3" name="q3_to3" size="2" />         


                            <label class="form-sub-label" for="input_3"> Hour </label></span>

                   <span class="form-sub-label-container"><input type="text" class="form-textbox validate[Numeric]" id="input_4" name="q4_4" size="2" />

                            <label class="form-sub-label" for="input_4"> Min </label></span>

                    <span class="form-sub-label-container">

                        <select class="form-dropdown" style="width:50px" id="input_5" name="q5_5">

                            <option>  </option>

                            <option value="AM"> AM </option>

                            <option value="PM"> PM </option>

                        </select>&nbsp;&nbsp;&nbsp;&nbsp; to

                    <label class="form-sub-label" for="ampm_2"> &nbsp;&nbsp;&nbsp; </label>  </span>



    This code makes up the "End Time" <input text for hour> ":" <input text for minutes> <am/pm selector> to...

    5. Preview your form to make sure that the design ishandled properly .

    6. And the most important is to replace the label's id and input's id of every field. (This is for the form to properly send you an email  notification). Replace ID's from scratch.txt to the pasted  code in your orig.html. I've attached here a guide on what to replace in your org.html from the scratch.txt. For example, in no.1, the id in the orig.html will be replaced with "id_65", no.2 will become "label_65" and so on..

    Hope this helps.

    If you have further issues and concerns, please feel free to contact us again. Our team will be more than happy to assist you with anything.


    Albert | JotForm Support

  • Profile Image
    laura Shaddock
    Answered on August 26, 2011 at 07:39 AM

    I had already figured out that I can edit the html to get the results I want; however, I also need to use an edit button on my form (I needed to allow the form to be edited after submission with a workflow).  If I include this edit on the notification, when the user clicks the edit button, it opens the original form, not the form on my server where I made my html edits. I asked about this a week ago and was told this was how it works.  See this thread.  


  • Profile Image
    Answered on August 27, 2011 at 12:34 AM


    We usually advise against using source as much as possible, unless the user is extremely skilled with web programming. Injecting custom css is probably the safest way to go about customizing a form without affecting its backend process. It has limitations though, such as it can only affect the appearance of form elements, not insert or introduce a new element.