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

    Adjusting Name and Email Fields

    Asked by kranai on March 05, 2016 at 10:31 AM

    Hi

    Re: Insight-Academy Customer Loop Form

    I need to adjust the following fields when viewed in  on Mobile devices

     

    1. I need to reduce the prefix field so that it has enough space for 6 characters 

    2. I need to adjust the gap that will be created once item 1 above is done need to adjust the first/last name fields 

    3. I need to reduce the email field slightly

    4. I nede to get the words "Reset Input" and "Submit" to be centralised properly on the button

     

    In fact some these CSS code for the above are already injected but seem to no effect. Please check why is this so.

    Once you have found why ...can you just display the CSS code again below for me and I will adjust the numbers to my liking so that I need not disturb you with these minor adjustments.

    Please use the correct form as stated above.

    Thanks

    kish

     

    name email fields email
  • Profile Image
    JotForm Support

    Answered by Boris on March 05, 2016 at 08:06 PM

    I see that your form named InSight Academy Customer Loop is form 60469058843464.

    On this form, your existing custom CSS is this:

    #input_2, #input_reset_2 {
        padding-top : 0px !important;
        font-size : 11px;
    }
    .form-label.form-label-left {
        font-size : 14px !important;
    }
    #input_5_phone {
        width : 70px;
    }
    #input_5_area {
        width : 30px;
    }
    #input_5_country {
        width : 25px;
    }
    @media screen and (max-width: 480px){
        [data-type="control_phone"] .form-sub-label-container {
            width : 30% !important;
        }
    }
    @media screen and (max-width: 480px){
        [data-type="control_fullname"] .form-sub-label-container {
            -moz-box-sizing : border-box;
            -webkit-box-sizing : border-box;
            box-sizing : border-box;
            width : 30% !important;
        }
    }
    @media screen and (max-width: 480px){
        .form-label {
            width : 34% !important;
            float : left !important;
        }
        .form-input {
            width : 62% !important;
            max-width : none !important;
        }
        input[name$="[country]"],input[name$="[area]"] {
            width : 70% !important;
        }
    }
    .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
        height : 30px;
    }
    @media only screen and (max-width: 480px){
        #input_16 {
            max-width : 50%!important;
        }
    }
    @media only screen and (max-width: 480px){
        input#prefix_15 {
            width : 10%!important;
        }
    }

    1. As you have multiple @media blocks all targeting the same screen size (max-width 480), I have tidied it up and moved the rules for mobile devices withing the same section.

    2. The Full Name field on this form has the ID of 3, so the prefix field's ID in your CSS for this form should be #prefix_3, and not #prefix_15 that you were previously using. Custom CSS is form specific, so it looks like you've copied custom CSS from some older form that had a Full Name field with ID of 15.

    3. Even if you used the correct ID in your code, that would not be the recommended way of changing the size of this field. This is because its size is copntrolled by its container, so even if you reduced its size, there would be lots of seemingly blank space remaining:

    The way to resize the name prefix field would be to resize its container, by using the following custom CSS:

    [data-type="control_fullname"] .form-sub-label-container:first-child {
        width: 20% !important;
    }

    As you want it to work only on mobile devices, we will place it inside the @media rule for mobile devices. As we have made the prefix field smaller, I have also adjusted the size of the first name and last name fields from 30% to 38%, so that all fields combined with their margins take the full width of the full name field.

    After fixing this, and tiding up the code, the result is here:

    #input_2, #input_reset_2 {
        padding-top : 0px !important;
        font-size : 11px;
    }
    .form-label.form-label-left {
        font-size : 14px !important;
    }
    #input_5_phone {
        width : 70px;
    }
    #input_5_area {
        width : 30px;
    }
    #input_5_country {
        width : 25px;
    }
    @media screen and (max-width: 480px){
        [data-type="control_phone"] .form-sub-label-container {
            width : 30% !important;
        }
        [data-type="control_fullname"] .form-sub-label-container {
            -moz-box-sizing : border-box;
            -webkit-box-sizing : border-box;
            box-sizing : border-box;
            width : 38% !important;
        }
        .form-label {
            width : 34% !important;
            float : left !important;
        }
        .form-input {
            width : 62% !important;
            max-width : none !important;
        }
        input[name$="[country]"],input[name$="[area]"] {
            width : 70% !important;
        }
        #input_16 {
            max-width : 50%!important;
        }
        [data-type="control_fullname"] .form-sub-label-container:first-child {
            width: 20% !important;
        }
    }
    .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
        height : 30px;
    }

    Please try it out and let us know if this is what you were looking for.

  • Profile Image

    Answered by kranai on March 06, 2016 at 12:50 PM

    Hi Boris

     

    Re: Insight-Academy Customer Loop Form

    Thanks for tidying my code much appreciated. Now it looks okay for both desktop and mobile views.

    Only a small adjustment please view my website www.insight-acad.com and view the desktop and mobile version (by reducing the width of the browser to about the size of mobile screen) and you will see that the text "submit" and "Reset" is not centralised on the red buttons...can this be adjusted..

    Thanks

    kish

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 06, 2016 at 02:07 PM

    Hello Kish,

    Please inject the following custom css code in your form and see if that solves your problem:

    @media only screen and (max-width: 480px){

     #input_2, #input_reset_2 {

        padding-top: 6px !important;

     }

    }

     

    #input_2, #input_reset_2 {

        padding-top: 6px !important;

    }

     

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

    Hope this helps.

    Do get back to us if you need any other changes.

    Thank you!

  • Profile Image

    Answered by kranai on March 06, 2016 at 08:06 PM

    Hi Ashwin

    Thanks for the CSS code...I have not applied this code because for some strange reason when I looked at my mobile device for this form again it looks okay to me the same applies when I looked from my desktop view. The day I requested for the css code from it was not the case.

    Anyway I will monitor and and keep this code handy if I need to apply later I will do so.

    Thanks alot

    kish

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 07, 2016 at 01:50 AM

    Hello kish,

    You are welcome.

    Do get back to us with a screenshot of the issue whenever you inject the code and we will take a look.

    We will wait for your response.

    Thank you!