How do I modify html for mobile and website?

  • Profile Image
    wrapdxpressions
    Asked on December 14, 2015 at 05:57 PM

    My website is through Vistaprint. I'm having a problem with my mobile site showing your form. I have contacted Vistaprint regarding this issue and they have informed me that the issue is with the html code on the form. When you try to access the 'Ordering Inquiry Form' on a mobile device the form does not come up. The screen is just blank. There have been no problems with accessing the form on a computer. They stated that I needed to contact you all so that the html code can be modified for mobile and website.

  • Profile Image
    victor
    Answered on December 14, 2015 at 08:50 PM

    Hi,

    Could you please try enabling the RESPONSIVE FORM option in PREFERENCE.

    This should enable your form to be mobile responsive. Please let us know if this helps.

     

  • Profile Image
    Rolanda 
    Answered on December 15, 2015 at 10:09 AM

    Thank you for your response. I made the change in my preferences and inputted the new html code. Now when I attempt to access the page on my mobile it only shows the name of the form and the submit button. If I press the submit button it appears to be working. 

  • Profile Image
    ashwin_d
    Answered on December 15, 2015 at 11:25 AM

    Hello Rolanda,

    Please be noted that for the forms to be mobile responsive, we recommend to embed your form using its iFrame embed code. Please embed your form with its iFrame embed code and that should solve your problem. The following guide should help you grab your form's iFrame embed code:  http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Hope this helps.

    Do get back to us if the issue persists.

    Thank you!

  • Profile Image
    Rolanda  
    Answered on December 15, 2015 at 12:10 PM

    Progress for sure, but still a small issue. I embedded the iFrame and now the form shows up, but it cuts my form off and there's no scroll option.

  • Profile Image
    david
    Answered on December 15, 2015 at 12:50 PM

    You can try adding this CSS code to your form:

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

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

    .form-all {

    width:100% !important

    }

    }

    Or, in the top section of your iFrame embed code, you can change scrolling from "no" to "yes" to allow for scrolling. 

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

     

  • Profile Image
    wrapdxpressions
    Answered on December 15, 2015 at 01:30 PM

    That worked! Thank you so much.

  • Profile Image
    victor
    Answered on December 15, 2015 at 01:36 PM

    On behalf of everyone, you are very welcome. If you have any additional question or issue, please do not hesitate contacting us. We will be glad to help.