Number Field buggy on embed

  • Profile Image
    WSIguy
    Asked on June 21, 2019 at 02:10 AM

    Hi,

    This form:
    https://form.jotform.me/90331659143455 

    is fine, but when embedded on our website:
    https://www.midtown-bbq.com/reservations 

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

    Screenshots attached.

    1561097406form-embed.jpg


    1561097434form-raw.jpg

    Best regards,

    Bruce

  • Profile Image
    Nik_C
    Answered on June 21, 2019 at 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" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.me/90331659143455" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> 

    Please let us know how it worked.

    Thank you!

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

    Thank you.

    1) For reasons I don't recall, I always prefer to NOT use the iFrame code.
    However..
    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.

    Regards,
    Bruce

  • Profile Image
    WSIguy
    Answered on June 21, 2019 at 05:05 AM

    Follow up...

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

  • Profile Image
    Ashwin
    Answered on June 21, 2019 at 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: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    Hope this helps.

    Do get back to us if the issue persists.

  • Profile Image
    WSIguy
    Answered on June 21, 2019 at 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.

    Cheers,

    Bruce