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

    Font sizes in list - separate from question header

    Asked by caesib on March 22, 2014 at 03:07 AM

     

    When I use Matrix, it seems that when I have a text field above it, it wants to control the font size in the Matrix.  So I ended up with a huge text for wording on the question, and sort of readable text in the matrix. I would like to have the matrix in about 12-14 point type and the question in sold in 14 point. Instead, I had like 14 or 16 in the question and it looked like about 8 point in the matrix.

     

    I would like to get the font size larger on all the Lists - but I am not seeing 'how' to do this - the font adjustment doesn't seem to be in the list area.

     

    I'm dealing with many seniors. The form has to be more legible. Larger font sizes.

     

    Thanks.

    Page URL:
    http://crisis-coaching.com/survey/

    saved survey text field problem size
  • Profile Image

    Answered by Cesar on March 22, 2014 at 04:47 PM

    If you need to increase the font on the Matrix, Kindly try embedding the following CSS Code to your form: 

    #cid_58, table, tbody
    {
    font-size: 1.3em;
    }

    Example Form: http://form.jotformpro.com/form/40806466241957

    This is my example form, if you need further assistance. do let us know. Thank you.

     

    Related Article:

    How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image

    Answered by caesib on March 22, 2014 at 04:50 PM

    Hi, Cesar - I can't figure out "where" to put in your code.

    I'm on Jot Form - how do I put the code in - ? Your corrections to my form are awesome - but I couldn't figure out how to see what you did or where.

     

    Yes - need further help. By any change - would you know "why" the font size varies on iphone when I pull up my form? Even in the same list the font size varies like crazy - it's a mess!

     

    Thanks.

     

    Caesi

  • Profile Image
    JotForm Support

    Answered by BDAVID on March 22, 2014 at 09:47 PM

    1. While editing the form into the form builder, Click Setup & Embed tab and click Preferences from the toolbar

    2. On the Preferences window, go to Form Styles tab and then insert your CSS Code under Inject Custom CSS Box. (If you see code, just press enter after the last curly bracket, and paste the code provided by my collegue.)


  • Profile Image

    Answered by caesib on March 23, 2014 at 10:46 PM

    Hi, BDavid and Cesar - Thank you I found "where" to put the code - but it hasn't solved the problem.

    I have "larger" font now in the matrix. But if I try to enlarge the font in the wording "Please put a dot in the rating for each area." it is still linked  in some way - so if I change the font size for that "Please put..." line, then the header for the question becomes HUGE. ( I found a "work-around" and dumped the Headers and just went with a "text box". But is this a glitch - that the one field is trying to reference off of the other?

     

    Same type of problem, I am having throughout the form. I like the em size Cesar came up with 1.3 em. That'll work for me - then need to just go larger for Headline (see my #1 or #2) and I'm not sure if the "Please put..." line is considered subHeader. I didn't make it that way.

    iphone - (changes made look better on "web" via Firefox- iPhone - form still is a mess font-size wise.)

    The iphone layout the font size varied so much within the same form lists that it looks "drunk".

    - Question #1: "My aging parents...", "My parents are caring for..."I need help with expenses...", "I have caregiver depression..." - the font size in those options in the SAME list - are like double the font size.

     

    Most of the problems I found work-arounds or fixed - - but still need help figuring out why the smart phone form display is a mess.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 24, 2014 at 02:57 AM

    Hello caesib,

    No the text "Please put a dot in the rating for each area." is not a header but it just a question label and the class is "form-label-top". If you want just this question label to be the same size as of the matrix rows, you need to increase the font size of just this form element.

    Please inject the following custom css in your form:

    #cid_58, table, tbody

    {font-size: 1.3em;}

    #label_58{font-size: 1.3em;}

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

     

    Please take a look at the following form and see if this looks okay to you:  http://form.jotformpro.com/form/40821791417960? Feel free to clone this form for closer look. The following guide should help you in form cloning:  http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

     

    I did check this form in my iPhone device and it seems to display the fonts as expected. Do check and let us know if you see any difference in any questions.

    Thank you!