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 am using a form on a responsive magento site, and would like the form to be responsive as well.

    Asked by iphonesplus on April 30, 2013 at 04:15 PM

    http://iphonesplus.com/trade-sell is where the form is located, and it works fine on the desktop but makes the page stretch out even though its a mobile optimized page. happens in both iOS safari and chrome

     

    Screenshot
    site Mobile ios texbox width
  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2013 at 04:55 PM

    Hi,

    Although I was able to see the form just fine on an iPhone

     

    I suggest you still adjust the form's width to maximize the consistency of display on smaller mobile devices.

     

    Please try this changes. Inform is if this did not make any difference.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2013 at 04:59 PM

    In case my previous suggestions still do not work for you.

    Please try also the solution provided by our colleague EltonCris on this thread

    http://www.jotform.com/answers/194399-text-boxes-too-wide-on-mobile-view

    =======================

    To fixed the text box width on mobile devices, you can use the following CSS. Simply inject it to your form.

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

    .form-textbox{

    width:300px !important;

    min-width:300px !important;

    max-width:300px !important;

    }

    }

    Feel free to change 300px width to your preference.

    For the transparency on IE, simply insert the following property under .form-textbox, .form-textarea class on the existing CSS injected to your form.

    filter:alpha(opacity=50);

    If you require assistance with this, let us know so we can help you apply these to your form. Thanks!

    ----------------------------------------------------------------------------------

  • Profile Image

    Answered by iphonesplus on April 30, 2013 at 05:02 PM

    That emulator is quite outdated, thats not how the form looks like on an actual iphone.  I got it looking better, but now it seems to have made this blank white gap on the right of mobile devices screen.

     

    see this screenshot

    http://imgur.com/uRDyEzL

  • Profile Image

    Answered by iphonesplus on April 30, 2013 at 05:23 PM

    fixed

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 30, 2013 at 05:37 PM

    @iphonesplus 

    Glad to hear it. Thank you for letting us know. 

    If you have any other questions or concerns, feel free to message us here. Cheers!