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

  • Profile Image
    socialcoachdesiree
    Asked on February 26, 2017 at 03: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? 

  • Profile Image
    jonathan
    Answered on February 26, 2017 at 06:15 PM

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

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

     

     

    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.

     

     

  • Profile Image
    trapeezy
    Answered on February 26, 2017 at 07: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;}

  • Profile Image
    Chriistian
    Answered 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