JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
DateTime Single widget - New widget wizard is not recognizing injected CSS codesAsked 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.
DateTime Single show hide cloak
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.
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.
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.)
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.
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 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.
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.
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.
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
Thanks in advance.
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.
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.
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.
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.