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

    My form is not responsive when embedded on my website

    Asked by specsaversilearn on February 27, 2017 at 11:21 AM

    Hi, 

    My form is mobile responsive in a direct link but when it is loaded onto another web page - it is no longer responsive. The 'mobile responsive' widget does not load either.  

     

     

    Page URL:
    https://www.specsavers-spectrum.com/optrafair

  • Profile Image
    JotForm Support

    Answered by Welvin on February 27, 2017 at 12:43 PM

    Your form fields are responsive upon checking the form using my android phone. It is also responsive upon viewing on IOS6 (browserstack's real device).

    The top header image has a slight issue, you can fix it by injecting the following custom CSS codes in the form:

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

    .form-all:before {

        background-size: contain !important;

    }

    }

    Follow our steps on this guide to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    Here's a screenshot from my phone:

  • Profile Image

    Answered by specsaversilearn on February 28, 2017 at 06:56 AM

    Hi, thanks for looking at it. If you scroll down you'll see that the table below isn't responsive. 

    I have tried removing the header image, injected the recommended CSS and resizing some of the tables etc. None of those had any effect on apple iPhone 6. The browser stack must not be showing a true representation of this.

    I have also tried the direct embed link for wordpress and the iframe embed code. Is anything else we can try.
  • Profile Image
    JotForm Support

    Answered by Welvin on February 28, 2017 at 08:09 AM

    Browserstack is using a physical device for their emulators so it is 100% accurate. Anyways, I see the issue now. I will try to fix this for you. I'll let you know. Please don't edit the form until I'll give you the update here.

  • Profile Image

    Answered by specsaversilearn on March 01, 2017 at 12:22 PM

    any luck Welvin? :) 

  • Profile Image
    JotForm Support

    Answered by Welvin on March 01, 2017 at 12:32 PM

    I'm so sorry. It's actually an easy fix. It's the URL at the bottom of the form that's causing the responsive problem in mobile devices. I've fixed it for you. You can see the following custom CSS codes in the CSS area of the form:

    div#text_31 {

        width: 100%;

        box-sizing: border-box;

        overflow-wrap: break-word;

      word-wrap: break-word;

      -ms-word-break: break-all;

      word-break: break-all;

      word-break: break-word;

      -ms-hyphens: auto;

      -moz-hyphens: auto;

      -webkit-hyphens: auto;

      hyphens: auto;

    }

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 02, 2017 at 05:32 AM

    Hello specsaversilearn,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!