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

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.

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.

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.

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.

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

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.

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.

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:

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.

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:

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.

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.

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. 

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.

The forms, not the tabs, are not working.

In Kiran's screen cast the forms are not working. In my screen cast the forms are not working. When you visit the page the forms will not work.

Let me specify,

1. Go to http://www.accprinters.com/test-tabs

2. Select the "Brochures & Flyers" tab

3. In the drop-down menu select "Other" in the following fields: "Pages", "Stock for Inside Pages", "Cover Paper", "Size" and "Binding".

4. In each field a conditional statement should trigger a show/hide function which shows a new field where the user can specify the specific "Other" they are looking for. This step is critical because we need exact information from our client.

5. Repeat Steps 3-4 for forms: "Booklets" and "Other"

Can you fix this?

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.

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.

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?

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.

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.

It is working when using Chrome browser.

---

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.

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.

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:

Hope it helps.

Thank you!