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

    Edit start and end time

    Asked by lshad24 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 by brx250 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 by lshad24 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
    JotForm Support

    Answered by NeilVicente on August 24, 2011 at 01:19 AM

    Hi,

    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!


    Neil

  • Profile Image

    Answered by brx250 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>

                </div>

     

    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

    Answered by laura Shaddock 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.  

    http://www.jotform.com/answers/39423-edit-link-to-proper-form

  • Profile Image
    JotForm Support

    Answered by NeilVicente on August 27, 2011 at 12:34 AM

    Laura,

    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.


    Neil