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

    How can I decrease the size of a textarea?- reposition zipcode field

    Asked by djmgmt on February 26, 2015 at 01:59 PM

    I cant figure out why my text area for "zip code" is so big. I do not want it to be so wide! I messed around with the css coding but have had no luck. Help!

    Page URL:
    http://form.jotform.us/form/50555711713148

    zip code textarea size
  • Profile Image

    Answered by bkljaic on February 26, 2015 at 02:27 PM

    Hi,

    You need to apply custom CSS in order to change size of text area. Inside of your form go to Setup & Embed, then click on Preferences. Select Form Style tab and inside of Inject Custom CSS field at the end of existing code add this part of code:

    #input_22{

    width:150px;

    height:30px;

    }

    Changing the parameters width and height will give you the desired size of text area.

    Hope this will help. 

  • Profile Image

    Answered by djmgmt on February 26, 2015 at 03:00 PM

    it worked wonderfully thank you!

    But how do I get the field to sit next to "zip code" instead of below it?

  • Profile Image

    Answered by bkljaic on February 26, 2015 at 03:41 PM

    Hi, 

    If you want that text field is next to "zip code" instead of below it try adding this code:

    float: right;

    margin-right: 22px;

    margin-top: -45px;

    Your code need to be inside #input_22 element. That means that with this changes code will look like this:

    #input_22{

    width:150px;

    height:30px;

    float: right;

    margin-right: 22px;

    margin-top: -45px;

    }

    Hope this will help.

  • Profile Image

    Answered by djmgmt on February 26, 2015 at 04:17 PM

    That worked wonderfully as well, hopefully my last issue but if you enter information into the field, part of it disappears.  What am I doing wrong?

  • Profile Image

    Answered by bkljaic on February 26, 2015 at 04:17 PM

    I see that now you have problem with input value that you are adding inside of Zip code field.

    To fix that just add :

    padding-left: 10 px 

    inside of #input_22 element.

    Hope this will help.

     

  • Profile Image

    Answered by djmgmt on February 26, 2015 at 04:24 PM

    I added it inside of the #input_22 element and it didnt solve the problem.

  • Profile Image

    Answered by bkljaic on February 26, 2015 at 04:38 PM

    Instead of code i mentioned in last comment add:

    .form-textbox{

    padding-left:10px;

    }

  • Profile Image

    Answered by djmgmt on February 26, 2015 at 05:12 PM

    works perfect thank you!

  • Profile Image

    Answered by raul on February 26, 2015 at 06:25 PM

    I'm glad to know that the code provided by @bkljaic worked for you.

    Feel free to contact us again if further assistance is required.
    Thank you.