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

    I need to adjust styling of a few elements

    Asked by kranai on February 18, 2016 at 01:18 PM

    1. Is there a way I can increase the font size of the labels (Full Name, Email and Phone Number) slightly without affecting the current look? Since there is so much space between the label and input boxes.

    2. the phone number input box currently allows 8 digits to be visible is there a way to increase the box width so that 10 digits are visible?

    3. The two red buttons submit and reset...shouldnt it have a mouse-over effect? meaning shouldn't it change colour when I place the cursor over it? It does when u view the form in builder but not my website? 

    You can see the changes I have made from website www.insight-acad.com

    Thanks alot

  • Profile Image
    JotForm Support

    Answered by david on February 18, 2016 at 01:28 PM

    I checked your embedded form and the mouse over effect is indeed working.  At least in FireFox and Chrome it is. 

    For the phone number input, if you would like to allow for country code as well, that can be enabled in the fields options:

    To increase the font size of the labels, add this code to your form:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-label.form-label-left {
        font-size : 14px !important;
    }

    Adjust the value to your liking.

  • Profile Image
    JotForm Support

    Answered by david on February 18, 2016 at 02:45 PM

    To adjust the width of the area code field, add this code:

    #input_5_area {
        width : 40px;
    }

    For the phone portion, add this code:

    #input_5_phone {
        width : 100px;
    }

    This is how to the form would look with both added:

    https://form.jotform.com/60485502929966

  • Profile Image

    Answered by kranai on February 19, 2016 at 01:47 AM

    Hi David

    Thanks for sorting this out for me. Now that I know a little on how you change some style using CSS. My only question is how and where can I find the field names ...you input_5_area, input_5_area and I tried input_5_country....if I do not the filed names how am I going to change the styles? Is there a list for every form when it is created what the input name are?

    thanks

    kish

  • Profile Image
    JotForm Support

    Answered by Boris on February 19, 2016 at 07:28 AM

    The names of input fields are different for each field, and there are several ways how you can find out the IDs of elements on your form.

    You can follow our guide on How to find Field IDs & Names, to find our field IDs directly from our Form Builder:

    You can use #input_5_country in your CSS to change the width of country field.

    The same applies to IDs of any other fields on your form, simply please try looking in the Edit Properties of that field.

    Another way to find out the ID is to right-click on your desired form field of your actual form, and select Inspect Element option from your browser's context menu:

    Please let us know if you need any further assistance, and we will be happy to help.