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

    Make form responsive on mobile site

    Asked by backdoorcellars on April 24, 2014 at 05:37 PM

    I recently created a club sign up form embedded in my web site. When creating an optimized mobile version of the site, the form is pretty much unusable due to size & format of mobile layout. Any suggestions on how I can work around this?

    Page URL:
    http://backdoorcellars.wix.com/beta#!wine-club/c1k5s

    Screenshot
    Mobile site mobile site sign up form size layout
  • Profile Image
    JotForm Support

    Answered by jonathan on April 24, 2014 at 07:56 PM

    Hi,

    I checked your form on your Wix website http://backdoorcellars.wix.com/beta#!wine-club/c1k5s  and I immediately noticed that the form is cut-off and there is no means to complete submission of the form

     

    I suggest that you re-embed the form following this guide

    https://www.jotform.com/help/70-Adding-a-form-to-Wix-Site

    to be sure the form is properly display and accessible on your website.

    Check the form after re-embedding to see if it is now fully viewable for access.

    --

    I also noted that you have old Conditions setup on the form, but the fields used by the condition were already deleted.

    I suggest you clean by deleting the conditions if they are not needed anymore

    ---

    To have a responsive layout form even on mobile browser, please start by injecting this CSS codes in your form

    http://pastie.org/9109440

    Use this guide 

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

    I tested all of this on a test form here http://form.jotform.me/form/41137507849460? You can test this form in your mobile browser to see how it respond.

    Please inform us if you need further assistance.

    Thanks!

  • Profile Image

    Answered by backdoorcellars on May 07, 2014 at 10:09 AM

    Thank you so much for the comprehensive reply. We will execute these suggestions and look forward to a resolution.

    Have a great day!!

  • Profile Image

    Answered by Carina on May 07, 2014 at 11:52 AM

    You are most welcome. Please get back to us if further support is needed.

    Thank you and a great day for you to!

  • Profile Image

    Answered by backdoorcellars on May 12, 2014 at 11:04 PM

    Sooo I clicked the link for the CSS Code to inject into form. It is 60 some lines of code. Am I supposed to copy & paste all of it?

  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 13, 2014 at 02:35 AM

    Hello backdoorcellars,

    Yes that is correct. You need to copy all the custom css code shared by my colleague and inject into your form.

    Do try it and get back to us if you have any trouble.

    Thank you!

  • Profile Image

    Answered by backdoorcellars on May 14, 2014 at 11:21 AM

    I went ahead and copied/pasted the 61 lines of code as instructed.

    The result is not pretty on the mobile version of site. Take a look at the preview embedded as a screen grab.

    Any thoughts?

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 14, 2014 at 01:53 PM

    @backdoorcellars 

    Can you please try it again?

    There was a missing end tag with my colleague's CSS code and I've just corrected it on your form. Can you check it if does help at all?

    I'm not really sure but your form was embedded as iframe so it is normal that when you re-size the browser window, the form will not render its CSS codes for mobile. Have you tried viewing your form in an actual iOS device?

    I tried viewing your form on iPhone iOS Simulator and it's displaying correctly.

    Let us know if there's anything else you need assistance with.

    Thank you!

  • Profile Image

    Answered by backdoorcellars on May 16, 2014 at 01:55 PM

    Thank you for your diligence in addressing my concern.

    The end result is slightly less then ideal aesthetically BUT the form functions properly and that is the primary objective.

    Thank you again and have a great weekend!

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 16, 2014 at 04:18 PM

    @backdoorcellars

    On behalf of my colleagues, you're welcome.

    Feel free to contact us again should you have more questions.

    Regards!