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 do I adjust width of the entire field?

    Asked by nathanhogan on November 17, 2013 at 10:52 AM

    I am trying to reduce the width of my form: <script type="text/javascript" src="//form.jotform.co/jsform/33195438687872"></script>

     

    One of the issues is that some of the fields (Email (no 3), Phone Number (no9) and Full Name (no 1) are all too 'wide'.  I am not sure of the name of the property that is causing this, but the size of the field to capture the information is fine and the size of the label is fine.  

    When hovering over the field the background turns a plae yellow and when clicking on the field it turns grey background and two icons to the top right.

     

    It is this area / border that I want to reduce the width of.  Note, not all fields just these 3.

    If i reduce the width of the overall form then it moves teh fields in a way that I dont want, ie it moves some fields around and makes the length of the form then longer, which I don't want.

    I have looked through perhaps 20 or more similar posts but with nothing specific on this subject.

     

    Any help would be much appreciated.

     

    I don't have this feature loaded to my website yet, but hopefully the script ID above will help?

    Screenshot
    JotForm email style size name
  • Profile Image

    Answered by Cesar on November 17, 2013 at 03:18 PM

    One of the issues is that some of the fields (Email (no 3), Phone Number (no9) and Full Name (no 1) are all too 'wide'. 

    These fields can be reduced using Injected CSS Code.

    When hovering over the field the background turns a plae yellow and when clicking on the field it turns grey background and two icons to the top right.

    This is how the form editor functions. The 2 icons are used to customize the selected field even further. The Gear Icon opens a context menu where you are able to change properties of the field. And the Red Icon allows you to remove/delete the field from the form.

    It is this area / border that I want to reduce the width of.  Note, not all fields just these 3.

    I am appending a modified clone version of your form. Kindly evaluate the changes and let us know if you need further assistance. You can go ahead and clone the form as well, if needed. Thank you.

     

    This is my example form:

    http://form.jotformpro.com/form/33206100580944?

     

    Related Articles:

    How-to-clone-an-embedded-form-from-a-webpage

    How-to-Inject-Custom-CSS-Codes

    Customize-your-Form-using-Custom-CSS-Codes

  • Profile Image

    Answered by nathanhogan on November 17, 2013 at 05:45 PM

    Hi Cesar,

     

    Thank you for a prompt response.

     

    I think what you have done is to move the field labelled "Service - Other" to below the first field, "Which Service Are you enquiring about"??

     

    I wanted those two fields to stay as they were, ie side by side.

     

    The fields I want to reduce the width of are  (Email (no 3), Phone Number (no9) and Full Name (no 1).

    By having that excess space to the right of each of them, I can't reduce the width of the form.

    I would like the form to go no further than the edge of the field labelled, "Please Provide further information".  For future use, I would like to achieve this using CSS to ensure I can then tweak as required as I am developing my webpage. 

    For background info, i am creating a feedback page and will have this form on the left and a map widget for peopel to find our location, hence I want to ensure it is narrower than it currently is.  Similarly, I want to keep it short too so that the Submit button or the lower fields all appear on the screen without having to scroll down, hence not wanting to take the field  "Service - Other"and move it below "Which Service Are you enquiring about".

     

    What CSS functions can I use to reduce the width of those three fields?  Ie to remove the excess space to the right of them?  If you look at my screenshot, it is the area in the red circle.

     

    nathan

  • Profile Image

    Answered by nathanhogan on November 17, 2013 at 05:51 PM

    Also, i mean to say tha tif the width of thefirm is 458 or less, then the field Service - Other" "ill move below "Which Service Are you enquiring about", but if 459 or above it will be fine to stay side by side.

  • Profile Image
    JotForm Support

    Answered by EltonCris on November 17, 2013 at 10:58 PM

    Hi Nathan,

    I checked the injected CSS codes to your form and found few invalid CSS codes. I would suggest to review it again or clear the entire CSS codes and re-add the correct ones. 

    Note that when you shrink the fields, the entire width of the field will be shrunken. Just right click it again and click "Expand" if you'd like to expand its width to fit on the form width.

    After that, set its label to "top" so the field labels width will expand as well.

    Let us know if you require further assistance or if I've missed something on your question. Thanks!

  • Profile Image

    Answered by nathanhogan on November 18, 2013 at 05:31 AM

    Thanks Elton

     

    Thanks for pointing out the the invalid syntax.  Most of it was an attempt to adjsut the width of the fields, but without luck in most cases.

     

    Using the "Expand" function does not allow for control over the width, it seems to just maximise the width to the width of the form?  i want to be able to manually control the width of a number of the fields.  Not the labels or the box ewhere users will enter text, but the surrounding section highlighted in my screenshot, ie the area that is coloured grey when you click on a given field.  I am trying to remove the 'dead space' that I have circled in red.  if i use the "Shrink" function, it doesn't have teh desired effect either, it crushes the label and the text entry fields and ends up placing these over two rows, rather than one.

     

    I think where i need help, ist to undertand the function or the CSS to manually control the width of the entire field.  

     

    Can you help with that please?  

     

    nathan

     

    Also, with regard to Syntax:

    1. What is a Selector?

    2. What is the class to select a control for all of the form?  You will see i tried using".formall_enquiry form" where enquiry form is the title of the form

     

  • Profile Image
    JotForm Support

    Answered by guilledutra on November 18, 2013 at 09:42 AM

    Hi,

    Please check this example I made:

    at this example I have controlled trough the injection of css code the   width of the "Full Name" field

    1. Find out the css selector, in this case the ID by using the Inspect Element browser tool, example: using google Chrome

    right click on the form field and click on "Inspect Element" option 

    In this case the ID selector is "id_1"

    2.Once you have the css selector corresponding to the form field, you should inject custom css to your form in order to customize the form field style.

    In this case I injected this css code in order to control the width of the full name field:

    #id_1 { width: 330px !important; }

     

    Check this example and feel free to clone it in order to make further investigations, I cleaned up some already added css code too.dddd

    Hope it helps

    please let us know if you need further assistance

    Thanks

  • Profile Image

    Answered by nathan on November 18, 2013 at 11:23 AM

    Hi Guilledutra,

     

    Thanks you for this.  This is exactly what I needed.

    New Issue:

    Having posted the new code to my site, and testing it in different browsers, I can see that it works in Google Chrome but it does not work on IE v 10. 

    http://www.joannetierneyphotography.co.uk/Contact_Page/Web_Pages/Contact_Pages.htm

    Is there a known problem with jotform forms in IE, or am I doing something wrong?

     

    nathan

  • Profile Image

    Answered by EliezerN on November 18, 2013 at 01:05 PM

    @nathan

    It's greate to know that guilledutra's solution works well. Now, since the last issue is a different one from the original of this thread, we would appreciate if you open a new thread to post your new concern there. That will allow us to avoid any confusion.

    Thanks

  • Profile Image

    Answered by nathan on November 18, 2013 at 02:49 PM

    OK, new post coming up