Anchor tag not working properly on embedded forms

Hello,

  I'm trying to add 3 links far down in my form to the top of the form so one can review their order before submitting it.  I believe that I have coded the links properly, but they aren't working.  I have added an anchor to the top text element and a link to each of 3 text elements next to the submit buttons.  If you can tell me what I'm doing wrong, I'd really appreciate it.

Thanks.

My form is: http://www.jotform.com//?formID=50455070789158

Hi there,

This is the link that you are referring to right?

I can see that it is working properly. When I clicked the link, it scrolls up all away to the top of the page. It looks fine when I tested it with Chrome, Firefox and Internet Explorer 11.

If the issue is still the same, please trying clearing your browser's cache.

Hope this helps. Thank you.

Hi,

  Yes. Those are the links I'm trying to get to work now.  I tried clearing my cache on Chrome and Firefox.  After doing it per your instructions, the links still do not work. 

Here's a snapshot of the clearing that I did on Chrome:

I just cleared Cookies, Download history, Autofill form data and Content licenses as well.  Links still don't work. 

We are able to make it to work. Please try to open the form on an incognito windows (Chrome) or Private windows (Firefox) . Otherwise, you must select all of the boxes.

These links do not work on my husband's computer or my friend's computer...she lives in Wisconsin.  I cleared everything I could and the links still don't work on my computer in either Chrome, IE or Firefox.  The problem is not unique to my computer.

Any other ideas?

Thanks for  your help.

Hi,

I also tried the link in your form and it returns me to the top of the form when clicked.  The link within the form that also redirected to different parts of the form all seem to work as well.  As my colleagues stated, your links do indeed look like they work.  I too am unsure why they are not on your end.  Every browser I tried worked.  Unfortunately I do not have any ideas because as far as I can tell, everything works.

I changed the #TopOfForm link next to the first Submit Form to a non-relative link:

http://www.madsails.com/Order_FS_sailsTest2.html#TopOfForm

This at least moved!  Please see snippet of resulting screen below.  Can you explain why I'd see the top part of my screen duplicated?  Does this shed any light on the problem of the plain ol' relative link not working?

Unfortunately, anchors within iFrames are not consistent between browsers. I have tried Embed and iFrame embedding methods, and JS Embed code worked better across different browsers.

However, even with the Embed code anchors will not work in Firefox, see the next stackoverflow thread:

Jump Link Inside an iFrame

The solution based on _parent links from stackoverflow, will not work since the "_parent" parameters are being stripped by the JotForm builder.

<a target="_parent" href="http://parenturl.com/#my-id">jump link</a>

I am afraid that you will need to use Source Code embedding option if you need the anchors on your form. Thank you.

I didn't really understand your response.  Up until now, JotForm Support said that the anchors and links I inserted in my form were working fine, just not on my computer. Now you're saying they can't work without source code embedding?

Hello bdoodle,

Well the anchor tags you have added in your form works fine if you access your form with its direct URL. 

The issue seems to be related to the web page URL where you have embedded your form. The anchor tag of your embedded form is not working. You have embedded your form using its iFrame embed code and this is what my colleague explained you earlier that "anchors within iFrames are not consistent between browsers". 

Please embed your form using its script emebd code and that should solve your problem but it will still not work in FireFox browser because of the FireFox Bug #638598.

Hope this answers your query.

Do get back to us if you have any questions.

Thank you!

I don't understand nuthin'!  Anyway, as was instructed by aswhin_d, I changed from using iFrame to the regular script embed and the links DO work.  Hitting the Clear Form button also no longer positions you down the page. (This is another open question in your forum that I have.) Thank you for your patience with me and for diagnosing the problem. 

Now, however, my text error elements that are defined with conditional rules to only show under certain circumstances, show as soon as I open the form.  The condition rules for the error fields are based on values defined for each panel field in the spinnaker color sections. Do they work differently with a different embed approach?  I realize that this may be a different thread, but can you help?  Thanks!

Nevermind.  Once I installed the form completely, this problem no longer occurred.  Thank you for all your help.  Yours is the best support group I've ever encountered. If you want me to write a testimonial for you, please don't hesitate to ask.

Thanks again!

I'm baaaaack!  I have real trouble now!

Now, the link in the Specify Spinnaker Colors section that's supposed to take you to the Tri Radial Spinnaker colors section takes you to the top of the form the first time you click it.  The second time y ou click it, it takes you to the proper spot.  I also find that the other links that are supposed to take you to the top of the form sometimes work and sometimes take you to the Tri Radial Spin section. And at this point, I can't enter anything in the top of my form because the page keeps repositioning itself in the Tri Radial section without me clicking anything!!!  

Hello bdoodle,

I am not sure if I have understood the issue correctly.

Are you having issue with the form you have embedded in the following web page URL:  http://www.madsails.com/Order_FS_sailsTest2.html 

I did check the web page and I do not see the "page keeps repositioning itself in the Tri Radial section" issue. The page / form is not re-posting.

Can you please use the following iFrame embed code along with the script code you get with iFrame embed code and see if that solves your problem:

<iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.us/form/50455070789158?nojump" frameborder="0" style="width: 100%; height: 4292px; border: none;" scrolling="no"></iframe>

Thank you!

Yes.  I'm still talking about the form in URL:  http://www.madsails.com/Order_FS_sailsTest2.html 

I thought changing from the iFrame embed to the regular script embed, at your suggestion above, is what fixed my problem with links not working at all.  Are you saying I should return to using the iFrame embed code along with your code above?

Please note that the problem is that some of the time when I click the link to go to the Tri Radial Spinnaker section, it goes to the top of the form, and sometimes when I click the link to go to the top of the form, I'm directed to the Tri Radial spin section.   The problem of being stuck in the Tri Radial section hasn't recurred. 

The problem of being stuck in the Tri Radial section has just recurred.  I had just cleared my cache of images and files.

Hi,

What my colleague was suggesting was to use the code he referenced, in addition to the frame resize code that is included with the iFrame embed code.  The total resulting embed code would be:

<iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.us/form/50455070789158?nojump" frameborder="0" style="width: 100%; height: 4292px; border: none;" scrolling="no"></iframe>

<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

Although when I tried this in my test page the anchors in the form did not work.  You may have different results.  If this does not work, you may need to use the suggestion made by Mike to use your forms source code and edit the anchors.

This causes all links to not work.  I reverted to regular script code embed.  I removed the link to Tri Radial section leaving only 3 links to top of form.  Since they all go to same place, they work fine.

Thank you for update. I can confirm the same behavior on my side, the 'Return To Form Top' links look good in my browser. If you need any further assistance, please let us know.