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

    Need your advice on formatting matrix fields.

    Asked by max123jot on September 14, 2016 at 02:25 PM

    i am getting quite close to being done w getting my template form perfect - need you advice on formatting fields

     

    how do i change the background colors of the fields to make the input of data more intuitive

    for example for field Resident: Global Surgery Skills (1-4)

    ==

    how to change the code so that 

    Resident: Global Surgery Skills (1-4)  and Attending: Global Surgery Skills (1-4)

    are side by side

    ===

    what is the code to get fields like

    Resident: skill level I showed

    have the text on one line

     

    ==

    field PGY  to be to the right of the name field it is now on top of

     

    thanks

    max

    Page URL:
    https://form.jotform.com/62506852172152

    template name thanks side by side
  • Profile Image
    JotForm Support

    Answered by david on September 14, 2016 at 03:54 PM

    You will have to inject the following custom CSS codes to your form to change the colors/widths:

    For the Row Header background and border:

    .form-matrix-row-headers {

        border: 1px solid #f5f5f5 !important;

        background: #589F76 !important;

        color: #F5F5F5 !important;

    }

     

    For the Column Header background and border:

    .form-matrix-column-headers {

        border: 1px solid #f5f5f5 !important;

        background: #589F76 !important;

        min-width: 70px !important;

        color: #F5F5F5 !important;

    }

     

    For the radio button background and border:

    .form-matrix-values {

        border: 1px solid #f5f5f5 !important;

        background: #589F76 !important;

    }

     

    Here's how to inject the codes: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Adjust the colors to suit your needs.

  • Profile Image

    Answered by max123jot on September 16, 2016 at 11:46 AM
    works
    but what code to make the color
    Resident: Global Surgery Skills (1-4)
    diferent from
    attending Global Surgery Skills (1-4)
    max
    ...
  • Profile Image
    JotForm Support

    Answered by david on September 16, 2016 at 01:12 PM

    If you want to color them differently, you can add the following code to target those two fields by their ID:

    First two matrices:

    #cid_172 th.form-matrix-row-headers {
        border : 1px solid #f5f5f5 !important;
        background : blue !important;
        color : #F5F5F5 !important;
    }

    #cid_172 td.form-matrix-values {
        border : 1px solid #f5f5f5 !important;
        background : blue !important;
    }

    #cid_172 th.form-matrix-column-headers {
        border : 1px solid #f5f5f5 !important;
        background : blue !important;
        min-width : 70px !important;
        color : #F5F5F5 !important;
    }

    #cid_182 th.form-matrix-row-headers {
        border : 1px solid #f5f5f5 !important;
        background : #589F76 !important;
        color : #F5F5F5 !important;
    }

    #cid_182 td.form-matrix-values {
        border : 1px solid #f5f5f5 !important;
        background : #589F76 !important;
    }

    #cid_182 th.form-matrix-column-headers {
        border : 1px solid #f5f5f5 !important;
        background : #589F76 !important;
        min-width : 70px !important;
        color : #F5F5F5 !important;
    }

    Second two matrices:

    #cid_153 th.form-matrix-row-headers {
        border : 1px solid #f5f5f5 !important;
        background : blue !important;
        color : #F5F5F5 !important;
    }

    #cid_153 td.form-matrix-values {
        border : 1px solid #f5f5f5 !important;
        background : blue !important;
    }

    #cid_153 th.form-matrix-column-headers {
        border : 1px solid #f5f5f5 !important;
        background : blue !important;
        min-width : 70px !important;
        color : #F5F5F5 !important;
    }

    #cid_183 th.form-matrix-row-headers {
        border : 1px solid #f5f5f5 !important;
        background : #589F76 !important;
        color : #F5F5F5 !important;
    }

    #cid_183 td.form-matrix-values {
        border : 1px solid #f5f5f5 !important;
        background : #589F76 !important;
    }

    #cid_183 th.form-matrix-column-headers {
        border : 1px solid #f5f5f5 !important;
        background : #589F76 !important;
        min-width : 70px !important;
        color : #F5F5F5 !important;
    }

    Here is my test copy with the code added:

    https://form.jotform.com/62575724715967

     

     

  • Profile Image

    Answered by max123jot on September 17, 2016 at 10:46 AM
    your advice is clearly on target
    but i mis-spoke
    what i realize now, i was attempting to accomplish is to have "background"
    as a set for input fields
    resident fields bffbd2 pale green
    attending fields ccd2ce gray
    matrix would be just fine as white
    i think i messed it up and have been struggling with this for too long to
    get it right
    would you please guide me to accomplish the above goals
    also i was looking to have the fields
    such as
    Resident: % case I did
    ...
  • Profile Image
    JotForm Support

    Answered by Mike_G on September 17, 2016 at 03:10 PM

    Could you confirm if the image below correctly shows what you would like to happen to the style of the matrices in your form?

    If, in any case, I have misunderstood your concern, please feel free to get back to us with more details.

    Also, regarding the field "Resident: % case I did", what exactly would you like to happen to the style of that field?

    We will wait for your response. Thank you.

  • Profile Image

    Answered by max123jot on September 17, 2016 at 05:46 PM
    matrix fields to appear as in field
    resident self asses (top image)
    and background colors for fields
    resident fields bffbd2 pale green
    attending fields ccd2ce gray
    i think i messed it up and have been struggling with this for too long to
    get it right
    would you please guide me to accomplish the above goals
    also i was looking to have the fields %case , complexity, skill shown
    such as
    Resident: % case I did
    to be on "one line"
    and the back ground colors
    resident fields bffbd2 pale green
    attending fields ccd2ce gray
    thanks
    m
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on September 17, 2016 at 10:34 PM

    I apologize for I am having difficulty understanding your latest response/question.

    Can you please reiterate.

    Try numbering also what are needed so we can easily identify them.

    We will wait for your updated response.

     

  • Profile Image

    Answered by max123jot on September 18, 2016 at 12:46 AM
    Let's do one at a time
    matrix fields to appear as in field
    resident self asses (top image
    m
    ...
  • Profile Image
    JotForm Support

    Answered by Mike_G on September 18, 2016 at 02:46 AM

    I would like to apologize but, can you help us by further explaining what you mean by "matrix fields to appear as in field"?

    If you can explain it with the help of screenshots, then that would be greatly appreciated. To learn how to include screenshots in your replies here in the support forum, I suggest you check out this thread: How-to-include-screenshot-image-in-the-support-forum

    Thank you.

  • Profile Image

    Answered by max123jot on September 18, 2016 at 11:46 AM
    i think i am going to revise and lower my goals for this form as it appears
    my puter skills are less than needed
    i make a change somewhere, and something else is kilter
    so if you could please help me with the below
    i should be good to go
    tx
    m\
    Background for
    Resident: self-assess the global surgery skills you showed
    to appear also for
    Resident: self-assess the surgery skills you showed
    I don’t see these fields in designer
    Attending: show which of your assessments differ from those of your
    Resident's above
    Attending: show which of your assessments differ from those of your
    Resident's above
    Form boder on top is now gray steel color
    can we have this color be the same as rest of form
    Can I apply the same colors of
    Attending: show which of your assessments differ from those of your
    Resident's above
    Attending: show which of your assessments differ from those of your
    Resident's above
    ...
  • Profile Image
    JotForm Support

    Answered by BDAVID on September 18, 2016 at 02:59 PM

    Let me know if this is what you need:

     

    1) You want to apply the matrix field's background called "Resident: self-assess the global surgery skills you showed" on the matrix field called "Resident: self-assess the surgery skills you showed"

    If that is correct, please inject the following code:

    #cid_190 

        #cid_190 th.form-matrix-row-headers {

        border : 1px solid #bffbd2 !important;

        background : green !important;

        color : #Fbffbd2 !important;

    }

     

    #cid_190 td.form-matrix-values {

        border : 1px solid #f5f5f5 !important;

        background : green !important;

        color : #93d76b;

    }

     

    #cid_190 th.form-matrix-column-headers {

        border : 1px solid #bffbd2 !important;

        background : green !important;

        min-width : 70px !important;

        color : #bffbd2 !important;

    }

     

    #label_190 {

        background : #d3fcba;

    }

     

    #cid_190 {

        background : #d3fcba;

    }

    Result:

     

    2) Are you wondering why the fields called,

    -Attending: show which of your assessments differ from those of your Resident's above

    and

    -Attending: show which of your assessments differ from those of your Resident's above

    are not showing in the designer?

    If you are, the reason is the conditions you have setup. The fields are conditioned to show if certain selection is made, otherwise, they will remain hidden.

    If you need to style these fields, you first need to temporally disable the conditions, in that way the fields will show in the designer:

    After you are done styling, you can enable the conditions again.

     

    3) I believe you want to remove the grey color at the top of your form:

    Please inject the following code:

    .form-all{

        background: #c7f2cf !important;

    }

    Result:

     

    4) The fields called,

    -Attending: show which of your assessments differ from those of your Resident's above

    and

    -Attending: show which of your assessments differ from those of your Resident's above

    appear to have the same style.

    Do you want them to have the same style as the fields called:

    -"Resident: self-assess the global surgery skills you showed"

    and

    "Resident: self-assess the surgery skills you showed"?

     

    Here is my version of your form with the applied changes: https://form.jotform.com/62615582749971 

    You may clone it if you want to: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Hope this helps.

  • Profile Image

    Answered by max123jot on September 18, 2016 at 05:46 PM
    you guys respond fast
    but, i need this soon done, so i tried again and have the form closer (not
    sure why some of the features are working now, and not before)
    i will leave this form alone until i hear back from you
    would you please advise:
    the -2- field labels Attending: show which of your assessments differ from
    those of your Resident's above
    #input _187
    #input _188
    have the same background color as the background color of the form (mint
    green)
    AND
    Resident: self-assess the global surgery skills you showed
    input 172
    (this one looks correct in builder but not designer)
    Resident: self-assess the surgery skills you showed
    input 190
    show the same background color as the text labels for those fields (pale
    green)
    AND
    pale green background colors for
    #input_174 & #input_180
    i was able to have this viewed in designer correctly, but does not show up
    that way in builder
    thanks for your patience
    m
    ...
  • Profile Image
    JotForm Support

    Answered by BDAVID on September 18, 2016 at 06:50 PM

    I am sorry, but I am having a hard time understanding what you need. Please upload screenshots to point out what you need to accomplish. 

    1) Load the link of this thread in your browser: https://www.jotform.com/answers/932301 

    2) Upload the screenshots where you have pointed out the changes  you need to make: https://www.jotform.com/answers/414264-How-to-include-screenshot-image-in-the-support-forum 

  • Profile Image

    Answered by max123jot on September 18, 2016 at 07:46 PM
    Please re-read my email
    I've given you the input fields and the desire to effect
    pls state what's confusing thanks
    m
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on September 18, 2016 at 09:36 PM

    If I understand correctly, you want the field titled " Attending: show which of your assessments differ from those of your Resident's above" to have a background color of mint green (same color as form)? If that is so, please inject the custom css below:

    #cid_187, #label_187 {

        background: #c7f2cf !important;

    }

    #cid_188, #label_188 {

        background: #c7f2cf !important;

    }

    Then you want the field titled "Resident: self-assess the global surgery skills you showed" to have the background color to be the same pale green color as the labels inside the matrix. Please inject the code below:

    #cid_190, #label_190 {

        background: #589F76 !important;

    }

    #cid_172, #label_172 {

        background: #589F76 !important;

    }

    And you want the fields 174 and 180 to have pale green color. Inject the codes below to achieve this.

    #cid_174, #label_174 {

        background: #589F76 !important;

        width: 210px;

     

    }

    #cid_180, #label_180 {

        background: #589F76 !important;

        width: 210px;

     

    }

    If you need to change the colors for any of the fields mentioned above, simply replace the yellow highlighted text in the code provided with the color that you want to show.

    If you need further modifications or adjustments made, please let us know. Regards.

  • Profile Image

    Answered by max123jot on September 19, 2016 at 08:46 AM
    thanks
    w your suggestions and a few keystrokes on my part i got this done in 10min
    and makes me feel silly to have wasted so much time with this.
    you may want to consder a seperate layer of customer support w live chat
    (would be glad to pay for the option) for people like me with some skills
    for puters, but web lingo is a different beast
    thanks
    m
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on September 19, 2016 at 09:30 AM

    Hi,

    Glad to hear you had this done. You are welcome and thanks for your suggestion. Actually, we do also sometimes activate chat support but we spend more time in answering threads in this forum. The advantage of this is that we can organize our answers in a way that can be easily followed by users.

    If you need further assistance, do let us know. 

    Regards.

  • Profile Image

    Answered by max123jot on September 19, 2016 at 10:46 AM
    Great
    So if I would like chat support for a future issue how would I initiate it?
    m
    ...
  • Profile Image
    JotForm Support

    Answered by david on September 19, 2016 at 11:50 AM

    We rarely open chat due to our forums being top priority.  If chat is open, there will be a pop-up on the JotForm site to initiate it.

  • Profile Image

    Answered by max123jot on September 19, 2016 at 12:46 PM
    ok
    m
    ...