How to make forms to fit into mobile browsers

  • Profile Image
    britta.groenning@gmail.com
    Asked on March 20, 2013 at 07:22 AM

    When I preview my form in muse it looks fine but when i upload text fields are too wide on tablet and phone. Tried to make them smaller in jotform (size) but they stay the same on my site. Also, on tablet form is not centered even thougt it is in muse preview.

     

    On IE fields are not transparent (.6) even though i copied css from my site and other fields are transparent.

  • Profile Image
    aytekin
    Answered on March 20, 2013 at 09:44 AM

    Is this the page?

    http://www.gronninggrafisk.dk/kontakt.html

    Looked at it on iPhone similator and it looked fine to me.

    You just need to make the text fields little smaller. 

  • Profile Image
    britta.groenning@gmail.com
    Answered on March 20, 2013 at 10:16 AM

    I know, but nothing happens when I make them smaller. They shrink in Muse preview, but not online.

  • Profile Image
    aytekin
    Answered on March 20, 2013 at 11:00 AM

    Are you sure you are publishing the changed form? Try changing something else on the form. Do you see the change on the live site? 

  • Profile Image
    britta.groenning@gmail.com
    Answered on March 20, 2013 at 11:03 AM

    yes I do...

  • Profile Image
    Welvin
    Answered on March 20, 2013 at 12:29 PM

    Hi Britta,

    Please try to use iframe embed option: How to get your Form's Iframe Code. See if that makes difference. You can also inject Media CSS query to your form to change field sizes when viewed on mobile devices. Guide on how to inject: How to Inject Custom CSS Codes.

    With regards to IE transparency, I would suggest you to add this into your webpage: https://code.google.com/p/ie7-js/

     

    Thanks

  • Profile Image
    britta.groenning@gmail.com
    Answered on March 21, 2013 at 04:39 AM

    Hi Welvin

    Thanks for your help. I´m not a codefreak, so I do not know what i do :) and I can not get any of it to work. I use Iframe. I have expanded the textarea to the same size so it looks good on tablet. On phone all fields are now to wide, guess I have to live with that. Same matte with non transparent fields on ie, I put in the code but it made no difference. Guess I just do not use transparent next time :)

    Britta

  • Profile Image
    EltonCris
    Answered on March 21, 2013 at 07:25 AM

    Hi Britta,

    To fix the text box width on mobile devices, you can use the following CSS. Simply inject it to your form.

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

    .form-textbox{

    width:300px !important;

    min-width:300px !important;

    max-width:300px !important;

    }

    }

    Feel free to change 300px width to your preference.

    For the transparency on IE, simply insert the following property under .form-textbox, .form-textarea class on the existing CSS injected to your form.

    filter:alpha(opacity=50);

    If you require assistance with this, let us know so we can help you apply these to your form. Thanks!

  • Profile Image
    britta.groenning@gmail.com
    Answered on March 21, 2013 at 07:58 AM

    It works! Thanks a lot :)

  • Profile Image
    EltonCris
    Answered on March 21, 2013 at 09:29 AM

    Glad it helps. Cheers!