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

    Problems with the form size and text boxes in different browsers and also on mobile

    Asked by GentlemensAgency on February 12, 2014 at 11:55 PM

    Hi I have a lot of issues with the Jotform forms, I just can't figure it out.

    The 1 line text fields with 50 wide are much wider or smaller then the 5 line fields, depending on the browser.

    Chrome is showing the 5 line field widder and Safari is showing the 1 line field wider.

    And on some phones for example a Iphone 4S the fields are instead on the richt of the text beneath the text, because of this the form doesn't fit on display of iphones and other phones with a resolution of 640 x 960 or less. is it possible to get this fixed?


     

    Page URL:
    http://www.gentlemens-agency.com/gigolo-boeken.html

    Screenshot
    different JotForm wide wider then
  • Profile Image
    JotForm Support

    Answered by Welvin on February 13, 2014 at 02:31 AM

    Hi,

    For the form field widths, inject this custom CSS codes to your form:

    input[type="text"] {

    width: 330px;

    min-witdh: 330px;

    max-width: 330px;

    }

    textarea {

    width: 450px;

    min-witdh: 450px;

    max-width: 450px;

    }

    This should be applied to your Form Text Box Fields and Text Area fields. If you want to adjust the same to the Dropdown fields, let me know.

    Inject the codes using this guide: How to Inject Custom CSS Codes

    The form field labels are automatically set to top when viewed using mobile devices. This is our current form behaviour so field boxes would fit to the mobile screens. You may consider increasing the form iFrame height.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on February 13, 2014 at 02:32 AM

    My apologies! I have updated the custom CSS codes. Kindly re-check the thread. Thanks

  • Profile Image

    Answered by datasphere on February 13, 2014 at 03:52 AM

     GentlemensAgency ,

    Hello, I just cant replicate and see your problem, I am using Opera Firefox and Chrome, can you please clarify because the form is rendering good in my browsers.

    btw. if I can add great idea for the website!

  • Profile Image

    Answered by GentlemensAgency on February 13, 2014 at 11:35 AM

    Hi Welvin,
    Thanx for your help, its better right now :-)

    Datasphere
    Great idea's are always welcome, I look forward to hear about your idea :-)

     

  • Profile Image

    Answered by GentlemensAgency on March 05, 2014 at 05:50 AM

    Form side by side

    Is it possible to label the form fields at the left? Because a lot of people are annoyed because of this when looking their page on mobile. A: it doesn't make sense, B: it is ugly. Increasing the form size is really not a solution. Then my website will have too much free space between the form and footer when viewing on desktop.
    Labeling text somewhere should be a choice, also on moblle.
    There is more then enough space for labeling the text at the left side. 

  • Profile Image

    Answered by pinoytech on March 05, 2014 at 07:18 AM

    Hi,

    Yes, that is possible using custom css. Try to inject this code in your form to fix the issue.

    /* Smartphones (portrait and landscape) ----------- */

    @media only screen

    and (min-device-width : 320px)

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

    .form-label-left {

    float: left !important;

    }

    .form-textbox {

    width: 250px !important;

    }

    .form-textarea {

    width: 320px !important;

    }

    #day_8, #month_8, #hour_8, #min_8.form-textbox {

    width: 20px !important;

    }

    #year_8.form-textbox {

    width: 40px !important;

    }

    }

    Here's the guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Feel free to contact us again if you need further assistance.

  • Profile Image

    Answered by GentlemensAgency on March 05, 2014 at 07:30 AM

    Thank you very much, it worked.
    You made my day!

  • Profile Image

    Answered by pinoytech on March 05, 2014 at 08:21 AM

    You are welcome. If you need our assistance again, please feel free to contact us at anytime.

    Have a nice day!

  • Profile Image

    Answered by andrewpmd on September 23, 2014 at 08:12 PM

    great also work for me