Paging is not working when my form is embedded

  • joiakim
    Asked on March 12, 2015 at 4: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

     

  • raul
    Replied on March 12, 2015 at 9: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.

  • joiakim
    Replied on March 13, 2015 at 5: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

  • raul
    Replied on March 13, 2015 at 9: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.

  • joiakim
    Replied on March 13, 2015 at 9: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. 

  • raul
    Replied 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" onDISABLEDload="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.

  • joiakim
    Replied 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.

     

  • joiakim
    Replied on March 13, 2015 at 11:59 AM

    Paging is not working when my form is embedded Image 1 Screenshot 20

  • Ben
    Replied on March 13, 2015 at 2: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.

  • joiakim
    Replied on March 13, 2015 at 3: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 

  • Ben
    Replied on March 13, 2015 at 5: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:

    Paging is not working when my form is embedded Image 1 Screenshot 20

    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.