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 Single Character Grid

    Asked by stevebenthal on November 20, 2015 at 11:25 AM

    Hi

    I need to create a grid that is 3 rows and 15 columns that will only hold 1 text character each

    I've tried the matrix and the configurable list but I can't get those narrow enough.

    SAMPLE

     

     

    ALSO, I have to allow them to select images.  I could just display them and have them pick a number on the dropdown, or is there a way to put images in a dropdown or other selection method?

     

    character JotForm style uploads jpg
  • Profile Image
    JotForm Support

    Answered by BJoanna on November 20, 2015 at 12:37 PM

    Thank you for contacting us.

    Is this the form you are working on http://www.jotform.com/53234698230961?

    I saw that you have matrix table inside and that is too long. It is possible to change the width of matrix fields by Injecting Custom CSS. 

    Here is my demo form where I added custom CSS code: https://form.jotform.com/53235246233954? Feel free to clone it

    My matrix table looks like this.

    I have moved your other question to separate thread and we will provide you an answer there shortly. http://www.jotform.com/answers/708852 

  • Profile Image

    Answered by stevebenthal on November 20, 2015 at 07:14 PM

    Thank you!

    Where is the custom CSS in case I need to adjust it further? I need another one that has 20 Columns. 

    See how it is truncating on the webpage? http://olishrine.org/memorial-plaza-bricks/

    The form is "Shrine Brick Form"

    Also is there a way to limit so only 1 value (character)can be entered per box?

    Steve

  • Profile Image
    JotForm Support

    Answered by Kevin_G on November 20, 2015 at 09:34 PM

    Hi,

    You will find the CSS code provided by my collegue on this link :

    http://pastebin.com/Qj9d3xic

    Also is there a way to limit so only 1 value (character)can be entered per box?

    Unfortunately, there is no way to limit the number of characters per Textbox,you must specify to the user to type only one character.

    Let us know if you need more help.

    Thanks.

  • Profile Image

    Answered by stevebenthal on November 20, 2015 at 11:03 PM

    Is there a way for me to change the width from 30px to 10px or do you have to do it?

    Thanks,

    Steve

  • Profile Image
    JotForm Support

    Answered by KadeJM on November 21, 2015 at 03:05 PM

    Yes, you can certainly do that yourself if you want.

    Just edit the 30px value in the CSS before you inject it and change it to 10px then add it again which will apply the width changes you are requesting.

     

    From: 

    width : 30px!important;

     

    To:

    width : 10px!important;

  • Profile Image

    Answered by stevebenthal on November 22, 2015 at 02:09 PM

    Hi,

    SHRINE BRICK FORM

    I realized the CSS is in the Design area so I did fix the width, but I had to add 5 more columns (16-20) and I can't seem to get the css correct so they are also 10px wide like 1-15.

    Can you please help.

    Thanks,

    Steve

    PS I also noticed that the "Form Collapse" won't open in design mode. You need to delete it to see your full form in Designer.

     

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 22, 2015 at 04:29 PM

    Please inject the following CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

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

    width : 10px!important;

    }

     

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

    width : 10px!important;

    }

     

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

    width : 10px!important;

    }

     

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

    width : 10px!important;

    }

     

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

    width : 10px!important;

    }

    Here is my cloned version: https://form.jotform.com/53256528668972?

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

    On regards of the Form Collapse no opening when form is loaded in the Form Designer, I have reported it here on this thread: http://www.jotform.com/answers/709788

    If you need anything else please open a new thread, we will be glad to assist you.

  • Profile Image

    Answered by stevebenthal on November 22, 2015 at 04:33 PM

    Thanks!