Form style issues on mobile

  • Profile Image
    Virginie
    Asked on May 29, 2015 at 09:45 PM

    Hi there

    My email subscription form doesn't work on mobile. It works on tablet and desktop but I can't submit the form on mobile.

  • Profile Image
    Syed
    Answered on May 29, 2015 at 11:38 PM

    Hi there;

             I apologizes for this issue you're having, could you please use iFrame method to embed your form to your website. Review the following screenshots. Let us know further, if you still having issues on this, we would be happy to assist you further.

    Thankyou,

  • Profile Image
    Virgotte
    Answered on May 30, 2015 at 12:42 AM

    Hi

    I've tried that. It is working, but it's displaying badly on desktop. 

    How do I solve that?

  • Profile Image
    Syed
    Answered on May 30, 2015 at 12:47 AM

    Hi there;

               Try to increase the width and height of an iFrame, use the following code;

    <iframe src="https://secure.jotform.co/form/51468102236853" width="320" height="240" frameborder="0" style="width: 100%;height: 1500px;"></iframe>

    Let us know, how it goes.

     

    Thankyou,

  • Profile Image
    Virgotte
    Answered on May 30, 2015 at 12:55 AM

    Working well now!

     

    Thanks!!

  • Profile Image
    Syed
    Answered on May 30, 2015 at 12:56 AM

    Will let us know if you need further assistance in any way.

     

    Thankyou,

  • Profile Image
    Virgotte
    Answered on May 30, 2015 at 01:24 AM

    Actually.... It display very badly now on android phone....

  • Profile Image
    Syed
    Answered on May 30, 2015 at 04:43 AM

    Hi there;

           Could you please tell us which Android mobile you're using, and could you post a screenshot here, so that we can review the form at our end. Let us know so that we can help you further.

     

    Thankyou,

  • Profile Image
    Virgotte
    Answered on May 31, 2015 at 12:44 AM

    Hi

     

    I use a samsung s5 and the internet icon on it. As well, some of the widgets don't show...

     

    Thanks for your help!

     

  • Profile Image
    Virgotte
    Answered on May 31, 2015 at 12:50 AM

    Same from Chrome on S5

     

  • Profile Image
    Syed
    Answered on May 31, 2015 at 11:18 AM

    Hi there;

              Thankyou for the screenshots, could you make the following change to resolve this conflict.

    To remove Mobile Responsiveness conflict, please select "No" and hit "Close Setting" from "Preferences". As we're using Mobile Responsive Widget already.

    Let us know if it helps. We would be happy to assist you further.

     

    Thankyou,

  • Profile Image
    Virgotte
    Answered on June 06, 2015 at 02:10 AM

    Hi

    I've done that but I still have display issues....

  • Profile Image
    Chriistian
    Answered on June 06, 2015 at 03:53 AM

    Hi Virgotte, 

    I checked your form - 51468102236853 and the Responsive Form settings is still set to No. To change this, just follow instructions below.

    If it still doesn't work, can you try embedding your form using the iFrame code below?

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotform.co/form/51468102236853" frameborder="0" style="width:100%; height:1209px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

    Do let us know if this works.

     

    Regards.

     

     

  • Profile Image
    Virgotte
    Answered on June 06, 2015 at 06:11 AM

    I've tried all combinaisons of settings with and without mobile responsive widget and with and without responsive form settings. None of them give me anything better than what I have now.

    I'm already using the iframe code. Is this one any different?

     

  • Profile Image
    EltonCris
    Answered on June 06, 2015 at 07:35 AM

    @Virgotte

    Not sure if you are still facing the submit problem. Are you still experiencing it or are you referring to the styling problem with overlapping fields on mobile? If this is about the overlapping issue, inject the following CSS codes to your form. This should fix it.

    @media only screen and (max-width: 40em){

    .form-line, .form-line.form-line-column {

      padding: 12px 24px !important;

      }

     .form-textbox, .form-textarea, .form-radio-other-input, .form-upload, .form-captcha input {

      margin: 5px 0 !important;

      }

    }

    Paste it below the existing CSS codes, if there are any.

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

    It should look like this on mobile afterwards.

    Let us know if you need further assistance. Thanks!

  • Profile Image
    Virgotte
    Answered on June 06, 2015 at 07:38 PM

    Still not working.....

  • Profile Image
    jonathan
    Answered on June 06, 2015 at 11:33 PM

    I also could not reproduce the issue reported.

     

    success full submission shows the Thank You page

     

    Can you please try also using other browser or device. Perhaps the problem is on the current browser or device being used.

    Let us know if issue persist.

    Thanks.

     

  • Profile Image
    Virgotte
    Answered on June 06, 2015 at 11:45 PM

    Indeed! It is now working! Great!!!! :-)

  • Profile Image
    jonathan
    Answered on June 07, 2015 at 12:49 AM

    Glad to know it works now. =)

    Contact us again anytime should you need further assistance.

    Cheers!