Conditional elements momentarily appear

  • Profile Image
    Asked on April 10, 2012 at 03:43 AM

    I have several conditionals governing display of various elements in a form embedded into my Tumblr blog. Unfortunately, when the page loads, all form elements are momentarily visible, even those that should be hidden because their conditions have not yet triggered. In my browser (Firefox) this occurs only for a second or two before they all get hidden properly. Perhaps I am too picky, but I suspect this will distract or even confuse my users.

    In the tumblr page linked below, you should see all the elements render for a moment before disappearing. I don't want them to be visible until the user has entered the invitation code. The bad behavior does not occur when I navigate to the Jotform link directly:

    I have seen this thread: In separate forms (not the one linked below) I have tried the approach suggested: including the source code of the revealed form in an HTML element whose visibility is toggled by the invitation code. But the source code does not appear to carry along conditionals properly, so I lose the additional idiosyncratic conditionals defined within the revealed form.

    To summarize: I am at a loss at how to avoid the mometary reveal when I am using several nested conditionals. Is there a way to initialize all the subsidiary elements to invisible rather than visible? FYI, while I am not a premium member right now, I intend to become one shortly.

  • Profile Image
    Answered on April 10, 2012 at 05:09 AM

    Hello kbartz,

    I think I got the immediate solution that can resolve your question.
    You may noticed I was also involve in Vdelmonaco's quest on the thread you posted above. More or less I learned a lot from that experience too. =)

    The thing is, we cannot do anything on the lag that happens everytime you render the form on the screen. In reality the whole form is actually there, but part of it are just invisible/hidden because of the conditions. You know this already since you mentioned the conditioned not being triggered yet.

    To overcome this lag, you can do a bit of redesign on the form. Here is my suggestion:

    1. Create another form first. The entry form wherein it contains only the texbox code to enter and a submit button. (this is like a login or validation form)

    2. Put a condition on the 1st form(like the condition you currently have). The condition should make the submit button show/hide depending on the correct code entered.

    3. If the user is able to click submit (correct code was entered), then redirect the submit to another URL/page that contains the main form. Here is the guide: How to Redirect to a Page after From Submission

    4. The redirection form or page should now contain all of the fields/contents needed and the user can now proceed providing your required information.

    I think this should work. Basically you will not have to worry anymore of the other contents showing on the first form because it only contains that code entry part.

    I will also create this for you. But if you can do it on your own already, then much better.

    Will get back to you with the form when I am done.


  • Profile Image
    Answered on April 10, 2012 at 05:38 AM


    Here is the demo. Use 'testcode' for entry code.

    You may want also want to clone the forms



    How To Clone an existing Form from a URL

    Hope this helps. Inform us should you require further assistance.