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 to get Matrix ID for css customization?

    Asked by SJAtraining on August 15, 2012 at 11:53 AM

    I'm trying to find the field ID but it doesn't show it under Show Properties - any suggestions?

     

    I'm trying to use CSS to modify individual fields, so any suggestions on that as well is appreciated!

    Screenshot
    find field ID custom css Field ID apply CSS code field
  • Profile Image
    JotForm Support

    Answered by abajan on August 15, 2012 at 12:22 PM

    Currently, not all types of the fields available in our form builder display their ID in their Properties box. However, developer tools like Firebug can be used to quickly determine the correct selector to effect the required styling of an element or group of elements. You can also just go to the form's address and view its source but if you aren't familiar with HTML, that may prove tricky in some instances, especially with forms that contain lots of fields.

    With which form and which fields in the form would you like assistance, and in what manner do you wish to style the said fields? CSS is a fairly broad topic and much of it involves context. That is to say, what works for one form wouldn't necessarily work for another.

    Looking forward to hearing from you.

  • Profile Image

    Answered by SJAtraining on August 15, 2012 at 12:35 PM

    Hi Abajan,

    Thanks, I'll look into Firebug.

    I'd like to create a form with multiple fields of entry to gather data. So far using a Matrix looks like the best option, but I would need a few Matrix to gather all the data needed.

    I want to adjust the length of the data box for the Matrix, i.e. longer for last name, shorter for Province.  But currently, when I do this, it affects all the Matrix fields.  I'm hoping to edit each one indvidually to get the best of both worlds.

    Here's the preview link of the form I'm trying to create: http://form.jotformpro.com/form/22263818145958

    thanks!

  • Profile Image

    Answered by javierf on August 15, 2012 at 01:38 PM

    Hello SJAtraining!

    I understand what you intend to do and it is completely possible adding css code like this http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Using the input ID as mentioned a previous post.

    good luck!

  • Profile Image

    Answered by SJAtraining on August 15, 2012 at 01:47 PM

    Hi Javierf,

    I've been using CSS to change the field lengths, and it works, but affects all of the matrix fields I use.  Do you know how to change it so that it only affects one at a time?

    Someone suggested #cid_3 (field name)

    { code here}

    #cid_4 (next field)

    {next set of code}

    but it's not working to affect only the targeted matrix.

  • Profile Image
    JotForm Support

    Answered by NeilVicente on August 15, 2012 at 02:20 PM

    @SJAtraining

    The solution in this thread should suffice, especially if your matrix contains only three columns.

    However, upon checking your account, I found a form which contains two different matrix tables with different number (more than 3) of columns.

    If this is the form you need help with, it will take a bit more than that to customize the field sizes.

  • Profile Image

    Answered by SJAtraining on August 15, 2012 at 02:29 PM

    Hi NeilVicente,

    The form you linked to is the one I'm trying to customize. I'd read the earlier thread, but am stuck as how to modify each table independently of the others on the page.

     

    thanks!

  • Profile Image
    JotForm Support

    Answered by abajan on August 15, 2012 at 03:05 PM

    Hi Havierf

    That would require a seperate rule for each matrix and "prepending" the relevant matrix's ID to the particular rule's selector. So, following the example in the thread to which Neil referred, in your form's case, the rules would be

    /* 1st matrix's rules */
    #id_3 .form-matrix-values .form-textbox {
    width: 150px;
    }

    #id_3 .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 150px;
    }

    #id_3 .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 80px;
    }

    /* 2nd matrix's rules */
    #id_4 .form-matrix-values .form-textbox {
    width: 150px;
    }

    #id_4 .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 150px;
    }

    #id_4 .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 80px;
    }

    /* 3rd matrix's rules */
    #id_5 .form-matrix-values .form-textbox {
    width: 150px;
    }

    #id_5 .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 150px;
    }

    #id_5 .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 80px;
    }

    Of course, the width values in each set of matrices would not be identical as above (which, after all, is the whole point of targeting each matrix with a separate set of rules.)

    Please see this link to familiarize yourself with descendent selectors. As a matter of fact, the whole set of MaxDesign's CSS tutorials are quite informative.

    Do let us know if you need additional help with this.


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on August 15, 2012 at 03:10 PM

    Of course, that's Javierf and not Havierf!

  • Profile Image
    JotForm Support

    Answered by abajan on August 15, 2012 at 03:17 PM

    Oops! I just realized that for the third matrix (table) .form-radio would likely have to be substituted for .form-textbox. At any rate, I'll clone the form and properly test the entire solution on my end later.

  • Profile Image

    Answered by SJAtraining on August 16, 2012 at 10:18 AM

    Thanks Abajan!  I'll read through the links.

    One more question for you.  I tested it out and it's working well, except for the last one.  I updated the .form-radio, but it's affecting the size of the circle the end user would click, not the width of the column.  Is there a way to adjust that?

     

    Thanks for all the help!

  • Profile Image

    Answered by javierf on August 16, 2012 at 01:58 PM

    Hello SJAtraining,

    Of course my friend, with .form-radio you can modify the input (the circle).

    What do you what to modify? I can be of greater help if your more specific.

    the width of what?

  • Profile Image

    Answered by SJAtraining on August 16, 2012 at 02:08 PM

    Hi Javierf,

    I want to modify the width of the columns themselves - I've created a new matrix to play around with:

    http://form.jotformpro.com/form/22284176567966?

    I can change the size of the circles, but want to change the columns so there's no wasted space - the column width would be only what's necessary to display the text (the 'Satisfied' column would be half the width that it is now)

  • Profile Image

    Answered by jeanettebmz on August 16, 2012 at 02:59 PM

    @SJAtraining  

    Our support staff is very clever and skilled (Thanks Abajan and Neil!) no wonder they have found most part of the solution for you

    Regarding to the width of the third matrix, I made my attempt so you see my clone here . Find below the code I’ve applied to it

    /* 3rd matrix's rules */
    #id_5
    .form-matrix-row-headers +
    .form-matrix-values +
    td.form-matrix-values{
    width:60px;
    }#id_5
    .form-matrix-row-headers +
    .form-matrix-values +
    td.form-matrix-values{
    width:60px;
    }
    #id_5 .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    td.form-matrix-values{
    width:60px;}

     

    You can always take advantage of the "inspect element" or "show source code" features any browser get in order to know exactly which class or element we should apply CSS rules

     

     

    Actuially , I took the time to take an answer provided by Neil on another thread regarding to how to apply custom CSS to a particular field, and I converted it into a guide. Hope you find it useful

     

    Jeanette

  • Profile Image

    Answered by javierf on August 16, 2012 at 03:56 PM

    Hello SJAtraining,

    I obey the compromise of answering and i will leave this as a complement to Jeanette's answer.

    What i understood was that you wanted to optimize the space and let everything fixed in relation to the text (no spaces) to do this you have to modify the css directly from within the form because it is written as part of the "form-matrix-column-headers", because of this the solution i present is to change that to JS code that you will add to your website after placing the form tag.


    <script type="text/javascript">
        document.getElementsByClassName("form-matrix-column-headers")[0].style.width="";
        document.getElementsByClassName("form-matrix-column-headers")[1].style.width="";
        document.getElementsByClassName("form-matrix-column-headers")[2].style.width="";
        document.getElementsByClassName("form-matrix-column-headers")[3].style.width="";
    </script>

     

    I hope this helps you.

  • Profile Image

    Answered by SJAtraining on August 16, 2012 at 04:04 PM

    Hi Jeanette,

    Yes, the support here has been amazing and I absolutely appreciate it.  Knowing where to find the elements in the source code will save me from bothering you every time I need to create a new form.

    I tried the code you posted and it didn't resolve the problem, but I was reading through the source code and I think it's the headers width that I'm having issue with, and it looks like Javierf just posed a solution to that so I'm good!  

    Thanks for your help!

  • Profile Image

    Answered by jeanettebmz on August 16, 2012 at 04:11 PM

    @SJAtraining 

    Like I said I was not sure which element you wanted to change, I just wanted to ilustrate you on how to look for the elements into a form's source code. So  I am very happy to know the guide was of a help in some way.

    @Javierf,  I thank you very much for your input on this thread!

    Cheers!

  • Profile Image

    Answered by CSWA on May 18, 2013 at 02:40 PM

    is there a way to format multiple matrixes, for example... execpt this snippet isn't working. 

    #id_4 #id_7 .form-matrix-row-headers +.form-matrix-values .form-textbox {
    width: 100px;
    border-style: solid;
    border-width: 1px;

  • Profile Image
    JotForm Support

    Answered by abajan on May 18, 2013 at 03:39 PM

    @CSWA

    In which of your forms is that snippet of CSS injected? It has a couple of errors but providing the best solution would require our seeing the form. (The name of the form should suffice.)

    Without knowing which form it is, the best I can tell you is that if the rule is to affect the appearance of more than one matrix, its selector should not contain any IDs because there can only be a single occurence of any ID in a page. Also, the way our forms are constructed, id_4 would be the ID of the list item that is the parent element of one field and id_7 would be that of a sibling list item contaning another field. In other words, they would both be at the same hierarchical level. The selector in your snippet is targeting a field (id_7) as a descendant of another (id_4) which is incorrect. Lastly, if that snippet contains the entire rule, it's missing the closing brace (curly bracket).

    Thanks

  • Profile Image

    Answered by CSWA on May 18, 2013 at 04:02 PM

    Abajan,

    http://form.jotform.us/form/31148810099152

    It's just a sample form but I basically want a group of matrixes to look one way and another group to look another way. Will I need to define for every matrix or is there a better way?

     

    /* 1st column */
    #id_27 .form-matrix-row-headers +.form-matrix-values .form-textbox {
    width: 100px;
    border-style: solid;
    border-width: 1px;
    }/* 2nd Column */
    #id_27 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    }/* 3rd Column */
    #id_27 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 300px;
    border-style: solid;
    border-width: 1px;
    }

    /* 1st column */
    #id_26 .form-matrix-row-headers +.form-matrix-values .form-textbox {
    width: 300px;
    border-style: solid;
    border-width: 1px;
    }/* 2nd Column */
    #id_26 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    }/* 3rd Column */
    #id_26 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    }

    /* 1st column */
    #id_45 .form-matrix-row-headers +.form-matrix-values .form-textbox {
    width: 300px;
    border-style: solid;
    border-width: 1px;
    }/* 2nd Column */
    #id_45 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    }/* 3rd Column */
    #id_45 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    }


  • Profile Image
    JotForm Support

    Answered by abajan on May 18, 2013 at 07:35 PM

    @CSWA

    Here's a clone of that form. A copy of its injected CSS (seen in the source of the page) follows:

    /* 1st column of 1st matrix */
    #id_27 .form-matrix-row-headers +.form-matrix-values .form-textbox {
    width: 100px;
    border-style: solid;
    border-width: 1px;
    }

    /* 2nd Column of 1st matrix */
    #id_27 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    }

    /* 3rd Column of 1st matrix */
    #id_27 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {
    width: 300px;
    border-style: solid;
    border-width: 1px;
    }

    /* The rules below style all matrices but the 1st */

    /* 1st column of 2nd and 3rd matrix */
    .form-matrix-row-headers +.form-matrix-values .form-textbox {
    width: 200px;
    border-style: solid;
    border-width: 1px;
    }

    /* 2nd Column of 2nd and 3rd matrix */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox {
    width: 150px;
    border-style: solid;
    border-width: 1px;
    }

    /* 3rd Column of 2nd and 3rd matrix */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {
    width: 150px;
    border-style: solid;
    border-width: 1px;
    }

    Even though the form has three matrices (matrixes), they're only two sets of rules. That's because the second set of rules style both the second and third matrices. Were more matrices to be added to the form, they would all be styled by the second set of rules.

    Notice how the selectors in the first set of rules all start with #id_27. This ensures that those rules target the elements in the first matrix only because id_27 is the ID of that matrix. It's all about specificity. Note how the value of the first declaration (highlighted in red) of each of those rules is different to the equivalent values (highlighted in blue) in the second set of rules.

    Please let us know if you need further help with this.

    How to find out the ID of a field

    Rules, selectors, declarations, properties and values?!

  • Profile Image
    JotForm Support

    Answered by abajan on May 18, 2013 at 07:38 PM

    This link may also be helpful.

  • Profile Image

    Answered by CSWA on May 19, 2013 at 03:05 PM

    abajan, thanks for your response and I understand your response but my question is still not answered. What if there were 9 matrices. Three have style A, three have style B and three have style C. What is the best way to achieve this? With three sets of rules, the last being the default? How do you target three IDs in the same ruleset? thanks!

  • Profile Image

    Answered by jefreylandicho on May 19, 2013 at 03:30 PM

    You can use comma to separate and target multiple ID's  e.g.

    #element_one, #element_two, #element_three { /* style code */}

    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox.form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox

    width: 150px; border-style: solid; border-width: 1px; }


  • Profile Image
    JotForm Support

    Answered by abajan on May 19, 2013 at 06:23 PM

    @CSWA

    Just to clarify my colleague's point, have a look at this clone of my last form. This is the CSS that styles its matrices. Be careful not to put a comma after the last section of each rule's selector. Otherwise it will break the CSS. Here are some other gotchas.

    Please let us know if you need further help with this.