form will not appear if width is below 480px

  • Profile Image
    cami_019
    Asked on January 24, 2017 at 03:37 AM

    Help,

    my form disappears if screen width is below 480px. I'm using adobe muse and this happens.

    When checking directly in the jotform link it appears fine but when embedded it disappears.

    https://form.jotform.me/70225645601449

    http://www.nalusurfcamp.ph/book-now.php

  • Profile Image
    Chriistian
    Answered on January 24, 2017 at 04:51 AM

    Hi,

    Can you please try to re-embed your form using the iFrame method? Here's a link on Getting the form iFrame code.

    In order for your form to become mobile responsive, please add a Mobile Responsive Widget.

    Here's a guide on How to Add a Widget to your Form.

    Please also check this guide on How to make mobile friendly forms on JotForm

    Please let us know if you need further assistance.
    Regards

  • Profile Image
    cami_019
    Answered on January 24, 2017 at 05:57 AM

    I did just that but my problem is I have another form on the top bar of my site which passes the checkin and checkout dates to this booking form. Now the data won't pass because it's embedded in iframe. Any other workaround?

  • Profile Image
    Chriistian
    Answered on January 24, 2017 at 06:43 AM

    As per checking your site, I noticed that you are embedding multiple forms on your site using <script> code. The <script> code is advisable to use if you are only embedding one form on one specific page in your site.  Embedding multiple forms using <script> code might cause conflicts between your forms. If you need to embed multiple forms, you will need to use the iFrame embed code as suggested. If you need to pass a dynamic parameter to the iFrame form, you will need to programatically add this to the URL of the iFrame.

    Example:

    <iframe id="JotFormIFrame-70225645601449" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/70225645601449?parameter=parametervalue" frameborder="0" style="width: 100%; height: 1752px; border: none;" scrolling="no"> </iframe>

    Another workaround is to make use of one Booking Form only and make the booking form mobile responsive so the form size will automatically adjust depending on the size of the screen and you will only embed one booking form.