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

    adjust text fields according to form collapse width

    Asked by born on December 06, 2012 at 11:01 AM

    How do I adjust the width of the form fields, not to the form with but to the width of a form collapse?

    I got a bunch of form collapse, underneath each is a HTML field and underneath that a few name, text box & email fields. Those form fields are too long and more in width of the whole form and I need to bring them in a bit, to fit with the form collapse ones.

    I'm a CSS novice and have only made this form from plowing relentlessly through of the forums (which is brilliant for copy and paste).

    My form has a transparent background in case you wonder https://secure.jotformeu.com/form/22793469152360

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on December 06, 2012 at 01:23 PM

    Hi,

    You can edit the HTML field and hit "Enter" on your keyboard to bring down some words into new line and to fit it on your form.

    Or, inject this custom CSS codes to your form;

    .form-html {

    width: 390px !important;

    }

    Adjust the width value if needed.

    Thanks

  • Profile Image

    Answered by guest_23403625391045 on December 06, 2012 at 01:44 PM

    Thanks but I'm referring to the text, name and email fields, not the HTML box which I have manage to control by CSS.

    Need to have everything lined up with the collapse boxes.

    Please have a look here on the form https://secure.jotformeu.com/form/23405511364344

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on December 06, 2012 at 02:50 PM

    Hi there, 

    Here is a clone of your form:

    http://form.jotformpro.com/form/23405853228958'

    I changed the CSS a little bit.

    The line of CSS that lines up the fields is highlighted in yellow.  Let us know if you need further assistance!

    .form-collapse-table {

    background-image:none;

    background-color:black;

    }.form-collapse-mid {

    text-shadow:none;

    }

    .form-collapse-table:hover {box-shadow:none;

    text-shadow:none;

    background: #114CDF;}a {

    color: #FE0000

    }

    .form-line {

    padding-left: 50px;

    }

    .form-all {

    padding-top: 0;

    }

    .form-html {max-width: 530px;width: 530px;

    margin-left: 40px;

    }

  • Profile Image

    Answered by born on December 06, 2012 at 03:32 PM

    Many thanks!