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 change the font size of the input texts on the Mobile template of my form?

    Asked by AlperCayhan on November 01, 2014 at 09:34 PM

    One more question: how can I change the font size of the fill in forms (green fonts) in mobile view.

    I would like to give them the same fontsize as the labels.

    Hope you can help me.

    font size font input field
  • Profile Image

    Answered by raul on November 02, 2014 at 12:18 AM

    Hello,

    Upon checking your form, I see that the font size of the inputs are the same as the fields.

    Iphone Emulator

    My Phone

    Please let us know if you were able to set this by yourself or I'm missing something.

    Thanks.

  • Profile Image

    Answered by AlperCayhan on November 02, 2014 at 02:55 AM

    The fontsize in my form is too smal, see screenshot.

     

  • Profile Image

    Answered by Ben on November 02, 2014 at 04:55 AM

    Hi,

    I took a look at your jotform and to me it seems to be similar, but there is a slight variation of the font family and size.

    Now to avoid this please try injecting this CSS to your jotform:


    label.form-label.form-label-left.form-label-auto, textarea.form-textarea, input.form-textbox {
        font-family: "Archivo Narrow";
        font-size: 16px;
        line-height: 18px;
    }

    Now, since I saw that you had set both Archivo Narrow and Verdana (depending on which fields we are looking at, this would be an alternative to use Verdana instead of Archive Narrow for all fields.

     

    label.form-label.form-label-left.form-label-auto, textarea.form-textarea, input.form-textbox {
        font-family: Verdana;
        font-size: 13px;
        line-height: 15px;
    }

    Do let us know how it works for you and if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by AlperCayhan on November 02, 2014 at 05:52 AM

    Hi Ben,

    I've injected the first CSS, because I would like to use Archive Narrow.

    But the fontsize of the fill in field (green fonts) is still the same.

  • Profile Image
    JotForm Support

    Answered by jonathan on November 02, 2014 at 07:10 AM

    Hi,

    Can you please try adding this CSS code also

     

    .form-textarea {

    font-family: "Archivo Narrow";

    font-size: 16px !important;

    line-height: 18px;

    }

    I tried this and it seems to affect the textarea input when explicitly done.

     

    Please tell us if still not working.

    Thanks.

  • Profile Image

    Answered by AlperCayhan on November 02, 2014 at 11:16 AM

    Thanks for your reply Jonathan. It's not only for the textarea, but for all the fill-in areas.

    How do I change the fontsize of all those areas to the same size as the label title fontsize.

  • Profile Image

    Answered by Shadae on November 02, 2014 at 12:07 PM

    Hi AlperCayhan,

    After reviewing your form I am seeing that the code provided by Ben was not entered correctly. It is currently entered as:

    input, textarea {color: #42c5be !important;}   

    font-family: "Archivo Narrow";

        font-size: 16px;

        line-height: 18px;

    }

    The code should be entered as this to take effect:

    input, textarea {color: #42c5be !important;   

    font-family: "Archivo Narrow";

        font-size: 16px;

        line-height: 18px;

     

    }

    If the size is still not big enough you can change it to this code:

    input, textarea {color: #42c5be !important;   

    font-family: "Archivo Narrow";

        font-size: 20px;

        line-height: 18px;

     

    }

    I hope this helps! Please inform us if you need additional assistance.

  • Profile Image

    Answered by AlperCayhan on November 02, 2014 at 01:03 PM

    Hi Shadae,

    It's almost done... The font type of the "comment" area is different, see screenshot. I would like to change this into the same font type as the fields above.

  • Profile Image

    Answered by Shadae on November 02, 2014 at 01:24 PM

    Hi AlperCayhan,

    Please add the follow code to make the changes to your text area as well. Please use your desired size.

    .form-textarea {

    {color: #42c5be !important;  

    font-family: "Archivo Narrow";

    font-size: 20px !important;

    line-height: 18px;

    }

    Please inform us if you need additional assistance.

  • Profile Image

    Answered by AlperCayhan on November 02, 2014 at 01:47 PM

    Thanks a lot! Everything is fixed now.

    <3 JotForm!

    Kind regards,

    Alper

  • Profile Image

    Answered by Shadae on November 02, 2014 at 02:08 PM

    Hi Alper,

    On behalf of myself and my colleagues, you are most welcome. We are happy to hear that you have gotten your desired result.

    Please feel free to contact us if you need additional assistance.

    Thank you.