How to make forms read-only?

  • Profile Image
    rwaldenjr
    Asked on October 26, 2017 at 12:21 AM

    I'm trying to disable some forms. And, I've read in several Forum strings that the recommended method is to turn Read-Only to "On" for each element, or else disable each element using Conditional Logic. However, many elements don't have a Read-Only button. And, I've been unable to disable several others using Conditional Logic, as follows (see my "Bird Dog Property Tip - TEST" form):

    Field No.

    15.  Bird Dog's Email Address
    30.  How much are they asking for the property?
    32.  What do you think these repairs might cost?
    40.  What do you think its worth, as is (nearest thousand)?
    42.  What do you think it would sell for, fixed up (nearest thousand)?
    55.  Google reCAPTCHA Widget
    56.  Terms and Conditions [the third one]
    57.  Submit


    I also read that a development ticket was submitted for a feature request to be able to collectively disable entire forms. What's the current status of that feature request?

    Thanks for your help!

  • Profile Image
    amy
    Answered on October 26, 2017 at 04:24 AM

    Would you please let us know whether you want to unpublish your form completely?

    Some fields aren't suitable for enabling the "Read Only" feature. For example, when I check one of your fields (Bird Dog's Email Address), I see that you have been using "Email Validator" widget. This widget can't have a "Read Only" feature as it needs to be filled by a user. 

    If you want to disable your form completely, you can change the form status from "Enabled" to "Disabled". Please check the further user guide: How to Enable/Disable a Form

    You can also archive your form if you don't need it anymore and you want to use it for the future. By this way, you are able to save from your form creations limit.  

    In order for you to archive a form,  click on it, then click on More and select Archive Form


    To bring it back, simply go to Archive Folder, select it and click on Unarchive

  • Profile Image
    rwaldenjr
    Answered on October 26, 2017 at 01:50 PM

    Thanks for all your detailed instructions on Disabling and Archiving forms, Amy. I've actually been using those features already to manage "unused" forms. However, what I'm trying to do is disable the ability for users to make data entries on my forms (effectively making all elements Read-Only), while still having the form and its elements viewable; similar to creating a non-fillable PDF image of the form.

    I'm trying to create an exact replica of my forms that users can preview, but can't enter data in. Once they agree to my TOS (via Terms & Conditions widget), they'll be given access to a "live" copy of the forms, made possible by the membership registration/login feature of Weebly. And, using the "Create PDF form" feature isn't a viable option because it doesn't create an accurate or complete version of forms, and it apparently can't create a non-fillable version of the forms (as addressed in this string, "Create PDF Form format").

  • Profile Image
    Kevin_G
    Answered on October 26, 2017 at 02:51 PM

    Unfortunately, it's not possible to have a read only version of the form, you will need to either set all the fields as read only through their settings or conditionally disable all the fields, using conditions you will be able to handle when the fields will be read only and when they will be available, this way you avoid to have two identical forms. 

    If you decide to use conditions you will only need to add the Get Form Page URL widget to your form: https://widgets.jotform.com/widget/get_form_page_url 

    Related guide: https://www.jotform.com/help/252-How-to-Add-a-Widget-to-Your-Form 

    Once added you will need to set up a condition to disable the fields when certain parameter is present on the form's URL, for example, I will use "readonly": 

    15090437491.png

    Sample link: https://form.jotform.com/71398222028960?readonly 

    If "readonly" is removed from the link then the form will be available to accept entries. 

    I hope this helps. 

  • Profile Image
    rwaldenjr
    Answered on October 26, 2017 at 04:10 PM

    The "Get Form Page URL" method seems like the way to go. I assume it behaves differently (better) than individual conditions for each form element?!? That didn't seem to work for many of the elements I've chosen. And, do you have an instruction link you can provide for how to use the widget? I get how to set it up. But, I'm not quite sure where to insert it on the page, and what else I need to do to use it correctly.

    Thanks!

  • Profile Image
    Kevin_G
    Answered on October 26, 2017 at 07:23 PM

    The Get Form Page URL can be added at the very beginning or the very bottom of the form, it will not be displayed on the form and it will silently capture the form's URL so you can use it with conditions. 

    However, I have been testing and found the "Disable" conditions will not work for widgets, the widget will still be available for your users and they will still be able to enter information there. 

    As a workaround I think you may hide the submit button instead of using conditions to disable the fields, although the fields will still be available and your users will be able to fill it, they will not be able to submit the form. 

    This is the condition that you will need to use: 

    15090593391.png

    Also, if you still need to have the fields disabled, I found another workaround for that, you will only need to do the following: 

    1. Add a text element to your form and add the following HTML code: 

     

    15090599421.png

    15090599562.png

    2. Once this is done you will only need to add a condition to hide show the text element when the parameter "readonly" is present on the form's URL:

    15090600663.png

    3. Add the following CSS code to the form: 

    div#over {

        width: 100%;

        position: fixed;

        height: 100%;

        top:0;

        left: 0;

        z-index: 100;

    }

    .question-wrapper div#over {

        display: none !important;

    }

    This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Please check my form again, I have added the Date Reservation widget in order to show you how it works, you will not be able to type anything on the form while the parameter is present on the URL: https://form.jotform.com/71398222028960?readonly 

    I hope this helps. 

  • Profile Image
    Rose
    Answered on October 27, 2017 at 04:16 AM

    We are sorry for this inconvenience.

    I assume you are referring to this form: http://www.jotform.us/form/72988443788176

    When I checked your form, I realised that verify email widget, terms and condition widget and the captcha field were not disabled even these fields are included to the related condition. 

    15090916542.gif

    I'm escalating this to our developers for a further investigation. It normally should have worked. 

    Regarding your other questions: 

    1. You need to add or delete "?readonly" to the end of the form URL to trigger or not trigger the related condition.

    2. Regarding the text field question, I honestly do not understand my colleague's suggestion. I will send him a message to answer your last question. 

     

  • Profile Image
    Kevin_G
    Answered on October 27, 2017 at 10:58 AM

    @rwaldenjr, 

    Apologies for my mistake on the instructions above, on the second one the condition should show the field when the parameter "readonly" is present on the URL, I already corrected the text and the image shows the correct condition: 

    15090600663.png

    Now, I've just checked your form and noticed that there are some errors in the CSS code: 

    15091162271.png

    15091162442.png

    I cloned your form, changed the condition and removed the errors from the CSS code, it seems  to be working on my end, please see it working here: https://form.jotform.com/72993935448979?readonly 

    Feel free to clone my form: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    I hope this helps. 

  • Profile Image
    rwaldenjr
    Answered on October 28, 2017 at 10:28 PM

    Excellent, Kevin! And, nice catch on my CSS errors. That, plus correcting your Show/Hide Field condition did the trick. My form is now disabled when "readonly" is added to the URL.

    I see your

    tag includes a new "over" ID. But, I don't see "over" listed as a standard HTML or CSS tag in W3Schools. Is that your shorthand for "overlay"?

    So, now that I can insure that users don't prematurely submit their forms without first registering on my site (registration enabled by Weebly), is there a way to prevent any curious users from accessing the live form by simply deleting "?readonly" from the URL? Or, can I require that they be registered on my site before they can see the live form?

    Also, I want the disabled form to trigger a pop-up TOS modal onClick. I've seen some users' sites that call a TOS modal that floats over the window and disappears on Submit, which I'd like to use. Should I add a conditional onClick layer over the disable layer you suggested to accomplish this? Is there a widget that does this? Or, is there a better way to create this feature? Here's the code I'm considering for the onClick event:

    "<div> class="over">
         <a target="_blank" href="https://form.jotform.com/{myTOS ID}>&nbsp:</a>
     </div>"

     
     

    ___________________________________

    Sorry that I missed the errant closing CSS Comment tags. I edited the CSS using Form Designer. And, the dark green Comments color against the black background is very difficult to see, especially with long comment lines that don't wrap. (See development suggestions, below.) Guess I'll have to use Advanced CSS Editor from now on since its a lot easier to see code on a white background.


    ** Development suggestions:

    a.  provide the option for users to customize their code colors, or else use a fixed color with better contrast; and,

    b.  allow long CSS code to wrap to the width of Form Designer's CSS window the way it does on the "Advanced CSS Editor>CSS" tab.

  • Profile Image
    rwaldenjr
    Answered on October 29, 2017 at 12:17 AM

    I notice that my errant CSS code may not have been my fault after all!?! I notice that my corrections don't seem to be saving in Advanced CSS Editor. I had this problem before, and one of your team had to do some JotForm magic in the background to fix the problem. (Don't remember which they found or in which of my many threads that was addressed.)

  • Profile Image
    Mike_G
    Answered on October 29, 2017 at 01:24 AM

    We are glad to know that the solution my colleague, Kevin, has provided worked for you.

    To answer your other questions:

    I see your <div> tag includes a new "over" ID. But, I don't see "over" listed as a standard HTML or CSS tag in W3 Schools. Is that your shorthand for "overlay"?

    The id attribute of an HTML element can contain a value that is more than one character and must not contain any space characters. The value is also case-insensitive. It specifies a unique id for an HTML element that can be used as a selector when declaring CSS codes.

    https://www.w3schools.com/tags/att_id.asp

    https://www.w3schools.com/cssref/sel_id.asp

    Is there a way to prevent any curious users from accessing the live form by simply deleting "?readonly" from the URL? Or, can I require that they be registered on my site before they can see the live form?

    I believe a way it can be achieved is to also provide a special link that should only be accessed or is only available after respondents have registered from your site. To achieve such may I suggest you check the instructions found in this guide — Allow-jotform-to-be-filled-out-only-by-those-with-a-special-link

    Also, I want to require my TOS to pop up on-click of the form when its in the disabled state. I've seen some users' sites that call a separate TOS page on-click which I'd like to use. Would I add a conditional on-click layer over the disable layer you suggested to accomplish this? Or, is there a better way to create this feature?

    The workaround that is explained in this guide can be applied to your form to achieve this requirement. — How-to-Add-a-Pop-Up-Modal-on-your-Form

    The Text (HTML) field that covers the whole form when the field should be in its disabled state will serve as the "Open pop-up" link mentioned in the guide.

    Here's a sample form: https://form.jotform.com/73010287590958?readonly

    The form fields are disabled in the form if the word "readonly" is present in the URL. Clicking the fields or any part of the form will open a modal that can contain your terms and conditions.


    ** Development suggestions:

    As for the suggestion, I have moved it to a new thread considering it is another topic. Here's the link to that thread: https://www.jotform.com/answers/1285015

    I notice that my errant CSS code may not have been my fault after all!?! I notice that my corrections don't seem to be saving in Advanced CSS Editor. I had this problem before, and one of your team had to do some JotForm magic in the background to fix the problem. (Don't remember which they found or in which of my many threads that was addressed.)

    I have found the thread you've opened regarding this and I see that the ticket submitted by my colleague to our developers is still open. Advanced-Designer-CSS-Comment-closing-tags-are-not-saved-correctly-if-there-are-two-comments-set-next-to-each-other

    Are you still having issues updating the CSS codes in your current form? If yes, please let us know.

  • Profile Image
    david
    Answered on October 31, 2017 at 11:33 AM

    The overlay class ID of "over" can be changed to whatever you'd like as long as the same update is made in both the form and the page the form is embedded to.  There is not a purpose to specifically naming it "over" as far as I can tell.  It is not a predefined class.

    Unfortunately, it is not possible to fully prevent savvy user from accessing forms.  There are small workarounds as discussed in this thread or you can add slight password protection, but anyone who is willing to dig deep enough would be able to eventually bypass any workarounds since there is no real method for authenticating users and allowing access based on that authentication.

    The pop-up modal can contain anything that a Text field would be able to contain.  Interactivity, especially things like input validation would not be possible.

    For the CSS issue, since this thread is getting quite long and away from the original topic, if you wouldn't mind opening a new thread with the details, we will be happy to have a look.

    o0458825832o

  • Profile Image
    rwaldenjr
    Answered on October 31, 2017 at 05:58 PM

    David -

    You indicate that "Input validation would not be possible", in regards to adding a TOS form to an open modal pop-up rather than a text box. However, in the example shown in the instructions provided in this thread, "How to Add a Pop-Up Modal on your Form", the sample form shows a "closed" modal with a user registration form that seems to float over the background (see https://form.jotform.com/70331350848958). How are these input fields different, as opposed to a TOS confirmation form?

    Also, now that we've figured out how to use "readonly" to disable my form's elements, do I still need to go to all the trouble of creating conditions that disable each individual element, as I was originally instructed?

    And, I was answering Mike_G's request earlier in this thread as to whether or not I was still having CSS issues. But, I've moved that response to its original thread, as identified by Mike_G (October 29, 2017 at 01:24 AM).

  • Profile Image
    Kiran
    Answered on October 31, 2017 at 10:25 PM

    It seems to be a long discussion about the issue that you are experiencing. Please allow me some time to go through and get back to you.

    Thank you for your patience and understanding. 


  • Profile Image
    Kiran
    Answered on November 01, 2017 at 03:12 PM

    How are these input fields different, as opposed to a TOS confirmation form?

    The TOS placed on your form is a widget that loads using iframe. When the widget is loaded in iframe, it is like loading on entirely different tab/window. The popup shown in the example provided in the guide is using a Text field along with some custom CSS code.

    do I still need to go to all the trouble of creating conditions that disable each individual element, as I was originally instructed?

    Yes. It is required to enable the condition to disable the fields.

    The other question related to CSS shall be addressed on the other thread itself.

    Thanks!


  • Profile Image
    rwaldenjr
    Answered on November 01, 2017 at 05:22 PM

    Thanks for the explanation Kiran. I'm not sure why the elements need to be conditionally disabled since the textbox overlay should prevent users from being able to access the elements underneath. I'd already coded several forms with "?readonly" HTML/CSS, and I didn't use any conditional logic (other than showing the textbox that contains the source code "div id="over">&nbsp;</div"). And, all form elements seem to be disabled. Why would that be the case, if all elements need to be individually disabled with conditional logic?

    Also, I sent some "?readonly" links to testers to see if the process works, and at least one person wasn't able to disable the form. Any ideas why not? (Feel free to move this question to a separate thread, if you feel this current thread is getting too long, as has been suggested by your colleagues.)

  • Profile Image
    david
    Answered on November 01, 2017 at 06:52 PM

    I am actually not quite sure what the purpose of having that modal window is.  It uses hyperlinks in a Text field in order to open different version of the form.  In the guide example, the button opens:

    https://form.jotform.com/70331350848958#open

    Which has the Modal window automatically popped up from other code in the text field.

    Where as the "X" in the top right is simply a button link to to:

    https://form.jotform.com/70331350848958#close

    Users could simply use https://form.jotform.com/70331350848958#close or https://form.jotform.com/70331350848958 to bypass the modal.  It does not actually prevent entering data into the form.

    Same thing for the ?readonly URL.  ?readonly doesn't actually make the form read only.  The conditions being used are checking if the form URL contains ?readonly and disabling fields accordingly.

  • Profile Image
    rwaldenjr
    Answered on November 01, 2017 at 11:22 PM

    Now I'm totally confused! I thought we were narrowing down the procedure for the security work-around I was going to implement, and you're telling me its all a waste of time?!? The concept of the modal was that it would contain the TOS, and possibly redirect members to the registration page. Yes, they could click out of it. And, if they clicked on the page again, up would pop the modal again, until they figured out that they were gonna have to register to use the page. But, I was hoping that they wouldn't be able to totally bypass the modal, or the ?readonly status until they registered, as validated by a string or URL passed from the registration page back to the form to unlock it. (I believe I received several links that explain such features.) Am I missing something here, or explaining my intent so that you guys understand what I'm trying to achieve?

  • Profile Image
    amy
    Answered on November 02, 2017 at 04:15 AM

    Hi again,

    I think my colleague just wants to learn the purpose of the modal window to be able to help you properly. We don't think it's a waste of time or etc. As this support thread is too long, we are facing with difficulty figuring out your requests. Hence, we kindly ask you to create a new thread for your further requests.

    On the other hand, I would like to inform you that I have just tried to implement some CSS codes to my cloned form in order to make some fields read-only. I tried to use the :read-only selector and user-select: none property. However, they failed. When I asked its reason to one of our developers, he said that these CSS methods didn't work as the elements were implemented with iframe method into the form.

    Could you please let us know whether you want to redirect your users while they are filling the form out or while the form is in the read-only mode? If you want to redirect your users while they are filling the form out, you are able to redirect them to another page with redirecting the thank you page. For this purpose, please check out our user guide: Redirecting Users to a Different Page