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

    Can't get the form responsive

    Asked by cyclingsneek on March 27, 2017 at 04:22 AM

    Hi there,

     

    I have added the form using the WordPress.org platform option. All works well on desktop, but I don't get the form to be responsive. I have tried both options you offer (ticked the selection box in the designer and integrated the widget in the bottom of the form), but still no change..

    Could you please have a look into this matter.

    Thx.

    Regards,

     

    Johan

    Page URL:
    http://wvsnits.nl/lid-worden-van-wv-snits-test/

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 27, 2017 at 04:40 AM

    Hi,

    Have you tried embedding your form using the Embed Form Plugin? Please see this guide on Embed JotForm in Wordpress using the Embed Form Plugin.

    Hope this helps.
    Regards.

  • Profile Image

    Answered by cyclingsneek on March 27, 2017 at 06:05 AM

    Hi,

     

    just tried it by using the embed plugin you suggested. However, without any succes..

     

    Suggestions?

  • Profile Image
    JotForm Support

    Answered by liyam on March 27, 2017 at 07:06 AM

    Hello Johan,

    I tried visiting your website in order to get to see how it looks like while the form is embedded on the page but I can't seem to get to access it. The error states that the site can't be reached.

    Anyhow, can you try using the iframe embed code to place on your web page instead? Here is a guide which you can follow if you need the steps how to get the code: https://www.jotform.com/help/148-Getting-the-form-iFrame-code

    If this does not work, please let us know. It would also be great if you can share with us more information on what device you are using.

    Thanks.

  • Profile Image

    Answered by cyclingsneek on March 27, 2017 at 07:59 AM

    Hi,

     

    Thx for your reply. I have tried your suggestion to use an iframe embed code. Unfortunately, without succes on my iPhone 7.

    However when I check the page (http://wvsnits.nl/lid-worden-van-wv-snits-test/) on http://deviceponsive.com/?url=http%3A%2F%2Fwvsnits.nl%2Flid-worden-van-wv-snits-test%2F

    everything is displayed accordingly. I have cleared cache. 

    When I visited the page using the iphone 7 in landscape it displays the proper way.

    Hope to hear from you.

  • Profile Image

    Answered by cyclingsneek on March 27, 2017 at 09:03 AM

    In adition to the above:

    On android devices the form is displayed correct.

    On the iPhone 7 and 5C the form is displayed incorrect in portrait view but displayed correct in landscape view.

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 27, 2017 at 11:46 AM

    I inserted a CSS code that should adjust your form on iPhone devices. This is the code that I pasted in your form:

    @media only screen 

    and (min-device-width : 375px) 

    and (max-device-width : 667px) {

    div#cid_3 {

        width: 290px;

    }

      div#cid_10 {

        width: 290px;

    }

      div#cid_16 {

        width: 290px;

    }

      div#cid_5 {

        width: 290px;

    }

      div#cid_12 {

        width: 290px;

    }

      div#cid_6 {

        width: 290px;

    }

      div#cid_7 {

        width: 290px;

    }

      div#cid_8 {

        width: 290px;

    }

      div#cid_9 {

        width: 290px;

    }

      div#cid_11 {

        width: 290px;

    }

      div#cid_13 {

        width: 290px;

    }

      div#cid_14 {

        width: 290px;

    }

      div#cid_15 {

        width: 290px;

    }

     div#text_17{

       width:290px;

      }

      div#cid_26 {

        width: 290px;

    }

      div#cid_20 {

        width: 290px;

    }

      div#cid_21 {

        width: 290px;

    }

      div#cid_22 {

        width: 290px;

    }

      div#cid_23 {

        width: 290px;

    }

      div#cid_27 {

        width: 290px;

    }

      div#text_28{

      width:290px;

      }

      div#text_17{

        width:290px;

      }

      li#id_26{

      width:290px;

      }

      li#id_14{

        width:290px;

      }

      li#id_19{

      width:290px;

      }

      li#id_24{

        width:290px;

      }

      li#id_25{

        width:290px;

      }

      

    }

    I tested and it looks fine, but please check and let us know if that works for you.

    Thank you!