Display Problem on embedded form: forms acts responsive on desktop view, and submit button gets cut off in mobile view.

  • ImmobiliareUSA
    Asked on May 31, 2017 at 12:48 PM

    3) Form "EastCoast Contatti: Blog" > it should look like this but right now on the desktop version the form is too long and all the fields are too long as well (see the following image):

     

    Display Problem on embedded form: forms acts responsive on desktop view, and submit button gets cut off in mobile view Screenshot 30

    while on the mobile version the form looks too long like on the desktop version, plus the call-to-action green button is partially cut-off (see the following image):

     

    Display Problem on embedded form: forms acts responsive on desktop view, and submit button gets cut off in mobile view Screenshot 41

     

  • David JotForm Support Manager
    Replied on May 31, 2017 at 2:29 PM

    The field are long, or expand across the whole form, because our forms are responsive:

    Display Problem on embedded form: forms acts responsive on desktop view, and submit button gets cut off in mobile view Screenshot 30

    So, if you want it to look like on full desktop screen, you need to increase the width of the form's Iframe code: 

    Display Problem on embedded form: forms acts responsive on desktop view, and submit button gets cut off in mobile view Screenshot 41

    Let us know if you need more help, we will be glad to assist you.

  • ImmobiliareUSA
    Replied on May 31, 2017 at 6:31 PM

    I'd like to reduce the width and the lenght of the form, in order to get a smaller and shorter form. I'd also like to make the call-to-action green "INVIA" button (at the bottom of the form) visible on the mobile version, which now is cut off (see the image):

    Display Problem on embedded form: forms acts responsive on desktop view, and submit button gets cut off in mobile view Screenshot 20

    Unfortunately I'm not familiar with HTTP and codes so just asking if you could give me a little help resizing the forms in the correct way.

    Thank you so much in advance :)))
    Davide

  • David JotForm Support Manager
    Replied on May 31, 2017 at 7:26 PM

    Please remove your embedded code from the page of your site: http://www.immobiliareusa.it/b.asp?url=Perche-Investire-a-Miami-nel-2017-Conviene

    Then, embed the form again using the following code:

     <iframe id="JotFormIFrame-12453417346" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/12453417346" frameborder="0" style="width:100%; height:562px; border:none;" scrolling="no"> </iframe> 

    Also, if you would like to set a transparent background in your form to make it look like this:

    Display Problem on embedded form: forms acts responsive on desktop view, and submit button gets cut off in mobile view Screenshot 20

    You can inject this CSS code in your form as shown on this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    .supernova,form-all{

        background: transparent !important;

    }

    On regards of the button cutting off on mobile view, that issue should be fixed with the new code I have provided. If not, let us know, so we can check further.

  • ImmobiliareUSA
    Replied on June 1, 2017 at 2:37 PM

    Unfortunately I still have issues with this form, which is embedded here: http://www.immobiliareusa.it/b.asp?url=Perche-Investire-a-Miami-nel-2017-Conviene

    This form is currently too large and would need to make it less expanded. And there is also a grey band at the bottom (see black arrow) which I would delete.

    Display Problem on embedded form: forms acts responsive on desktop view, and submit button gets cut off in mobile view Screenshot 20

    As specified, I'm not familiar with HTTP and codes so just asking if you could give me a little help resizing the form in the correct way and deleting the grey band.

    Thank you very much :)))))

     Davide

  • David JotForm Support
    Replied on June 1, 2017 at 5:18 PM

    The issue is with your forms embed code, not with the form itself.  The fixes my colleague mentioned should work. 

    Please remove your embedded code from the page of your site: http://www.immobiliareusa.it/b.asp?url=Perche-Investire-a-Miami-nel-2017-Conviene

    Then, embed the form again using the following code:

     <iframe id="JotFormIFrame-12453417346" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/12453417346" frameborder="0" style="width:100%; height:562px; border:none;" scrolling="no"> </iframe> 

    Also, if you would like to set a transparent background in your form to make it look like this:

    Display Problem on embedded form: forms acts responsive on desktop view, and submit button gets cut off in mobile view Screenshot 30

    You can inject this CSS code in your form as shown on this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    .supernova,form-all{

        background: transparent !important;

    }

    On regards of the button cutting off on mobile view, that issue should be fixed with the new code I have provided. If not, let us know, so we can check further.

    You can also try simply adjusting the dimensions of the form in your current embed code:

    Display Problem on embedded form: forms acts responsive on desktop view, and submit button gets cut off in mobile view Screenshot 41