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 can we decrease the spaces between fields?

    Asked by swapna_summit on April 18, 2016 at 10:12 AM

    Hi, 

     

    We are trying to make a set of fields look like a matrix and this is because we want to be able to present different field types together. 

     

    We have looked at the configurable list but unless this can be configured further to be made neater, we would like to look at CSS code to inject into single drop downs / text boxes to be able to align them next to / under each other.

     

    The reason for this is that we want to be able to present different field types and int he case of the drop down - different options for each question in a sense, 

     

    Can you help?

     

    Thanks,

    decrease css code next different text boxes
  • Profile Image

    Answered by victor on April 18, 2016 at 12:16 PM

    I have just reviewed your form and noticed that you have been playing around with various fields. To assist you better can you please indicate exactly what you wish to accomplish. If you can explain the type of fields you would like to add in the matrix.

    We will be glad to assist you creating CSS to create the matrix you are looking for.

  • Profile Image

    Answered by swapna_summit on April 20, 2016 at 10:17 AM

    Hi, 

     

    thanks you for your response, 

    I have outlined the 2 types of matrices I would like to create, 

    The first one:

    - there would be a series of static text fields and static numeric fields. where we have indicated 'fillable' is where the user will input a numeric value.

    - the calculated column - for each line item would just have the value then of whats filled in the orange block, the Total score bock, next to 600, would have to be a calculated field.

    we are happy if the calculated score portion is a separate field but below, looking like it is a part of the matrix.

     

    The second one: 

    As the headers state again, there would be text fields (static), the fillable would be a drop down of numbers 1 - 5, others with numbers -5,0,5, then a separate matrix with free text, 3 columns for the user to input,

    the total column under fillable (30) would also have to be a calculated field,

     

    Please see the image screenshot below, I hope these are specified clearly, 

     

    your help would be greatly appreciated, 

     

    Thanks, 

  • Profile Image
    JotForm Support

    Answered by Charlie on April 20, 2016 at 11:53 AM

    Unfortunately, the matrix field can only handle one type of input. It cannot be a mixed of number field, drop down, calculations, etc... 

    However, the matrix field can be used in form calculation, you can learn more about it in this guide: https://www.jotform.com/help/343-How-to-Perform-Form-Calculation-in-the-Matrix-Field 

    Another possible thing that you can use is the configurable list widget, here's a guide about it: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget. It allows you mix different input types in a row like manner. But unfortunately, this widget does not allow calculations. 

    Perhaps the Spreadsheet widget would work for you? Here's a link to it: https://widgets.jotform.com/widget/spreadsheet. You can do calculations on it, although you cannot setup input types on each cell or column.

    I hope that helps.

  • Profile Image

    Answered by swapna_summit on April 21, 2016 at 02:24 AM

    Hi, 

     

    If you followed carefully my threads above, you will see that i am well aware that the matrices only allow one type pf input, 

    My request is for some CSS code to be able to ALIGN matrices up next to each other to make them look like one - or as closest as possible, 

     

    As I said, the configurable list would be good, but needs to be formatted more elegantly, 

     

    I will look into the calculations, and into the spreadsheet widgets, 

     

    it will be great if you could assist with possible code to make the matrices show up close next to each other, 

     

    Thanks,

  • Profile Image
    JotForm Support

    Answered by BJoanna on April 21, 2016 at 03:25 AM

    Please provide us ID of the form you are working on and we will help you to position your matrix tables with CSS code. 

    Also here is a demo form I made, with spreadsheet widget, of the first table you provided:

    https://form.jotform.com/61111308959960 

    Feel free to test it and clone it.

    Looking forward to your reply.

  • Profile Image

    Answered by swapna_summit on April 21, 2016 at 07:51 AM

    how do I decrease space between textbox fields vertically?

  • Profile Image

    Answered by swapna_summit on April 21, 2016 at 07:52 AM

    The form im working with https://form.myjotform.com/61083823492558

  • Profile Image
    JotForm Support

    Answered by Charlie on April 21, 2016 at 09:30 AM

    Are you referring to individual text boxes or the ones in the matrix field?

    There are a lot of things going on your form and not sure what text boxes you are referring to:

     

    In your Form Designer Tool, you can click on a text box and adjust its height and padding. 

    You can also check the "Line Layout" section where you can adjust the spacing of the fields.

     

    You also have errors in your CSS code, you have type important!; instead of !important;

     

    If you wish to have the vertical spaces of your text boxes in the matrix field to be narrower or smaller, like on this screenshot:

    If that's what you would like to do, you can use this custom CSS code:

    td.form-matrix-values {

        padding : 0 0 !important;

        border: none !important;

    }

     

    I would also like to suggest that you open separate threads for the other concerns that you have, that would help us avoid confusion and for us to better assist you. Thank you.

  • Profile Image

    Answered by swapna_summit on April 21, 2016 at 10:37 AM

    Hi, 

     

    Thanks for this, 

     

    Please try and understand from our point that we are working on one form, as much as we may want to open different threads, our queries are not far off related. 

     

    Thank you for your help, 

     

    I will try as requested, 

     

    Im sure that if you looked at the form, you woud gather that the matrices 'hanging in the air' look like what I am trying to achieve, 

     

    Yes, it would be the 3 single textboxes on their own, 

     

    I have corrected my CSS errors since and will try the code you have highlighted in green

     

    Thanks, 

  • Profile Image
    JotForm Support

    Answered by BJoanna on April 21, 2016 at 12:05 PM

    I have inspected your form and matrix tables on your form look like this now. 

    I saw that you added custom CSS codes to style them. I also saw that you did not add CSS code my colleague provided you. Please try it and let us know if you need further assistance. 

  • Profile Image

    Answered by swapna_summit on April 22, 2016 at 09:07 AM

    Hi, 

     

    Thanks for the code, it was not what we are looking for, 

    However, 

    I have three matrices below - as from my form, 

    the second and third ones - 

     

    Red:

    We want to be able to use the column - if its possible to only e.g. show the first column from a matrix with the header - obviously with no padding so they are next to each other

     

    We also want to get rid of that grey block in the top corner

     

    Blue: 

    is it possible to use only the row names and hide  / delete the columns?

     

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by Charlie on April 22, 2016 at 10:34 AM

    For the looks of it, it seems like you have already merged the two matrix fields that you have. You have also removed the column headers. Here's how it looks like in your test form:

     

    The second matrix has 4 columns, based from your last reply you wish to remove all the columns on it and leave the 1st column only? The one with the question rows?

    Now regarding the one circled in "Blue", you wanted to remove the textbox fields and just want to display the 1st column which shows "Absolute", "Rating", "Absolute", "Rating"? I am not really sure what is the purpose of it. If you wish to remove the input fields in the 3rd matrix field then that is possible using this custom CSS code:

    #cid_45 > table > tbody > tr > td {

        display: none !important;

    }

     

     

    This is how it will look like:

    Let us know if that will work for you.

  • Profile Image

    Answered by swapna_summit on April 25, 2016 at 03:01 AM

    Hi Charlie, 

     

    Thank you for your help, 

     

    Thats correct, in the meant i found a way to do some of the stuff i needed, 

     

    Regarding the column (row questions) with Absolute.... etc, i want to use the row questions only - as they go in line very well with the others, the same for where I have 'Y Y N N'  -i want to have these next to each other.

     

    what happens is when i save the form  and come back in , these matrices automatically get the columns back again (e.g when i click on the columns button, the options for 'very satisfied, etc' come up). Thanks for the code, I will try it,

     

    I do have a further question but will get back to you later on that, 

     

    Thanks, 

     

     

  • Profile Image

    Answered by swapna_summit on April 25, 2016 at 06:20 AM

    how do we disable the matrix labels ?

    like below - so we can place the matrices directly under each other?

  • Profile Image
    JotForm Support

    Answered by Welvin on April 25, 2016 at 08:33 AM

    You have to add a placeholder in each header depending on the number of rows/columns that you will add in the matrix. You can then just hide it by adding a custom CSS codes in the form. I just checked your form and it seems you did this already.

    With regards to the adjustment in the spacing between matrix fields, just add the following custom CSS codes:

    li#id_52,

    li#id_53,

    li#id_54,

    li#id_55,

    li#id_56,

    li#id_57 {

    margin-top: -36px;

    }

     

  • Profile Image
    JotForm Support

    Answered by Welvin on April 25, 2016 at 08:38 AM

    I'm sorry, the CSS codes works, but the alignments are off when I saved the form. I think you're also getting this issue. I'm now adding a few CSS codes to fix the alignment.

  • Profile Image
    JotForm Support

    Answered by Welvin on April 25, 2016 at 08:49 AM

    A little adjustment to the previous codes and then a few more for the matrix alignments. Overall, here are the correct codes to add:

    li#id_52, li#id_53, li#id_54, li#id_55, li#id_56, li#id_57 {

        margin-top: -42px;

    }

    li#id_45, li#id_49, li#id_41 {

        margin-left: -231px;

    }

    li#id_47 {

        margin-left: -138px;

    }

    li#id_54, li#id_55, li#id_56 {

        margin-left: -231px;

    }

    li#id_57 {

        margin-left: -138px;

    }

    Here's a cloned version of your form showing the changes: https://form.jotform.com/61153564225956

  • Profile Image

    Answered by swapna_summit on April 25, 2016 at 10:47 AM

    Thanks very much, works great! trying to remove the hover background

    is it possible?

  • Profile Image
    JotForm Support

    Answered by Welvin on April 25, 2016 at 12:04 PM

    To remove the highlight for the matrix fields, add these codes:

    [data-type="control_matrix"].form-line-active {

    background: none !important;

    }

     

    Remove [data-type="control_matrix"] if you wish to remove the highlight for all fields. 

  • Profile Image

    Answered by swapna_summit on April 26, 2016 at 03:23 AM

    Hi Welvin, 

    Thank you for this, 

     

    it seems to have worked, 

     

    Just to put you in a bigger picture, 

     

    Im going to have a lot more matrices like this that im going to be joining up, 

     

    in some cases it could even be a one line inbetween..

     

    I have found a new problem....

     

    if you look where the matrix splits e.g. between d and a - i am unable to select that dropdown or the textboxes - i think its coz the matrix "outline?" seems to block this, 

     

    can you help?

  • Profile Image

    Answered by swapna_summit on April 26, 2016 at 04:27 AM

    Another thing, 

    im trying to get labels to work on the top most set of matrices,

    the alignment goes off and i expect that, how best could i format this? they have to be in line with the "column" but then the alignment of the label and then of the matrix goes off

     

    Please help, 

     

    Thanks,

  • Profile Image
    JotForm Support

    Answered by Charlie on April 26, 2016 at 05:03 AM

    Personally and honestly speaking, I believe this is not the best way to redesign your form. You are repositioning the matrix fields to look like one big matrix and some of the text boxes are hidden, some overlaps the labels, etc... Most of the time, you'll encounter problems like it is not mobile responsive, it shows completely different on mobile devices, the actual submission output shows a lot of empty cells that doesn't really hold any value because they are hidden, and some more. 

    Other disadvantages is that this is hard to maintain, if you want to add a new matrix field or redesign the form, you'll most likely to break the CSS code and redesign it again.

    As an example, and you have already noticed it, the last row drop down field in the first matrix table is not clickable. This is because the matrix table below it is overlapping and they are too close. Here's a screenshot:

     

    This happens because by default, the matrix field will always have a table row for the column headers, that's the one overlapping the letter "d)" option in your top matrix.

    We can hide the table row for the headers however, the table itself has a height good for the specific number or rows that the matrix field that it has. We can try looking for a CSS code for this, but if you are planning to design or join more matrix fields, then I believe problems will continue to arise. The best approach that I think of is for you to download the full source code, and redesign the matrix tables there. But you might need to hire a developer to make sure that the source code will still work after customizing it.

  • Profile Image

    Answered by swapna_summit on April 26, 2016 at 05:13 AM

    Hi Charlie, 

     

    Thank you very much for your response, 

     

    I do understand that we are trying to achieve much here, 

     

    We would also need this to be optimised for mobile so thank you for pointing this out to me, 

  • Profile Image

    Answered by swapna_summit on April 26, 2016 at 05:18 AM

    What I would like to then find out is a more simpler approach being: 

     

    1. The possibility of us customising columns in a matrix to be read only (text we can set)

    2. Being able to colour certain columns in a matrix which I assume is possible, 

     

    This would simplify things for us in that having 

    a) simpler css code

    b) lesser, less complicated matrices which im sure would be more optimised for mobile?

     

    Please let us know your thoughts?

  • Profile Image
    JotForm Support

    Answered by Charlie on April 26, 2016 at 05:20 AM

    I cloned my colleague's form and made some edits on it regarding the overlapping of fields: https://form.jotform.com/61161626321951. However, the labels on the top of your matrix fields will not show because you already have another CSS code that totally hides them. Here's one:

     

    Now if you remove that CSS code, you can setup a label in the matrix field, however, that will also break the initial alignment that you have in your matrices. This means you then need to adjust the values of your CSS code for the alignment to work.

    As mentioned earlier, for this to work, it would be best to come up with a mockup design, finalize it, then find the best approach that will work for you.

  • Profile Image
    JotForm Support

    Answered by Charlie on April 26, 2016 at 05:26 AM

    1. The possibility of us customising columns in a matrix to be read only (text we can set)

    This one is tricky but I believe it is possible. If you would like to set a text box with a text on it BUT is read-only. Please note that one matrix field can only have ONE type of input. This is the limitation mentioned in the earlier part of this discussion and a thing that you need to consider. I mentioned this because your matrices have a combination of drop down and text boxes.

    2. Being able to colour certain columns in a matrix which I assume is possible, 

    Coloring specific columns should not be a problem. This can simply be done by CSS code.

     

    If those are the changes that you would like to implement on the matrix fields, and not really joining them, then I believe it is possible. Could you share us a sample matrix table that with those changes? I understand that you have already shared to us different forms but I am not sure what is the final design or contents of it. If you could share us a sample matrix table for the two changes you mentioned above, then we'll try to give you a more comprehensive solution for it.

    Thank you for your cooperation.

  • Profile Image

    Answered by swapna_summit on April 26, 2016 at 06:23 AM

    Hi Charlie

    RE: your first response, i totally understand the conflicts, I had been taking the code off n on to check, but since we are using a different approach, please see my response to the latest reply above:

     

    I have cloned my form - removed all CSS and the matrices and added a new matrix, please see explanation of fields: 

    This is one type of matrix we are trying to create:

    ALL fields will be TEXT

    1. Input Text - user will enter a score from -5 to 5

    2. Read Default - this will be 5 - default and read only

    3. Read Default - this will be either "Absolute / Rating" - default and read only

    4. Read Default - "Y" or "N" - default and read only

    5. Input Text - user will enter a person's name

    6. Input Text - user will enter comments - setting this field wider wont be a problem

    7. Input Text - user will enter date (we are happy with free text)

     

    link below: 

    https://form.myjotform.com/61162492939564 

     

    Please be informed that we will have about 13 matrices like this - varying in number of questions but with the same layout

     

    The second matrix is a similar story

    1. Read Default - "100" or "1"

    2. Input Text - user enters values

    3. Read Default - default read only "100"

    4. Read Calculated? - I will get back on this its either going to be what the user enters in column 2 or user enters a value again.

     

    The total fields work fine, I would just have to along them up and int eh second matrix, add another text box with a default read only value of the total possible score next to the calculated score.

     

    Please inform us of your thoughts, 

     

    Thanks you very much, 

  • Profile Image
    JotForm Support

    Answered by Welvin on April 26, 2016 at 08:13 AM

    Unfortunately, adding a content into the input boxes using a custom CSS codes is not possible. The best way to accomplish everything in the matrix would be to use get the source codes and do the modifications there. But as originally mentioned by Charlie, finalize the form first, add all the needed fields in the form then add the styles if you wish using the designer. You can also apply a theme from the theme store.

    For the mobile responsiveness, I think we can deal with it later on.

  • Profile Image

    Answered by swapna_summit on April 26, 2016 at 10:50 AM

    This is a very tough one for us, 

     

    Sorry, im looking for all possible solutions here.. 

     

    is it then possible for us to configure the configurable list any further to get it to look like the matrix we want to build (a)

     

    can we configure the configurable list in our matrix (containing Static Text) to fit in place of where we have "5" "Aboslute" "Y/N" - in this case, we could have the first matrix with just one column - free text, the configurable list carrying all the static text and then a final matrix with 3 columns for further free text

     

    Please inform us?

     

  • Profile Image
    JotForm Support

    Answered by Welvin on April 26, 2016 at 11:24 AM

    With configurable list widget, you can specify different types of input in each column. But there are still issues that you'll encounter. For example, you cannot have a different static text in each row. Well, you can add a custom CSS codes to hide the static texts and replace it with something else, but the end result (email, submissions page) will still show the original text. 

    You cannot have a default value for the textbox input so you'll be using a dropdown in order to do this in the configurable list widget.

    I'm not really saying that it's not possible, but would require a workaround to change some properties in the field. 

    This is an example form: https://form.jotform.com/61164572485965

    You have to decide what to use. Both should work, but modifications are required to fully accomplish everything. 

  • Profile Image

    Answered by swapna_summit on April 28, 2016 at 06:12 AM

    Hi, 

    Thanks for this, the form is unfortunately not found, 

     

    I understand the workaround and am trying to find any possible solution here.

     

    Will the spreadsheet widget then accomplish what I am trying to achieve?

    I am happy to open a separate thread for this if required - but I would need to customise to achieve what im trying to as per the matrices above, is it at all possible?

     

    Please help, 

  • Profile Image
    JotForm Support

    Answered by Welvin on April 28, 2016 at 07:55 AM

    The form is up. Can you check again?

    Yes, we can try the spreadsheet widget. I think it's easier to setup the default input as well the read only using this widget.

    I've created this test form: https://form.jotform.com/61183475597972. Further adjustments are possible, styles using CSS codes. 

    With spreadsheet widget, a calculation is also possible. 

  • Profile Image
    JotForm Support

    Answered by Welvin on April 28, 2016 at 08:02 AM

    By the way, I'd suggest creating a new thread for this form. The instructions are in the widget configuration. If you have some questions, add it in the new thread.