Having trouble with my forms being mobile responsive with the new Form Builder

  • socialcoachdesiree
    Asked on February 26, 2017 at 3:45 PM

    I am having trouble with my forms being mobile responsive with the new version. Can someone tell me where that setting is now? 

  • jonathan
    Replied on February 26, 2017 at 6:15 PM

    I was able to see the issue when I test viewing the form on your website when using mobile browser.

    Having trouble with my forms being mobile responsive with the new Form Builder Image 1 Screenshot 30

    But it was fine though when using the form own URL only.

    Having trouble with my forms being mobile responsive with the new Form Builder Image 2 Screenshot 41

     

     

    This is so because our form was already optimized for mobile browsers as well. There was no need to tweak any settings within the new Form Builder to make the form mobile responsive.

    What I suggest you try for now is to re-publish the form on your website using instead its iframe publish code. 

    User guide: https://www.jotform.com/help/148-Getting-the-form-iFrame-code

    Perhaps the issue was only due to the script embed code used by the form. See if using the iframe source makes any difference.

    Let us know if issue still remains after doing this.

    Thanks.

     

     

  • trapeezy
    Replied on February 26, 2017 at 7:41 PM

    Hey there, just thought I would add my two cents here:

    The header group that is holding the image as well as the text needs to be modified for mobile, that's it, you don't necessarily need to use an iframe method. Here is an option:

    You can center the image and then put the text on a new line with the below code that you would enter in the custom CSS area of the JotForm area, or your stylesheets depending on how you embedded the form into your website (I enjoy the source code that JotForm provides, I get more control...either way works though...)


    COPY/PASTE THIS CODE INTO YOUR FORM:

    <!--HEADER IMAGE FIX -->
    .form-header-group.hasImage>.header-logo {display:inline-block}
    .form-header-group.hasImage>.header-text {text-align:center;}
    .form-header-group {text-align:center !important;}

    Having trouble with my forms being mobile responsive with the new Form Builder Image 1 Screenshot 20

  • Chriistian Jotform Support
    Replied on February 26, 2017 at 11:01 PM

    Thanks @trapeezy for sharing your suggestions. Centering the the header group might also work to make your form be more mobile responsive.

    Moreover, forms created in JotForm Builder version 4 should be mobile responsive already. I can see that the form itself is already mobile responsive but there are still issues with it if it is embedded on the site. So, that's why we suggest to try re-embedding using iFrame.

    However, if the issue still occurs, please let us know.

    Regards