What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Anchor tag not working properly on embedded forms

    Asked by bdoodle on March 08, 2015 at 10:59 AM

    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

     

    Page URL:
    http://www.madsails.com/Order_FS_sailsTest2.html

    anchor anchor tag iframe anchor
  • Profile Image
    JotForm Support

    Answered by Jan on March 08, 2015 at 01:31 PM

    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.

  • Profile Image

    Answered by bdoodle on March 08, 2015 at 03:22 PM

    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:

  • Profile Image

    Answered by bdoodle on March 08, 2015 at 03:30 PM

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

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on March 08, 2015 at 06:22 PM

    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.

  • Profile Image

    Answered by bdoodle on March 09, 2015 at 01:18 PM

    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.

  • Profile Image
    JotForm Support

    Answered by david on March 09, 2015 at 02:17 PM

    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.

  • Profile Image

    Answered by bdoodle on March 09, 2015 at 05:51 PM

    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?

  • Profile Image
    JotForm Support

    Answered by Mike on March 09, 2015 at 07:30 PM

    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="_blank" href="http://parenturl.com/#my-id" rel="nofollow">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.

  • Profile Image

    Answered by bdoodle on March 09, 2015 at 11:55 PM

    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?

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 10, 2015 at 09:44 AM

    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!

  • Profile Image

    Answered by bdoodle on March 10, 2015 at 10:30 AM

    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!

  • Profile Image

    Answered by bdoodle on March 10, 2015 at 10:48 AM

    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!

  • Profile Image

    Answered by bdoodle on March 10, 2015 at 10:55 AM

    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!!!  

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 10, 2015 at 12:27 PM

    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!

  • Profile Image

    Answered by bdoodle on March 10, 2015 at 12:42 PM

    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?

  • Profile Image

    Answered by bdoodle on March 10, 2015 at 12:49 PM

    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. 

  • Profile Image

    Answered by bdoodle on March 10, 2015 at 12:52 PM

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

  • Profile Image
    JotForm Support

    Answered by david on March 10, 2015 at 01:39 PM

    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.

  • Profile Image

    Answered by bdoodle on March 10, 2015 at 02:55 PM

    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.

     

  • Profile Image
    JotForm Support

    Answered by Mike on March 10, 2015 at 04:07 PM

    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.