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 can I reduce the height of my form

    Asked by artevolve on November 16, 2013 at 06:08 AM

    Hi

    I would like to shorten the overall height of my form without losing any of the elements. There is a lot of space between the various elements that is'nt necessary so it should be possible. I've attached screenshot of my footer to show you the impact the form is having on it ie way too big; btw ive tried using smaller fonts, and reducting height of text boxes etc. There is also space to move some of the titles to the side of the boxes rather than above ee name, email, phone number

    Page URL:
    http://podchiropody.co.uk/leicester_podiatrist.html

    Screenshot
    height email name phone number
  • Profile Image

    Answered by Cesar on November 16, 2013 at 08:50 AM

    At this time I will work on cloned version of your form, once I have made the neccesary changes I will post it back on this thread. Thank you.

  • Profile Image

    Answered by artevolve on November 16, 2013 at 08:54 AM
    Fantastic. Thankyou
    www.podchiropody.co.uk
    Pod Chiropody & Laser
    12 Cosby Road
    Littlethorpe
    Leicester
    LE19 2HF
    01162752037
  • Profile Image

    Answered by Cesar on November 16, 2013 at 10:00 AM

    At this time I have injected the tested CSS Code on an example form,

     

    The Injected CSS Code is the following:

    .form-input {
    position: relative;
    bottom: 12px;
    }

    #id_4 {
    position: relative;
    bottom: 22px;
    }

    #id_13 {
    position: relative;
    bottom: 40px;
    }

    #id_12 {
    position: relative;
    bottom: 80px;
    }

    #id_2 {
    position: relative;
    bottom: 100px;
    }

     

    For reference, these are the steps to inject CSS code:

    On the Form Editor, select the Setup & Embed, then click on Preferences. On the Preferences window select the Form Styles tab then on the Inject Custom CSS code paste the code provided above.

     

    https://cms.jotform.com/uploads/image_upload/image_upload/global/21068_contactpod.png

     

    Kindly check on the Example Form and verify if this is what you need: http://form.jotformpro.com/form/33193470360955 you can also clone the form if needed. I'm proving the steps on how to do so on the related articles section below:

    Also, I would suggest to use the iframe code method to add this form to your site.

    If you need further assitance, do let us know. Thank you.

     

     

    Related Articles:

    Getting-the-Form-iFrame-Code

    How-to-clone-an-existing-form-from-a-URL

  • Profile Image

    Answered by artevolve on November 16, 2013 at 12:20 PM

    Hi Cesar. Thankyou for the quick response and great information; i have made the change you suggesred and it looks like the screenshot you supplied - just one thing please, the text that starts "APPOINTMENTS, etc can you adjust this so that it is moved down closer to the bottom white box (box 4) at the moment it is too close to box 3; If the text could "sit" just on top of box 4 as it does on the other 3 boxes that should be perfect. Sorrry to bother you and thanks for a great product and fantastic service - better than Mailchimp!

  • Profile Image

    Answered by artevolve on November 16, 2013 at 12:23 PM

    Also, is it possible to stretch all the white boxes so they have the same overall width ie same width as box 4? Thanks

  • Profile Image

    Answered by Cesar on November 16, 2013 at 01:04 PM

    Good to hear we are on the right path. I will work on providing you with the changes you requested. One I have an update on this. I will let you know through this thread. Thank you.

  • Profile Image

    Answered by artevolve on November 16, 2013 at 01:11 PM

    Thats great. You guys sure know about customer service. Bravo!!

  • Profile Image

    Answered by Cesar on November 16, 2013 at 02:49 PM

    I have performed some updates to the CSS code I provided to you earlier, here is the new code:

    http://pastiebin.com/5287cbcf2c980

    Here's my example form: http://form.jotformpro.com/form/33193470360955

    Do let us know if you need further assistance on this. Thank you.