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

    Some fields in the form are not responsive on different devices

    Asked by craftlabph on September 23, 2016 at 10:29 AM

    Kindly help me on making my site responsive on different devices. The features that are not responsive so far were:

    • Form Headings

    • Form Separator

    • Form HTML with an IFrame embedded on it.

     

    Thanks

    Page URL:
    http://www.jotform.me/craftlabph/orderform

    heading form heading not responsive
  • Profile Image
    JotForm Support

    Answered by Welvin on September 23, 2016 at 12:30 PM

    I'm now checking this and I will let you know later the CSS to adjust the responsiveness of the mentioned elements. 

  • Profile Image
    JotForm Support

    Answered by Welvin on September 23, 2016 at 12:39 PM

    Here's a cloned version of your form with the changes on the responsive layouts:

    https://www.jotformpro.com/form/62665186954974

    Instead of the HTML field, I used our PDF Embedder widget (https://widgets.jotform.com/widget/pdf_embedder) to add the PDF file in the form then injected the following custom CSS codes to make the elements responsive on mobile devices:

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

    [data-type="control_widget"] iframe {

    width: 100% !important;

    }

    #cid_87 .form-header-group, 

    #cid_88 .form-header-group,

    #cid_17 .form-header-group,

    #cid_20 .form-header-group,

    #cid_52 .form-header-group {

        box-sizing: border-box !important;

        width: 100% !important;

        margin: 0 !important;

    }

    }

    Inject CSS guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    You can clone the form back for you to see the changes: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image

    Answered by craftlabph on September 24, 2016 at 04:09 AM

    It worked! Thank you so much for your help.