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 reduce the spaces between fields

    Asked by Roseta00 on July 17, 2013 at 06:05 AM

    how can I  reduce  spaces between the lines and between the  different fields ?

     

    survey survey form create different
  • Profile Image

    Answered by sidharth_kch on July 17, 2013 at 06:21 AM

    @Roseta00

    Please refer this guide to do it -How-can-I-change-spacing-between-questions

    If you need to reduce the space between the fields on the same line, you need to add custom css code. Please let us know for which fields you want to reduce the spaces and we will send you the custom css code. 

    You can refer a sample code in this thread: http://www.jotform.com/answers/188807-Reducing-distance-between-two-fields-on-the-same-line

    We will wait for your response.

    Thanks,

    Sidharth

  • Profile Image

    Answered by Roseta00 on July 17, 2013 at 07:39 AM
    Dear Sidharth
    I want to diminish the spaces marked in pink:
    Thanks and kind regards,
    Sabine
    Sabine Abanto
    Investor and Media Relations
    Givaudan International SA - 5, Chemin de la Parfumerie - 1214 Vernier
    - Switzerland
    T +41 22 780 90 53 - F +41 22 780 91 87 - http://www.givaudan.com
  • Profile Image
    JotForm Support

    Answered by abajan on July 17, 2013 at 08:41 AM

    Hi Sabine

    Please give the ID of the form to which you are referring. We would also need to know the specific fields, so that we can provide the necessary CSS for you to inject.

    Thanks

  • Profile Image

    Answered by Roseta00 on July 17, 2013 at 09:26 AM
    http://form.jotformeu.com/form/31972309850357
    I would like to have all fields reduced in height. Fields:
    Text box "registration Form"
    Text box "participants details"
    Full Name
    Company
    Job Title
    Office address
    Office Phone
    Mobile Phone
    Email
    Text box Please indicate
    Text box Please indicate
    Text box Please indicate
    Text box To register
    Text box Contact
    Many thanks for your assistance
    Sabine
    Sabine Abanto
    Investor and Media Relations
    Givaudan International SA - 5, Chemin de la Parfumerie - 1214 Vernier
    - Switzerland
    T +41 22 780 90 53 - F +41 22 780 91 87 - http://www.givaudan.com
  • Profile Image
    JotForm Support

    Answered by abajan on July 17, 2013 at 10:25 AM

    There are a couple of issues here. Firstly, the injected CSS is incorrect because the rule has parentheses (round brackets) instead of braces (curly brackets) and the declaration's value has p (a non-existent unit) instead of px (short for pixels). So, instead of

    .form-line(padding:3p;)

    it should be

    .form-line {padding: 3px;}

    Also, REGISTRATION FORM and Participants details: are not really form fields and as such, will not be affected by the rule. I'm assuming you would like both REGISTRATION FORM and Venue: Widder Hotel , Rennweg 7, Zurich to be centered, and Participants details: to be closer to Full Name. Is that correct?

  • Profile Image

    Answered by Roseta00 on July 18, 2013 at 04:31 AM
    http://form.jotformeu.com/form/31972309850357
    Dear Abajan,
    I managed to make some changes on the form to make it look better.
    Still,
    CONFERNECE PROGRAMME and PARTICIPANTS DETAILS should be identical
    titles (I am unable to change the font size in this fields)
    The space between CONFERENCE PROGRAMME and "Please indicate the parts of
    the programme you will attend" should be much less
    The space between PARTICIPANTS DETAILS and "Full name" should be much less
    The spaces between the PARTICIPANTS DETAILS Fields should be smaller
    I have copied /replaced the rule you sent me, but I do not see any
    spaces diminished?
    I look very much forward to getting your reply
    Thanks
    Sabine
    Sabine Abanto
    Investor and Media Relations
    Givaudan International SA - 5, Chemin de la Parfumerie - 1214 Vernier
    - Switzerland
    T +41 22 780 90 53 - F +41 22 780 91 87 - http://www.givaudan.com
  • Profile Image
    JotForm Support

    Answered by abajan on July 18, 2013 at 04:45 AM

    Okay, I'll work on something and get back to you.

  • Profile Image
    JotForm Support

    Answered by abajan on July 18, 2013 at 06:51 AM

    Would this form be more in line with your requirements, Sabine?

  • Profile Image

    Answered by Roseta00 on July 18, 2013 at 08:00 AM
    Dear Abajan,
    This is exactly what I tried to realise , You are a real PRO !
    Thank you !!
    Is it the same link ?
    Is there a way I could do it myself next time?
    Thanks again,
    Sabine
    Sabine Abanto
    Investor and Media Relations
    Givaudan International SA - 5, Chemin de la Parfumerie - 1214 Vernier
    - Switzerland
    T +41 22 780 90 53 - F +41 22 780 91 87 - http://www.givaudan.com
  • Profile Image
    JotForm Support

    Answered by abajan on July 18, 2013 at 09:06 AM

    Thanks for the compliment :)

    That form is actually a clone of yours in my account. Here's how to make your own form look like that:

    1. Copy this code to your computer's clipboard

    2. Load the form in the form builder, click the Registration Form section, click the button in the toolbar labelled with a big "T", paste what you copied and click "OK":


    3. Click "CONFERENCE PROGRAMME" and then the same button mentioned in step 2 and replace all of the code there with just this and click "OK"

    4. Click "PARTICIPANTS DETAILS" and then the same "T" button and replace all of the code there with just this

    5. Replace the form's current injected CSS with the following:

    .form-line {
    padding: 0;
    }

    #label_37 {
    margin-bottom: 8px;
    }

    #id_37, #id_29 {
    margin-bottom: 0;
    }

    .form-label-top {
    margin-bottom: 2px;
    }

    .form-sub-label {
    margin-top: -2px;
    }

    .form-address-table td {
    padding-bottom: 2px;
    }

    #id_13 {
    text-align: center;
    }

    #id_42, #id_41 {
    color: #777;
    margin-bottom: -15px;
    padding: 0;
    font-size: 11pt;
    font-weight: bold;
    }

    #text_42, #text_41 {
    padding-left: 0;
    }

    That should do it but should you run into any difficulties, please let us know.

  • Profile Image
    JotForm Support

    Answered by abajan on July 18, 2013 at 09:08 AM

    Oh, as to doing it yourself next time, that would require some knowledge of CSS. Are you familiar with how CSS works?

  • Profile Image

    Answered by Roseta00 on July 18, 2013 at 10:20 AM
    Dear Abajan,
    I have done the changes, the first one worked well but the CSS code seems
    not to affect the form. See
    http://form.jotformeu.com/form/31972309850357
    No, sorry I have never not even heard about CSS code's existing !!
    Maybe there is an easy way to just diminish the upper and lower frame of a
    field ?
    Sabine
    Sabine Abanto
    Investor and Media Relations
    Givaudan International SA - 5, Chemin de la Parfumerie - 1214 Vernier
    - Switzerland
    T +41 22 780 90 53 - F +41 22 780 91 87 - http://www.givaudan.com
  • Profile Image
    JotForm Support

    Answered by abajan on July 18, 2013 at 11:01 AM

    There appears to be a caching issue because from my end your form actually looks exactly like mine (except for the text of the two last choices in the "Conference" section and the position of the submit button.)

    The following are two links via which your form can be accessed. Click each in turn and let us know if it looks the same at both:

    http://form.jotformeu.com/form/31972309850357

    http://www.jotformeu.com/form/31972309850357

  • Profile Image

    Answered by Roseta00 on July 19, 2013 at 03:27 AM
    http://form.jotformeu.com/form/31972309850357
    Good morning Abajan,
    I observe that through the links the form look different than on my
    screen. Maybe the cookiees... ?
    But what people receive fits on one page now and looks good.
    Thank you so much for your fantastic help!
    Have a good day,
    Sabine
    Sabine Abanto
    Investor and Media Relations
    Givaudan International SA - 5, Chemin de la Parfumerie - 1214 Vernier
    - Switzerland
    T +41 22 780 90 53 - F +41 22 780 91 87 - http://www.givaudan.com
  • Profile Image
    JotForm Support

    Answered by abajan on July 19, 2013 at 05:01 AM

    You're most welcome.