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

    What is the process for changing form field width when the form width of a template is reduced?

    Asked by NetSpeedZ on July 31, 2013 at 12:24 AM

    When I change form width, the form fields do not automatically adjust down to the new size. Why?

    Already tried the CSS code to set form field width and it doesn't work. 

    This really should not be that difficult but it seems that the JotForm Builder does not allow the changing of form field width on a template (or any other form that the width is reduced). 

    form width template form field JotForm size
  • Profile Image
    JotForm Support

    Answered by Welvin on July 31, 2013 at 12:57 AM

    Hi,

    You can change the field width by;

    1. Click the Field

    2. Find and Click "Size" button from the toolbar

    3. Define your value in pixels

    I've check your Last Form ID: https://www.jotform.com/32109403566147. You are using Template which has a defined sizes injected to the form. You have to check the form injected custom CSS codes and change the value there. You can check injected custom CSS codes by following this guide: How to Inject Custom CSS Codes.

    Thanks

  • Profile Image

    Answered by NetSpeedZ on July 31, 2013 at 01:13 AM
    Already tried your suggestion. That doesn't work.
    ------------
  • Profile Image

    Answered by NetSpeedZ on July 31, 2013 at 01:20 AM
    Changed the CSS code in the injected CSS portion of the Form Style.
    Although the field width was reduced, the border on the right side of the
    form field looks as if it is 'cut off'.
    ------------
  • Profile Image
    JotForm Support

    Answered by Welvin on July 31, 2013 at 01:38 AM

    Hi,

    You can play around with the sizes. I mean, add the background size CSS. Below:

    .form-textbox {

    background-size: 304px 40px !important;

     

    }

    First value is the width, the second value is the height of the background image. Yes, there's an image for the textboxes.

    I've made the changes to your form, please kindly check.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on July 31, 2013 at 01:44 AM

    I forgot to add the Text Area CSS background size. Here's the codes:

    .form-textarea {

    background-size: 305px 114px !important;

    }

    You can play around the sizes if you'd like to adjust the width and height of the text areas.

    Thanks

  • Profile Image

    Answered by NetSpeedZ on July 31, 2013 at 01:57 AM
    Got it changed. Looks good. Appreciate the information and quick response.
    Would recommend in the future that you instruct those who are asking the
    same thing I have asked to ensure there is no CSS code negating any width
    changes to the form. I looked at several responses made to people having
    the same problem I had and saw no reference to check CSS code for
    overriding factors.
    ------------
  • Profile Image
    JotForm Support

    Answered by Welvin on July 31, 2013 at 03:09 AM

    You need the adjustments via CSS codes if it's a custom made form with images or custom styling on it. Let us know if you need any further assistance.

    Thanks