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 to make the text box wider in the table?

    Asked by MEM2017 on March 28, 2017 at 01:58 PM

    Hello,

    On our table in the registration form the text box is too narrow - how do I make them wider so it will show the person's first and last name?

     

    Thank you,

    Lori

  • Profile Image
    JotForm Support

    Answered by John_Benson on March 28, 2017 at 04:58 PM

    Hello Lori,

    Please give me more time to create you a custom CSS code to adjust the width of the text box of full name inside the table. I will message you again once I have done creating the custom CSS code.

    Thank you for you understanding.

  • Profile Image
    JotForm Support

    Answered by John_Benson on March 28, 2017 at 05:55 PM

    Thank you for your patience.

    I cloned your form and I was able to increase the width of the name field by adding a custom CSS code. Here's the custom CSS code:

    input#input_50_0_0 {

        width: 200px !important;}

    input#input_50_1_0 {

        width: 200px !important;}

    input#input_50_2_0 {

        width: 200px !important;}

    input#input_50_3_0 {

        width: 200px !important;}

    input#input_50_4_0 {

        width: 200px !important;}

    input#input_50_5_0 {

        width: 200px !important;}

    input#input_50_6_0 {

        width: 200px !important;}

    input#input_51_0_0 {

        width: 200px !important;}

    input#input_51_1_0 {

        width: 200px !important;}

    input#input_51_2_0 {

        width: 200px !important;}

    input#input_51_3_0 {

        width: 200px !important;}

    input#input_51_4_0 {

        width: 200px !important;}

    input#input_51_5_0 {

        width: 200px !important;}

    input#input_53_0_0 {

        width: 200px !important;}

    input#input_53_1_0 {

        width: 200px !important;}

    input#input_53_2_0 {

        width: 200px !important;}

    input#input_53_3_0 {

        width: 200px !important;}

    input#input_53_4_0 {

        width: 200px !important;}

    input#input_53_5_0 {

        width: 200px !important;}

    input#input_53_6_0 {

        width: 200px !important;}

    input#input_53_7_0 {

        width: 200px !important;}

    Follow this guide on: How-to-Inject-Custom-CSS-Codes

    Here's the clone form: https://form.jotformpro.com/70867083440963. If you want to clone it to see the custom CSS code inside, follow this guide: How-to-Clone-an-Existing-Form-from-a-URL

    Result:

    Image #1:

    Image #2:

    Hope that helps. Contact us again if you have questions. Thank you.

     

  • Profile Image

    Answered by MIFF17 on May 24, 2017 at 10:27 PM

    Hi, this is exactly what I need to do too! Do I just use the same code or do I need a different one? Sorry, I don't have any experience with CSS

  • Profile Image
    JotForm Support

    Answered by amy on May 25, 2017 at 01:33 AM

    Hi Lori,

    Yes, you need only paste the CSS codes which have been given by my colleague. Also, please follow this user guide in order to learn how to inject custom CSS codes

    Please give it a try and if you encounter any problem let us know.

    Thank you so much.

    Regards.

  • Profile Image

    Answered by MIFF17 on May 25, 2017 at 02:23 AM

    I'm not the OP, sorry didn't make that very clear!

    Will those codes still apply for me as well or are they specialised for that original table?

    If they are, do I put the whole thing into one line? Or just copy paste the whole thing? 

  • Profile Image
    JotForm Support

    Answered by amy on May 25, 2017 at 03:24 AM

    Hi again Lori,

    You can apply these codes to your tables too. If you give it a try, you can see the difference on text fields of your form. However, these CSS codes do not change all your forms. As you can see every field has its own name. Such as input_50_0_0, input_50_1_0.

    We apologise if we are not clear enough. You only need to paste the whole CSS codes which my colleague has shared with you to your form that you have specified.

    Please follow these steps:

    1- Edit your form and then click on the "Form Designer" button.

    2- Then please click on the CSS tab and paste all the CSS codes which my colleague has shared. Please check the screenshot. You can enlarge screenshots by clicking once on it.