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

    Field Positioning

    Asked by ultraslimplus on September 23, 2012 at 10:41 AM

    Hello,

      I am havin a bit of troubles now. Got pretty far but havin trouble fitting the Province and Country in. The form is getting quite small so displaying them underneith it may not be an option. I could try it though but dont know how to get the 2 fields to drop down.

    I was able to size most fields to fit but the email field eludes me.

    I also have a mysterious bit of code appearing at the top that I am yet to track down. Here is a screenshot:

    Spence

  • Profile Image

    Answered by moonzkie on September 23, 2012 at 11:13 AM

    Hi,

    You are going to have to Inject Custom CSS to gain control over the size of these fields. 

    While in the form editor, Click Preferences -> Form Styles, then in the Inject Custom CSS

     

    #input_4_addr_line1 {width: 50px !important; }

    #input_4_addr_line2 {width: 50px !important; }

    #input_4_city {width: 50px !important; }

    #input_4_state {width: 50px !important; }

    #input_4_postal {width: 50px !important; }

    #input_4_country {width: 50px !important; } 

    Experiment with different values for width, e.g change one to 75px, until you are with how the fields look. The labels should be self explanatory.

    Please let us know if you are unsure about anything. Thanks.

  • Profile Image

    Answered by pinoytech on September 23, 2012 at 12:12 PM

    @ultraslimplus

    I have clone your form and make some workaround on it. Can you please take a look at this cloned form.

    http://www.jotform.me/form/22664298467467

    This is the codes that I have injected in to this form:

    #input_4_addr_line1 {

    width: 225px !important;

    }

    #input_4_addr_line2 {

    width: 225px !important;

    }

    #input_4_city {

    width: 100px !important;

    }

    #input_4_state, #sublabel_state.form-sub-label {

    margin-left: -40px;

    width: 100px !important;

    }

    #input_4_postal {width: 50px !important;

    }

    #input_4_country, #sublabel_country.form-sub-label {

    margin-left: -40px;

    width: 100px !important;

    }

    If you need further assistance, feel free to contact us at anytime.

    Thank you!

  • Profile Image

    Answered by guest_22665002929050 on September 23, 2012 at 07:38 PM

    This was awesome information. I applied all that you said and the only problem now is the email field. I think that there is some previous CSS somewheres possibly causing grief.

    Spence

  • Profile Image
    JotForm Support

    Answered by jonathan on September 23, 2012 at 08:14 PM

    @Spence

    Hi, in case you are still having issue, the email address field ID # is #input_3 

    You can resize it by using the CSS code

    #input_3 {

    width: 225px !important;

    }

    Change the ID field to that of  #input_3