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

    DateTime Single widget - New widget wizard is not recognizing injected CSS codes

    Asked by MaidCrew on December 09, 2015 at 10:24 PM

    Hi... Into one of my forms I've added a widget by the name of "DateTime Single". I'd like to cloak (not hide) the field so that the input (time stamp) registers upon page load and is then passed on through email upon form submission. (I know that the email's date&time can act as a time-stamp but I'm needing a time-stamp for when the form was actually initiated and then additional time-stamping for when certain subsequent pages were loaded or rendered.) Is there a simple way to cloak the widget so that viewers / form-submitters can't manipulate the time-stamp. I'm not good with CSS... not even sure if CSS can cloak a widget input-field or if the widget creator has to build that feature in ??? Thanks in advance for any help.

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

    DateTime Single show hide cloak
  • Profile Image
    JotForm Support

    Answered by Chriistian on December 10, 2015 at 03:03 AM

    Hi,

     

    Do you mean you want to disable the DateTime Single widget so user cannot change the value of the widget? If so, please try to inject this custom CSS code in your widget.

    input#cal {

        pointer-events: none !important;

    }

     

     

    You can check this sample cloned form that I used for testing - https://form.jotform.com/53431139061952?.

     

    Do let us know if you need further assistance.
    Regards.

  • Profile Image

    Answered by MaidCrew on December 10, 2015 at 06:08 AM

    Thanks for reply... it's not that I don't want user to be able to change the value, I just don't want the user to see the date & time at all... BUT I can't "hide" it with conditions or the output/value won't render/generate.

    I will place on the form a secondary, visible date & time field for the user to view & use as a "clock-in/check-in" while the cloaked date & time will be used to validate that they were honest with the "clock/check-in" times the user entered.

    Its like the cloaked GPS/address location validator I have on the form.  The user isn't aware that the upon submission, their location is recorded & passed along to us to validate they are where they're suppose to be. (we're wanting to use this form as a time-card for unsupervised employees out in the field who are suppose to be as specific addresses at specific times.... when they input their clock-in times & their location, we need to be able to have the form's cloaked GPS & Date-Time fields act as a validation of the values they inputted into the non-cloaked date-time fields.)

  • Profile Image

    Answered by MaidCrew on December 10, 2015 at 06:48 AM

    I tried the CSS you recommended on both an apple iphone & an Android based phone and on my computer and the input can still be manipulated or adjusted.

  • Profile Image
    JotForm Support

    Answered by mert on December 10, 2015 at 09:14 AM

    Actually, if you set the "Hide the Default Field" as "Yes", it will hide the current date and time on the widget's "Text Box" field.

     

    To do that,

     

    Below, you can see the results on mobile:

     

    I hope this one will work for you. Please try this one and let us know the results.

    Thanks.

  • Profile Image

    Answered by MaidCrew on December 10, 2015 at 10:54 AM

    Thanks for the response but this solution does not work either.... users are still able to click into & activate the field and select a date & time.  The field has to be cloaked or disabled from editing to keep users from messing with it.

    the default date/time widget under Quick Tools would work IF it were to record current time upon page load rather than form load.  Still at a loss.

  • Profile Image
    JotForm Support

    Answered by BJoanna on December 10, 2015 at 12:13 PM

    CSS code that my colleague Chriistian provided will disable the DateTime Single widget so user cannot change the value of the widget. I have tested his form and my cloned form and I was not able to change the date/time on my PC and on my Samsung Galaxy S4.

    If you want to hide field, you can do it by adding this code inside of DateTime Single widget Custom CSS field.

    input#cal {

        visibility:hidden!important;

    }

    On my cloned form I disable first DateTime and I hide second field. After that I made test submission and first DateTime  field is showing time when i started form and second when I when I clicked on next button and open second page.

    Here is my demo form: https://form.jotform.com/53434552854964? 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by MaidCrew on December 10, 2015 at 01:55 PM

    I've made a recording of what I'm experiencing.  Not sure what I'm doing wrong but I thing I've followed y'alls instructions correctly and I'm still not obtaining the same results as y'alls cloned form.

    Please advise... I'm on a Windows 10Pro using both Chrome & Edge Browsers

    http://screencast-o-matic.com/watch/col6FKhUu7

    Thanks in advance.

  • Profile Image
    JotForm Support

    Answered by BJoanna on December 10, 2015 at 02:21 PM

    Thank you for providing video with your issue. When I watched your video I saw that you are using new widget wizard. It seems that new widget wizard is not recognizing injected CSS codes. I was able to replicate mentioned issue when I used new widget wizard. 

    I will escalate this issue to our developers and we will inform you via this thread once this issue is resolved. 

    For now with this link http://www.jotform.com/?old, you can access old widget wizard and add code that my colleague provided.

  • Profile Image

    Answered by MaidCrew on December 10, 2015 at 02:54 PM

    Still not sure whats wrong... did as you instructed but system doesn't want to render the same screens on my end.  Another vid to show what I did.

    http://screencast-o-matic.com/watch/col6qshUxj

    thanks

  • Profile Image
    JotForm Support

    Answered by BJoanna on December 10, 2015 at 03:41 PM

    I have moved your last question to separate thread, because it is not related to subject of this thread. We will provide you an answer on other thread shortly.

    http://www.jotform.com/answers/722722 

     

  • Profile Image
    JotForm Support

    Answered by TitusN on December 21, 2015 at 12:13 AM

    Hello, 

    We've fixed the Custom CSS tab - your Custom Styles should be able to work now - 

    Please give it a spin - and if you have any issues - let us know.

    We apologize for the inconvenience caused.