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

    Text field overflow on jotform (ios7/safari)

    Asked by barclay21 on December 20, 2013 at 12:14 PM

    Hi there 

    you kindly fixed the rest of my jotform but the final text/comments field is still overflowing the width of the page in Wordpress.

    Any CSS tweak I can add for that?

    Many thanks

    Screenshot
    JotForm text field Comments thanks
  • Profile Image
    JotForm Support

    Answered by EltonCris on December 20, 2013 at 02:11 PM

    @barclay21

    I can see the two email fields and textarea overflowing, the following CSS should fixed it.

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

    .form-textarea, input[type="email"]{

    width: 210px !important;

    }

    }

    If I've missed something, let us know here. Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 20, 2013 at 02:13 PM

    Sorry, here's the updated one including the textarea text label.

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

    .form-textarea, input[type="email"], #label_13{

    width: 210px !important;

    }

    }

  • Profile Image
    JotForm Support

    Answered by TitusN on December 20, 2013 at 03:12 PM

    Hello, 

    Here's an alternative for responsive width that you might want to try along with the other suggestions: 

    Replace all your custom CSS with this: 

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

    .recaptchatable,

    #recaptcha_area tr, #recaptcha_area td, #recaptcha_area th {

    width: 90%;

    }.form-all {

    max-width: 450px;

    width: 100%;

    }

    #id_13,

    #id_2,

    #id_10,

    #id_16,

    #id_17,

    #id_15,

    #id_23,

    #id_26,

    #id_25,

    #id_20,

    #id_24{

    width: 100%;

    }

    #input_24 {

    width: 90%;

    }

    #input_15 {

    width: 90%;

    }

    #input_13 {

    width: 90%;

    }

    .form-line-error input:not(#coupon-input), .form-line-error textarea, .form-validation-error {

    width: 90%;

    }

    .form-buttons-wrapper {

    float: none!important;

    margin-left: 50%!important;

     

    }

    The Captcha filed has elements nested inside with fixed widths and postitions, you may have to play around with it. 

    Does this help?

    Please let us know.