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

    I would like my form looking consistent on different devices.

    Asked by optizign13 on August 20, 2013 at 07:37 PM

    Hello,

    I have an issue with the form looking consistent on different devices. For example, on the website http://goodbye2pain.com/appointments/, the appointment form looks fine on my computer. Howeber, on my iPad, it looks different (the comments area is smaller). This always happens too. What can I do to keep it consistent on all devices? 

     

    Thanks

    Page URL:
    http://goodbye2pain.com/appointments/

    Screenshot
    ipad different Comments thanks
  • Profile Image

    Answered by khrisell on August 20, 2013 at 08:36 PM

    Hello,

     I would suggest to re-embed your form using iframe embed code. This should help fixed this issue.

    To get the iframe code, please follow these steps:

    1. Go to Setup & Embed

    2. Click Embed Form


    3. Select iFrame

    And get the code from here.

     

     

    Kindly let us know if problem persists so that we could further investigate.

    Thank you for using JotForm.

     

  • Profile Image

    Answered by optizign13 on August 21, 2013 at 12:23 PM

    Hi there,

    I changed it to the iframe script and the problem still remains.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by Welvin on August 21, 2013 at 05:08 PM

    Hi,

    Please try to inject this custom mobile CSS query to your form:

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

    .form-textbox, .form-textarea {

    width: 250px;

    }

    }

    Follow this guide on how to inject this codes: How to Inject Custom CSS Codes

    Thanks

  • Profile Image

    Answered by optizign13 on August 21, 2013 at 05:49 PM

    Hello,

    I have injected the CSS to my form and it still has the problem.

     

    Also, I have added the CSS code under Appearance/Editor. It looks the same.

    Then I added the CSS to the plugin "Header & Footer" and for it to be applied in the head section, and it still looks the same.

    Please help! 

    Thanks.

  • Profile Image
    JotForm Support

    Answered by Welvin on August 21, 2013 at 07:39 PM

    Hi,

    You have missed including the closing bracket tag "}" (there are two at the end). Anyway, I have changed the codes to this one:

    @media only screen 

    and (min-device-width : 320px) 

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

    .form-textbox, .form-textarea {

    width: 250px;

    }

    }

    @media only screen 

    and (min-device-width : 768px) 

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

    .form-textbox, .form-textarea {

    width: 250px;

    }

    }

    This should work for iPhone/iPads and Android Smartphones. Output as tested:

    Thanks

  • Profile Image

    Answered by optizign13 on August 22, 2013 at 07:29 PM

    Hi,

    It finally works! 

    So are you saying that everytime I make a form, I have to inject the CSS to it? I have a lot of forms to create for clients on a daily bases and this does not seem like the most efficient way to do so.

    How can I or you better mainstream the process? 

    Thanks!

     

  • Profile Image

    Answered by khrisell on August 22, 2013 at 09:57 PM

    Hello,

    Embedding with iFrame should make this easier but if just incase problem persists you really need to inject the CSS code to properly adopt with mobile devices. Because we only support  standard formatting to properly work with mobile.

     

    Please let us know if you have further questions or inquiry. 

     

    Thank you for using JotForm. :)