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

    Styling Matrix Table

    Asked by AprilRosePhotography on June 01, 2015 at 10:58 PM

    How can I edit the Matrix table? 

    I would like it to look something like this

    http://www.jotform.com/theme-store/theme/simplicity

    (Spacing, all white)

    matrix table style how to
  • Profile Image

    Answered by Syed on June 02, 2015 at 03:05 AM

    Hi there;

             Could you please share us your form link here, so that we can provide you CSS Code Block to make exactly that style for Matrix table. Let us know we will wait for you, looking forward to hearing from you.

     

    Thankyou,

  • Profile Image

    Answered by AprilRosePhotography on June 02, 2015 at 04:44 AM

    Oh, this is the form, I haven't done anything as yet because I wanted to get this sorted first :)

    http://form.jotform.co/form/50891090294862?

    Thanks!

  • Profile Image

    Answered by Syed on June 02, 2015 at 05:27 AM

    Hi there;

           It's not a problem, You can create your first form :)

    To make this style for Matrix Table, just inject the following CSS Code Block to your form. Read our guide here on How to Inject Custom CSS Codes. Review the following screenshot for confirmation.

    .form-matrix-column-headers, .form-matrix-row-headers, .form-matrix-values {font-family: "Arial";background: #FFF;}

    .form-matrix-column-headers, .form-matrix-row-headers, .form-matrix-values {background: #FFF;}input[type='radio'] {border-radius: 100%;bottom: 1px;height: 15px;position: relative;vertical-align: middle;width: 15px;}

    input[type='checkbox'], input[type='radio'] {-webkit-appearance: none;-webkit-user-select: none;border: 2px solid #2E6DA4 !important;border-radius: 100%;color: #444;font: inherit;margin: 0 1px 0 0;outline: none !important;text-shadow: 0 1px 0 #F0F0F0;cursor: pointer;}

    input[type='radio']:checked::before {background-color: #2E6DA4;border-radius: 100%;bottom: 3px;content: '';display: block;left: 2px;position: absolute;right: 3px;top: 2px;height: 7px;width: 7px;}

    .form-matrix-table {max-width: 550px;}

    Hope it will all-set! Do get back to us if you have any questions/queries, we would be happy to assist you :)

     

    Thankyou,

  • Profile Image

    Answered by AprilRosePhotography on June 02, 2015 at 06:43 PM

    Hiya,

    Thank you :)

    I would like to make a few changes - I've already changed the font. 

    How would I change it so the columns are fixed to be all the same size? Like the one in your screenshot above, my one doesn't come out like that though: http://form.jotform.co/form/50891090294862?

    And how do I change the radio buttons - to the default one?

  • Profile Image
    JotForm Support

    Answered by Aury on June 02, 2015 at 07:27 PM

    @AprilRosePhotography

    I have checked your above indicated form: http://form.jotform.co/form/50891090294862? that is how it looks like in my end:

    Please note that columns are same size and radio buttons are the default ones.

    If any other question, please let us know.

       

  • Profile Image

    Answered by AprilRosePhotography on June 02, 2015 at 08:02 PM

    HI there, 

     

    This is what I am seeing, how come the radio buttons are different?

     

    Also, I want the columns to be the same size in width, do you know how I can change that?

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on June 03, 2015 at 01:01 AM

    Hello,

    Please inject the following custom css code in your form which will change the columns width to be same:

    .form-matrix-table {

      max-width: 700px;

    }

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

      width: 125px;

    }

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

    I am not sure if I have understood your second question correctly "how come the radio buttons are different?". Please explain your question a bit more in detail and we will surely help you.

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by AprilRosePhotography on June 03, 2015 at 04:59 AM

    Hiya,

     

    The screenshot Aury provided has different radio buttons from what I'm seeing on my side (screenshot I provided)

    It's very weird because when I'm in edit mode, it shows the default radio buttons but when I view it, it comes up with different buttons (see screenshot).

    How do I make it so when I view it it has default radio buttons?

  • Profile Image

    Answered by Syed on June 03, 2015 at 05:10 AM

    Hi there;

           Pardon me, if I understood you correctly, you need the following changes;

    1) Change width to be equal for all columns

    2) Reset radio buttons styling to default

    Let me know, so that I can provide you what exactly you need to make these changes.

     

    Thankyou,

  • Profile Image

    Answered by AprilRosePhotography on June 03, 2015 at 05:15 AM

    That's right! Yes :)

  • Profile Image

    Answered by Syed on June 03, 2015 at 05:51 AM

    Thankyou for your quick response. First, I suggest you to clone this form here; http://form.jotformpro.com/form/51532176950960. I updated the CSS Code for you. Refer this guide here on How you can clone form form existing URL.

    Or;

    However, if you need to make the changes on your own form, do the following please;

    1) To Change Radio Button Styling to default:

    Remove the following injected CSS Code Block from your form. It will make your radio buttons to default style.

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

    background : #FFF;

    }input[type='radio'] {

    border-radius : 100%;

    bottom : 1px;

    height : 15px;

    position : relative;

    vertical-align : middle;

    width : 15px;

    }input[type='checkbox'], input[type='radio'] {

    -webkit-appearance : none;

    -webkit-user-select : none;

    border : 2px solid #555555 !important;

    border-radius : 100%;

    color : #55555;

    font : inherit;

    margin : 0 1px 0 0;

    outline : none !important;

    text-shadow : 0 1px 0 #F0F0F0;

    cursor : pointer;

    }input[type='radio']:checked::before {

    background-color : #2E6DA4;

    border-radius : 100%;

    bottom : 3px;

    content : '';

    display : block;

    left : 2px;

    position : absolute;

    right : 3px;

    top : 2px;

    height : 7px;

    width : 7px;

    }.form-matrix-table {

    max-width : 550px;

    }.form-buttons-wrapper {}.form-input-wide {}

    Review this screenshot for styling to be made on both ends.

    1) To Change each column width:

    To change the width of all cells to be equal. Inject the following CSS Code Block. It will make equal width for all columns.

    .form-matrix-table {max-width: 620px !important;}

     

    .form-matrix-column-headers, .form-matrix-row-headers, .form-matrix-values {width: 100px !important;}

    Review this screenshot for the changes to be made on both ends.

    Hope this helps. Do get back to us, if you need further changes, we would be happy to help you.

     

    Thankyou,

     

  • Profile Image

    Answered by AprilRosePhotography on June 03, 2015 at 05:59 AM

    Ah, that is perfection - thank you! 

    I never knew you could clone forms!

    Thank you very much :)

  • Profile Image

    Answered by Syed on June 03, 2015 at 06:01 AM

    Do get back to us, if you need more assistance in any way, we would be happy to assist you :)

     

    Thankyou,

  • Profile Image

    Answered by Swoodruff2002 on June 03, 2015 at 10:19 PM

    I have the a similar question:

    Matrix background and font Styles.

    I've tried to edit the CSS per the guide, but I don't know the commands. I want my matrix tables on the form to have transparent background , like the other questions, the radio buttons white to match others on the form, and the headers white test too.

    Can you provide the syntax and suggest an insertion point?

    I commented out the /* rgba(0, 14, 35, 0.66)*/ and put in transparent, but didn't change them.

    Form:http://form.jotform.us/form/51536792116154

    Thanks,

    Steve

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 04, 2015 at 12:19 AM

    Hi Swoodruff2002, 

    Thanks for contacting us.

     

    I have moved your question since we can only answer one question per user per thread. We will attend to your question here

     

    Regards.