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

    Paging is not working when my form is embedded

    Asked by joiakim on March 12, 2015 at 04:17 AM

    Hi,

    I am implementing several form on my website and there seems to be an issue with the forms containing line breaks.

    The next button doesn't work on some browsers like Mozilla and IE. However it seems to be perfectly working on Google Chrome. Could you please adress this issue and let me know if you find any solution to this.

    My website is www.must-attitude.com, forms are implemented on product pages.

    example: http://www.must-attitude.com/products/2015/3/9/adidas-crazy-8-basketball-sneaker-12500

     

    Thank you very much for your help!

    Best regards,

    Joiakim CHANGO

     

    Page URL:
    http://www.must-attitude.com/products/2015/3/9/adidas-crazy-8-basketba<br/>ll-sneaker-12500

    next product height page break js embed iframe embed
  • Profile Image

    Answered by raul on March 12, 2015 at 09:49 AM

    Please try to use the iframe embed method instead, this behavior is probably caused by a conflict between our scripts and your site scripts. Using an iframe should fix this.

    Let us know if this helps.
    Thanks.

  • Profile Image

    Answered by joiakim on March 13, 2015 at 05:48 AM

    Iframe embed works but the design doesn't perfectly fit on the website page (even resizing it) , is there any other way to solve this script conflict without using the Iframe method?

    Thank you 

    Joiakim

  • Profile Image

    Answered by raul on March 13, 2015 at 09:03 AM

    Well, the iframe method is the best way to prevent any script conflicts. But, you could also try using JQuery in a non-conflict mode to see if this helps.

    I see that you put back the JS code on this page: http://www.must-attitude.com/products/2015/3/9/adidas-crazy-8-basketball-sneaker-12500. If you want, you can go ahead and use the iframe code in it so we can see how it looks and help you out to make it look the way you want to.

  • Profile Image

    Answered by joiakim on March 13, 2015 at 09:25 AM

    Well I have put back the Iframe embed for you to check it out :

    http://www.must-attitude.com/products/2015/3/9/adidas-crazy-8-basketball-sneaker-12500

    in this page I set height to 300px as you can see it fits perfectly.

    Now same parameters here for the embed :

    http://www.must-attitude.com/products/2015/3/9/adidas-crazy8-basketball-12500 

    As you can see there is a small blank space after the iframe because the image on the left side isn't big enough causing readers to scroll down more than they should. 

  • Profile Image

    Answered by raul on March 13, 2015 at 10:38 AM

    Ok, please try to use the iframe code without the script that is included below of it. This script is built to adjust automatically the height of the iframe, but you can use the iframe without it and leave the height of your preference.

    In other words, please try to use the code below:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformeu.com/form/50693842356361" frameborder="0" style="width: 100%; height: 320px; border: none;" scrolling="no"></iframe>

    Let us know if this works. Thanks.

  • Profile Image

    Answered by joiakim on March 13, 2015 at 11:58 AM

    I have tried with the instruction you gave me. It seems to be working at first sight, no more blank space . A new problem shows up when clicking on dropdown field, half of the option list is cut to the height which has been set. 

    I have tried any thing but can't manage to auto adjust the height just like in embed mode.

     

  • Profile Image

    Answered by joiakim on March 13, 2015 at 11:59 AM

  • Profile Image

    Answered by Ben on March 13, 2015 at 02:30 PM

    This happens because of the limit set to the height of the iframe.

    For example it would expand properly if you go to it directly: http://www.jotformeu.com/form/50693842356361

    Now I would also suggest to change the embedded code to use non-secure version of the URL since for free plan there is a limit of 10 secure submissions while for regular submissions you have 100 submissions limit (both per month).

    I would also like to suggest - since the height of the iframe is important to you - to use the following widget instead:

    Multiple Selection

    It will allow your visitors to select their preference without using or needing much of the space.

    Do let us know if that would work for you.

    Usually this would be moved to a different thread since it is not connected, but I am leaving it here in case you are not liking the suggested widget and would like us to help you set it all up using the current fields.

  • Profile Image

    Answered by joiakim on March 13, 2015 at 03:34 PM

    Hello,

    I didn't thnink about this widget I agree it is better than the ckeckbox dropdown. My idea would be to add a scrollbar to the Multiple selection widget to allow visitors to see all the options once they click on the selection field.

    Could this be possible by inserting an overflow value in custom CSS?

    Thanks for your support 

  • Profile Image

    Answered by Ben on March 13, 2015 at 05:13 PM

    I took a look at this page: http://www.must-attitude.com/products/2015/3/9/adidas-crazy-8-basketball-sneaker-12500 but it seems that it is resizing properly for me so I am able to see it when I click on it:

    Now I did notice that you are still using the SSL (secure embed option) there and I just wanted to let you know that you have already used 5 of 10 so you might get a notice to upgrade (when it reaches 7-8).

    Now in terms of overflow, you are correct, overflow is the exact term used, but we would need to see where and how it is shown in order to know what could be done and how for it.

    Now I would just like to check with you if the original issue with the paging now resolved?

    If so please use this link to create a new thread and we would help you set it all up with the multiple selection widget.