Does jotform allow for us to add in our own media queries?

  • Profile Image
    Kayla_Hughes
    Asked on August 16, 2017 at 03:53 PM

    Hello, I have recently been creating some forms for my pages and have included the mobile optimization widget that is supposed to make my form look good when viewed on different devices. Unfortunately though, it doesn't seem to do exactly what I want. Some of the fields are cut off, and positioning isn't all that correct. In order to combat this issue, I went into the Advanced Design Builder and tried to embed some media queries to help customize my content. I am finding that Jotform does not accept my media queries and I cannot customize my content. 

     

    Does jotform allow for us to add in our own media queries? Is there a special syntax required? 

     

    If this is not at all possible, are we able to manipulate the iFrame when viewed on different devices? 

     

    Thank you for your help!

     

    I have attached an image of my form in mobile view and have given the URL so the desktop view can be examined as well. 

  • Profile Image
    Welvin
    Answered on August 16, 2017 at 06:04 PM

    You do not need the mobile responsive widget as new forms are now responsive by default. The CSS tab allows you to add media queries. In fact, we used it often for custom form alignments. The problem I see here is the IDs that you are using. I cannot seem to find a field with ID label_input_121_0. You should make sure to use the correct ID. There are other IDs in the CSS are that I couldn't find.

    As for its width, you need to make it 100%. There seems to be a width that controls it. I have fixed it by injecting the following custom CSS codes:

    .form-all {

    width: 100% !important;

    }

     

    As for its height, please try re-embedding the form using our default embed method: https://www.jotform.com/help/34-Adding-a-Form-to-a-Web-Page. If the problem persists, use the iframe method again:

    https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Just get the iframe codes again to refresh its elements, especially the height value. See if that works.