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 change vertical padding on a text field?

    Asked by Aaardvaark on March 23, 2014 at 09:38 PM

    Hi

     

    I'm struggling to control form layout on this form, but I can't fix one problem . . . see form at http://canberrabirds.org.au/about-cog/joining-cog-and-renewing/

     

    Under Membership and payment see line called "Donation".   I want to make the text box "Donation to Canberra Birds  Conservation Fund" sit up level with the Donation text box.  There is no vertical padding on the Donation field, but there is on the text field, so they don't align. I don't know how to control vertical padding, in fact I can't control anything about plain text field position really.


    Similar problem lower down under "Preferences" heading.  The text field "Please indicate ..."  under the "Preferences" heading has padding above, so the Preferences heading ends up being too far from the text below it.  In fact the heading is closer to the last item above it than it is to the relevant item below.  I need to get the text field "Please indicate ..." up higher, by reducing top padding to zero.  But I still want padding below, so if I can't independently control top and bottom padding I'll have to insert a blank text field.

     

    So my questions:

     

    1) how do I control vertical padding in a text field?

    2) generally, do you have a list of ALL custom CSS entries to inject that control format and layout?

    3) is there a way of easily finding the ID of text fields and others that have no info in their properties?  I have to delete the text field, add a temporary text box, find out the ID of the text box, delete the text box, add a new text field and assume its ID will be the same as the text box was.

     

    Thanks!

     

    Page URL:
    http://canberrabirds.org.au/about-cog/joining-cog-and-renewing/

    text field problem heading layout
  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 23, 2014 at 11:51 PM

    Hello Aaardvaark,

    Please inject the following custom css in your form to align the text field:

    #text_62{padding-top: 3;}

    #text_58{padding-top: 0;}

    .form-html p {

    margin: 0;

    }

    The following guide should help you in custom css injection:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please find below the answers to your query:

    1. how do I control vertical padding in a text field?

    It can be done by injecting custom css code.

     

    2. generally, do you have a list of ALL custom CSS entries to inject that control format and layout?

    We do not have list of custom css at it depends on a particular form. You can search in our forum for css injected solution. http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes

     

    3) is there a way of easily finding the ID of text fields and others that have no info in their properties?  I have to delete the text field, add a temporary text box, find out the ID of the text box, delete the text box, add a new text field and assume its ID will be the same as the text box was.

    How to find the field Ids:

    http://www.jotform.com/help/146-How-to-Find-Out-the-Field-ID-and-Name-in-a-Web-Form

    http://www.jotform.com/help/176-How-to-apply-custom-CSS-to-a-particular-field

    But for text fields, you will have to use Firebug to determine the targeted elements (CSS selectors).

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!