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

    Entire Form Width vs. Field Width

    Asked by tdiintl on February 07, 2014 at 12:16 PM

    Hi,

    I'm wanting my whole form to adjust width depending on the size of monitor or browser window a customer has open.  So for instance on my regualar web pages I set the width at 100% so that the table/layout will fill 100% of the screen size no matter what size the screen.

    With jotforms, I tried this and only the form itself expands to 100%, the individual fields do not.  I have tried taking the width value out of the individual fields (they get tiny).  I tried putting 100% as the field width (tiny again).

    Is there any way to do this?  I'd like the entire form and the fields within it to be the same width.  Secondarily I would like them to expand and shrink based on the size of the viewing window (responsive design).  If they cannot shrink and expand, I'll settle for them all being the same width so the form looks more professional.

    I have included a screenshot so that you may see what I'm talking about.

    Thanks! Jackie

    Page URL:
    http://www.tdiinternational.com/contents/en-us/d599_120d-desiccator.ht<br/>ml

    Screenshot
    form width size layout shrink table
  • Profile Image
    JotForm Support

    Answered by TitusN on February 07, 2014 at 01:39 PM

    Hello Jackie,

    Thank you for contacting us.

    You would have to apply individual rules for each of the fields in order for them to respond that way:

    I'll style the first field for you just to demostrate. You can add the rules by Injecting them into your form.

     

    /*This make your whole form responsive to the browser width*/

     .form-all {
    width: 100%;
    }

    /*this is the div id that wraps the first text input field (qiantity)*/

    #cid_3 {

    width: 100%;

    }

    /*This is the text input part of the field- 99% makes it a little smaller than its container (#cid_3)*/

    #input_3 {
    width: 99%;
    }

    You need to do this with all of the rest of the fields.

    To get the correstponding field div ID's and apply the same width rules, please use this linked guide.   

    If you hit any bumps, or need assistance,  please let us know.     

  • Profile Image

    Answered by tdiintl on February 07, 2014 at 01:47 PM

    Hi,

    My gosh that's going to take forever! :) Thank you though, this will fix my problem.  I appreciate the quick response!

    Jackie

  • Profile Image
    JotForm Support

    Answered by TitusN on February 07, 2014 at 01:50 PM

    Sorry Jackie, 

    I know, its a bit of a process - but let us know how we can assist to make this easier  - 

  • Profile Image

    Answered by tdiintl on February 07, 2014 at 03:09 PM

    It happens! If there was a way to specify all fields like a * as a wildcard:

    * {
    width: 99%;
    }

    That would be cool.  We just have a ton of forms.  Either way, for the price we pay to use jotforms, I'm surely not complaining!  I just thought maybe there was a secret way to do it that I couldn't find.  I think I'm going to do them in chunks by category until they are all done.

    Thanks again

  • Profile Image
    JotForm Support

    Answered by TitusN on February 07, 2014 at 03:13 PM

    I understand.

    Perhaps:

    You can actually download the form's source code and apply a class to all the contaner's you want to style.

    That would take a shorter time - wouldn't it?

    Let us know.

  • Profile Image

    Answered by tdiintl on February 07, 2014 at 03:28 PM

    That just might do the trick!  I will be working on these next week (I'm going to be out of my office this afternoon and monday) so I will report back if this solution works for me.

  • Profile Image
    JotForm Support

    Answered by TitusN on February 07, 2014 at 03:32 PM

    We will look forward to providing further assistance.

    Thank you for sticking through this.

  • Profile Image

    Answered by tdiintl on February 12, 2014 at 10:36 AM

    Hi again.  Sorry I didn't get back to you sooner.  I'm unable to make the changes by downloading the forms source code.  Changes I make are doing nothing.  I am just shrinking the entire form to get all the fields as close to the same width as possible.  I can't do the one at a time thing because I've been given other projects that have priority over this.

    Thank you for taking the time to try to help me! :)

  • Profile Image

    Answered by EliezerN on February 12, 2014 at 11:35 AM

    Hi,

    Please try injecting this CSS code to your form:

    .form-input {

    width: 100%;

    }

    .form-textbox, .form-dropdown

    {

    max-width: 99% !important;

    width: 99% !important;

    }

    That will make your form looks in this way: 

    I hope this is what you are looking for. Please inform us if you need further assistance with this inquiry.

    Thanks