Number Field buggy on embed

  • WSIguy
    Answered on June 21, 2019 02:10 AM


    This form: 

    is fine, but when embedded on our website: 

    The number field "For how many?" is buggered up and can't be used.

    Screenshots attached.

    1561097406form embed Screenshot 0

    1561097434form raw Screenshot 1

    Best regards,


  • Nik_C
    Answered on June 21, 2019 04:53 AM

    I see the issue.

    Could you please try embedding your form by using this iFrame code:

     <iframe id="JotFormIFrame-90331659143455" title="Midtown Reservations" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> 

    Please let us know how it worked.

    Thank you!

  • WSIguy
    Answered on June 21, 2019 05:02 AM

    Thank you.

    1) For reasons I don't recall, I always prefer to NOT use the iFrame code.
    2) I tried your code and it resolves the problem.

    3) Why is YOUR iFrame code much shorter than the code that gets generated in the publish tab.
    Is this going to cause us other display issues?

    4) FYI, I want to clarify that this is not a new form. We had been using it for over 4 months with that field working fine.


  • WSIguy
    Answered on June 21, 2019 05:05 AM

    Follow up...

    I can report that the field is NOT operating properly on my mobile phone.
    Android, Huawei.

  • Ashwin JotForm Support
    Answered on June 21, 2019 06:24 AM

    The iFrame embed code shared by my colleague does not include the script part of the code. This script part of the code helps adjust the height of the iframe automatically. Which embed code you were using earlier?

    I did test your embedded form in mobile device and I see the issue with number field. The arrow key is left aligned and displayed side by side and number value is not being displayed. The issue is caused because of the following custom css code you have injected in your form:

    @media only screen and (max-device-width: 550px){

        .form-spinner {

            height : 50px !important;

            width : 100px !important;



    I have removed it from your form and your embedded form see to display the number field correctly but complete form is not being displayed. I would suggest you to please grab your form's full iFrame embed code including script code and embed it in your webpage. The following guide should help you how to grab your form's iFrame embed code: 

    Hope this helps.

    Do get back to us if the issue persists.

  • WSIguy
    Answered on June 21, 2019 07:24 AM

    Thanks Aswin D,

    It seems to be working with the full iFrame code.
    I will watch it and get back if there are issues.

    I am not impressed that I was given only partial code, but we're all human, I guess.