I need to adjust styling of a few elements

  • kranai
    Asked on February 18, 2016 at 1: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

  • David JotForm Support
    Replied on February 18, 2016 at 1: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:

    I need to adjust styling of a few elements Image 1 Screenshot 20

    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.

  • David JotForm Support
    Replied on February 18, 2016 at 2: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

  • kranai
    Replied on February 19, 2016 at 1: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

  • Boris
    Replied on February 19, 2016 at 7: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:

    I need to adjust styling of a few elements Image 1 Screenshot 30

    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:

    I need to adjust styling of a few elements Image 2 Screenshot 41

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