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

    When are you going to support mobile devices via

    Asked by Gerhard Schnatmann on January 13, 2012 at 05:59 AM

    I am providing mobile websites for small and medium sizes companies.

    Trying to use "jotform" for some purposes I have encountered the following short comings:

    Time & date:

    You have done a proper job in allowing for different date formats and time formats. Congratulations, because this is not to often to be found in software product coming from US.

    Here are the remarks which I would like to be addressed:

    I have set the date & time in a way, that nothing is preloaded into the date fields and time field, within other words the fields are empty.

    Why is it, that when I select a date from the calendar, the time fields are automatically populated with the current time of the computer? This can lead to errors and misunderstandings.

    i.e. a hotel reservation form: The date and time is labeled "arrival at the hotel". The potential customer of the hotel uses the calender to assign a date. Doing so, the current time of the computer is automatically input in the time fields, lets say 04:00 pm, but the customer don´t want to appear at 04:00 pm but at 10:00 pm. Because the customer is so happy that he didn´t had to type in the date, he continues with the next input field without noticing that the software has automatically inserted a time, which is not the time he will show up at the hotel.

    Solution:
    Don´t automatically insert the current computer time into the time input fields. Let the user define the time explicitly. Make it easy for the user and provide something similar for the time field as you are offering for the date fields.
    A selection of time alternatives i.e a listing of time intervalls 09:00; 09:30; 10:00; 10:30 etc where the user can select his time.

    Providing selections like the calender is a very, very good thing when it comes to mobile computing, because it prevents the user from typing in data via the tiny keyboards which are displayed on tiny screens.

    When I am trying to create forms for mobile devices, I have to bear in mind, that I do have only a maximum of 320 pix. in width, where my form has to fit in.

    When using "jotform" day & time it appears, that the day & time do not fit within one row. Since the time appears at the very end, it happens that the time is seperated int two parts. One part stil shows up at the very end of the row, but the remaining part is pushed into the row underneath. That looks unprofessional.

    Why don´t you provide the following?

    1.) date and time as is
    2.) date and time seperated, each as a single input field.

    Marking fields as compulsory:

    I am a newbie with jotform and may be that I haven´t found the right answer to the problem in your comprehensive tutorials.

    When marking an input field as compulsory, a red asterix appears next to the field caption. For a form which is setup with a white background and black text this works fine.

    It looks a bit different i.e. when you have, due to the customes CI a dark blue background and white text. On the dark blue background the red asterix is hardly to be seen.

    Is it possible to change the colour of the asterix i.e. to yellow?

    Comments / Remarks for input fields "Hover text:

    I created a form for a mobile device (max. width 320 pix) and applied hover text for a couple of input fields.
    When I did a preview I saw that all of the hover texts where overlaying the input fields, so that the user couldn´t see the input field or only a small part of it.

    Is it possible to position the hover text differently?
    1.) When the input field is at the very top of the screen, or in the midths of the screen, position the hover text underneath the input field.

    2. If the input field is at the very end of the screen, position the hover text over the input field.

    Kind regards from Germany

    Gerhard Schnatmann

    PS:
    If the way I am describing the problems is not as obvious as it should be, foregive me but English isn´t my first language.

     

     

  • Profile Image
    JotForm Support

    Answered by abajan on January 13, 2012 at 07:59 AM

    Welcome to JotForm and thanks very much for your suggestions regarding the date/time fields. They are duly noted and will be forwarded to our Tier 2 team.

    Changing the Color of Required Fields' Asterisks

    That can be done via our Inject Custom CSS feature. The selector that targets all such asterisks in a form is .form-required. So, if pure yellow is desired, use the following rule:

    .form-required {
    color: #FF0;
    }

    #FF0 is the shortened version of #FFFF00 (yellow would also have worked but color names are not as widely supported across platforms and browsers as their hex equivalents. See this). Targeting specific asterisks requires the inclussion of IDs in the selectors. So, if you only wanted to change the color of a required field asterisk attached to a field whose ID was id_3, you would need to amend the above rule as follows:

    #id_3 .form-required {
    color: #FF0;
    }

    This rule can be literally interpreted as "Look for the element whose ID is id_3 and change the color of all of its descendant elements that have a class of .form-required to pure yellow." This form illustrates what I mean. The text box has an ID of id_3. So only that asterisk will be changed to green by the following rule:

    #id_3 .form-required {
    color: #090;
    }

    (Feel free to clone the form so you can not only view its injected CSS for yourself but change it and see the effects of those changes.)

    In some instances (for example, if the form is embedded in a web page that has overriding CSS) the !important keyword will also be necessary:

    .form-required {
    color: #090 !important;
    }

    Repositioning Hover Texts

    Injected CSS to the rescue again! Please see the following:

    Hover Text Customization: Arrow Realignment

    It's somewhat tricky to re-position hover text box arrows. So, if you need assitance with a particular form, we'll be glad to help. Alternatively, the the arrows can be left out altogether with:

    .form-description-arrow,
    .form-description-arrow-small {
    display: none;
    }

    The absence of an arrow would in some instances necessitate moving the hover text box closer to the field to which it refers. However, moving the entire box if a much simpler task than moving the arrow around the box. The selector that targets all hover text boxes in a form is .form-description. Since hover text boxes are declared as absolutely positioned in the main JotForm style sheet, top, bottom, left and right properties can be declared to move the boxes as desired:

    .form-description {
    top: 12px;
    left: 300px;
    }

    Here again, with the inclussion of ID selectors, boxes can be independently targeted.  View the source of this form and take note of the comments in its injected CSS. (See Learn CSS Positioning in 10 Steps for more information.)

    Incidentally, margins can also be declared either in combination with or in place of top, bottom, left and right. And the !important keyword might also be necessary in some or all of the declarations. It all depends on the specific situation.

    If you need additional assistance with anything, please let us know.

    By the way, your English is just fine!

  • Profile Image
    JotForm Support

    Answered by abajan on January 14, 2012 at 11:28 PM

    Re: DateTime Fields

    In addition to setting the default time to not be shown, perhaps your best workaround for the time being would be to hide the time section and replace it with a separate field as in the following example:

    Clicking the image above will take you to the live form. Of course, in the time field you can opt to use just 15 minute increments instead of all 1440 minutes. (Please see the "How to Add a Time-Only Filed" in our user guide.)

    Incidentally, the following CSS controls the width of the time drop down:

    #input_1 {
    width: 85px !important;
    }

    Here the !important keyword is necessary to override the inline style declaration of width:150px which can be seen in the form's source.