Issue With Embedded Forms: Conditional Statements Do Not Function 100%

  • Profile Image
    accwebsupport
    Asked on February 24, 2018 at 12:59 PM

    Dear Support,

     

    I added four forms to our website (accprinters.com/get-a-quote) through Jotforms. I used a few conditional statements following the "How to" instructions by Jotform (https://www.jotform.com/help/316-How-to-Show-or-Hide-Fields-Base-on-User-s-Answer). However, they only function sometimes.

    The conditions which break the forms are as follows:

    1. Use one form, select "other" from a drop-down menu triggering the conditional statement. Then go to another form using the tab menu. Select "other" from a drop-down menu on that form and notice that the conditional statement is NOT triggered. Refresh the page and it will begin working.

    2. Even after page refreshes the forms are glitchy. They do not work 100% of the time and I do not see a pattern to it.

    3. I had a radio button that triggered a conditional statement when it was set to "1-color". I chose it to be set to "1-color" be default, but that did NOT trigger a conditional statement. Therefore, your coding of conditional statement are not checking for conditions that exist BEFORE the user begins entering text. I fixed this by forcing the field visible since I knew the condition for visibility would be met a priori to beginning the form, but it is still incorrect logically. I found that if I selected a different option on the radio button, then went back to the first "1-color" option, I could trigger the conditional statement.

    4. Conditional statements work better when the rest of the form is filled out first. I noticed a pattern where I would try to test a conditional statement immediately after refreshing the page and it would not work. Then I would refresh the page and fill out the form and when I reached the conditional statement it would work.

    Please look into these situations and help me address them. This is a professional website and I cannot have forms that work sometimes.

    To me, and I imagine most business owners, the most important part of the form is reliability.

     

    Thank you.

  • Profile Image
    Mike
    Answered on February 24, 2018 at 05:40 PM

    Please try to embed your forms with the iFrame codes to isolate them from each other:

    Getting the Form iFrame Code

    If this does not help, let us know so we will be able to look further into this.

  • Profile Image
    accwebsupport
    Answered on February 24, 2018 at 06:54 PM

    This did not work.

    I used the iframe Code on a test page (http://www.accprinters.com/test-tabs) and the tables stopped displaying their entire height, therefore I could not test if the conditionals work.

    I found online a persons suggesting only using the <iframe> section of the code, so I tried that too. The "Business Card' tab uses only the <iframe> whereas the other three tabs use the entire code provided by Jotform.

  • Profile Image
    Kiran
    Answered on February 25, 2018 at 01:43 AM

    Please be noted that when the forms are loaded in iFrame they are treated as independent as if they are loaded in a separate tab/window. So, there shouldn't be any conflicts that might cause the issue. You may try increasing the height of the form to 1500px in the iframe embed code so that the complete form should be displayed.

    1519540964Selection_128.png

    Let us know if you need any further assistance. We will be happy to help.


  • Profile Image
    accwebsupport
    Answered on February 25, 2018 at 12:08 PM

    I put on the forms using iFrame with the increased height as you specified (Why does it not auto-adjust? Isn't that WHY I am using iFrame with javascript?). You were correct that I can now view the entire form. (http://www.accprinters.com/test-tabs)

    The iFrame fixed nothing. The form is even less functional than when I simply embedded it. Now the Brochure and other tabs' conditional statements do not function under any circumstance. Even fields which I specify to be visible initially are being hidden.

    1519578432Form Not Working.jpg

    Do you think you will be able to fix this? I have tried multiple things and the JotForms are simply NOT WORKING. I appreciate all the features, but I really just want something reliable.

  • Profile Image
    Kiran
    Answered on February 25, 2018 at 01:19 PM

    The height should be auto adjusted when the Javascript code is added to the form. Since you are embedding multiple forms on the same page, the Javascript code of each form is conflicting each other and causing the issue.

    However, since you have now changed the embed code to iframe code, there shouldn't be any conflict with the forms. I have checked the web page provided (http://www.accprinters.com/test-tabs) and see that the show/hide conditions are working fine and the colors are being displayed normally at my end. Please see the screencast below:

    1519582752Peek 2018-02-25 23-46.gif

    Could you try opening the web page on an incognito window or a separate browser to see how it works? Let us know if you need any further assistance. We will be happy to help.

  • Profile Image
    Kiran
    Answered on February 25, 2018 at 01:19 PM

    The height should be auto adjusted when the Javascript code is added to the form. Since you are embedding multiple forms on the same page, the Javascript code of each form is conflicting each other and causing the issue.

    However, since you have now changed the embed code to iframe code, there shouldn't be any conflict with the forms. I have checked the web page provided (http://www.accprinters.com/test-tabs) and see that the show/hide conditions are working fine and the colors are being displayed normally at my end. Please see the screencast below:

    1519582752Peek 2018-02-25 23-46.gif

    Could you try opening the web page on an incognito window or a separate browser to see how it works? Let us know if you need any further assistance. We will be happy to help.

  • Profile Image
    accwebsupport
    Answered on February 25, 2018 at 02:12 PM

    I tried opening the web page in incognito window and it is still not working. See my screen capture below.

    I tried in Chrome and that is working, but not Firefox. Why do you think that is?

    The Business Card tab is working, but none of the others. The Business Card tab is the landing tab.

    1519585949My View.gif

  • Profile Image
    jonathan
    Answered on February 25, 2018 at 03:22 PM

    Can you please clarify what specifically was not working?

    From what I have checked, the forms were working when I test using each form URL individually.

    But from the screencast you shared about the Tab not working, I found that it was not part of the forms.

    The Tab buttons on top were from your website page

    1519589860zzz 2018-02-26 04.14.18.png


    Can you confirm its the Tab buttons that were not working but each form actually does on its own.

    We will wait for your updated response.


  • Profile Image
    jonathan
    Answered on February 25, 2018 at 05:04 PM

    Thank you for the explanation. Let us try fix the issue with the conditions on one of the form first. 

    From your latest response, it is the conditions in the Brochures & Flyers form that were not working.

    I reviewed the conditions on the form and I found conflicting conditional statements.

    1519595947zzz 2018-02-26 05.54.49.png

    Can you please correct first those conditions by removing the option I highlighted in the image above. See if modifying the conditions fixes the condition rules issue you described on this form.

    To better test the conditions I also recommend checking them first within using the form URL only and not from the published form on website. This way you will be able to properly identify if the form itself have the issue and was not due to other conflict coming from other scripts (i.e. website page scripts).

    Let us know how it goes.

  • Profile Image
    accwebsupport
    Answered on February 25, 2018 at 05:29 PM

    No, you are still not understanding.

    The forms' conditional statements to show/hide do not work on "Brochures & Flyers", "Other" and "Booklet". They do not work for you and they do not work for me.

    They do work for "Business Cards" only because it is the landing page, it is open when I refresh the page.

    "Brochures & Flyers", "Other" and "Booklet" forms do work when I open them using their URL, which means the problem exists with having four forms in tabs on one page.

    Can you fix this?

  • Profile Image
    jonathan
    Answered on February 25, 2018 at 06:19 PM

    I reviewed again and I see the conditions were now properly working when using only the URL of the forms. This is for Chrome or Firefox browsers.

    1519600170zzz 2018-02-26 07.07.44.png


    But the issue still persist for Firefox browser only if using the publish forms on your website page. The conditions were not triggering as expected to.

    1519600276zzz 2018-02-26 07.05.05.png


    It is working when using Chrome browser.

    1519600324zzz 2018-02-26 07.06.00.png

    ---

    I am not able to identify any other way to test the issue because it only happens on your website page.

    What I do suggest you try first is to do a test using one form only at a time. Try removing the other forms on the website and test each individually only.

    Test if conditions are still not triggering using Firefox browser with only one form embedded. We can also test this on your website after you make the suggested test setup.

    Let us know how it goes.


  • Profile Image
    accwebsupport
    Answered on February 25, 2018 at 11:19 PM

    OK, the forms are functional as long as I have them on four different pages. This is not my ideal situation since I pay for each page I have, but it works.

    This seems like a glitch in your forms, I would appreciate the ability to have them tabulated in one page.

  • Profile Image
    Nik_C
    Answered on February 26, 2018 at 06:30 AM

    I'm not sure if this would work for you, but we do have form tabs widget where you can have one form in one tab embedded in iFrame embed widget, then the second one in second tab in second iFrame embed widget and so on.

    For example:

    1519644599screencast.gif

    Hope it helps.

    Thank you!