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

    Changing font size on a matrix (survey tools)

    Asked by WCSPC on September 06, 2013 at 05:07 AM

    Hi,

    Have designed a survey but the matrix automatically changes the font size. This is too small to read and I need to change this. I assume that I need a custom CSS code but this is beyond me. I cannot find one on FAQ or forum. Would you please help me to fix this I need to print the survey today ideally.

    I can change the table and cell size but font remains the same.

    I thought I had asked this question at the start of the week but cannot trace a reply - please point me in the right direction if you have already dealt with this.

     

    Thanks Sue

    Page URL:
    http://form.jotform.co/form/32271653013848

    survey size font size font
  • Profile Image

    Answered by khrisell on September 06, 2013 at 06:19 AM

    Hello,

    If you want the header font size to adopt to the size of the matrix. Kindly inject this code on your form. (Also, if you want to change the value of the width and height of the textbox, change it according to your preference.)

    .form-matrix-values .form-textbox {

    font-size: 100%;

    width: 100px;

    height: 50px; 

    }

    .form-matrix-column-headers, .form-matrix-row-headers {

    font-size: 100%; }

     

    Follow this guide on how to inject this codes

    1. Click Setup & Embed

    2. Preference

    A new window will pop-up.

    3. Then click Form Styles

    4. And paste the code under Inject Code CSS box.

    And then close that window and you're done.

    Let us know if you need further assistance.

    Thank you for using JotForm. :)

  • Profile Image

    Answered by WCSPC on September 06, 2013 at 04:57 PM
    Hi,
    So sorry I have found your previous email today. I have tried this solution
    but the font stays the same size. I have expanded the size of the table but
    no change. Would you please look again for me as the size of the font is
    really very small.
    Many thanks, Sue
  • Profile Image
    JotForm Support

    Answered by Mike_T on September 06, 2013 at 05:20 PM

    We can increase the matrix font size within your CSS.

    For example, please try the following code where I have changed it from 100% to 200%.

    .form-matrix-values .form-textbox {

    font-size: 100%;

    width: 100px;

    height: 50px;

    }

    .form-matrix-column-headers, .form-matrix-row-headers {

    font-size: 200%; }

    Please give it a try and let us know if you need any further assistance on this.

  • Profile Image

    Answered by WCSPC on September 06, 2013 at 07:42 PM
    Thank you Mike - the text is now the same size as the rest of the form &
    thank you for responding so quickly - I can now meet my project deadline.
    Sue
  • Profile Image

    Answered by khrisell on September 06, 2013 at 07:59 PM

    Hello Sue,

    We are glad to be any help with your JotForm needs. You are most welcome!

    Kindly let us know if you have further questions or inquiry. If it is a new topic, kindly open another thread so that we could assist you better and avoid any confusion.

    Feel free to contact us anytime.

    Thank you for using JotForm. :)

  • Profile Image

    Answered by WCSPC on September 07, 2013 at 02:36 AM
    Hi,
    I do have one further very fussy point now I look at the form this morning.
    The matrix is bold and I cannot make the whole form uniform. I would prefer
    just the heading to be bold- can you help with this?
    Thanks Sue
  • Profile Image

    Answered by khrisell on September 07, 2013 at 04:05 AM

    Hello

    Kindly try to add the font weight to your CSS code just like this.

    .form-matrix-column-headers, .form-matrix-row-headers {

    font-size: 200%;

    font-weight: bold;

    }

    Kindly try this and let us know if you need further assistance and we'll be glad to help you.