What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by socialcoachdesiree 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? 

    Page URL:
    http://socialcoachdesiree.com/train-with-desiree/ideal-client-workshop<br/>/

  • Profile Image
    JotForm Support

    Answered by jonathan 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

    Answered by trapeezy 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
    JotForm Support

    Answered by Chriistian 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