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 i add text to a multi select grid

    Asked by Bavington on January 26, 2016 at 12:56 PM
    select add text how a
  • Profile Image
    JotForm Support

    Answered by david on January 26, 2016 at 04:13 PM

    I believe this thread contains the information you are looking for:

    http://www.jotform.com/answers/672435-Can-a-Multi-select-Grid-have-cell-text

    Both possible workarounds described within should be able to meet your requirements.

  • Profile Image

    Answered by Bavington on January 28, 2016 at 05:18 PM

    1. What are the steps for adding text to the multi-select grid widget , the link you provided only states it an option but there aren't any detail instruction on how to add text using CSS. pleases attach a link to those instructions or CSS Code.

    2. I am having difficulty following the instructions on how to add text to the Grid , i have attempted to follow the process right up to the conditional logic portion of the screen. I have attempted to duplicate the screenshot of the conditions wizard and can not seem to find that screen I keep getting the conditions screen but none of those screens allows for text , so please clarify if i am missing a step or if that screen has been removed ?

  • Profile Image
    JotForm Support

    Answered by david on January 28, 2016 at 07:10 PM

    For adding the text to the Grid, you need to target the specific grid location.  For example:

    #cid_3 > table > tbody > tr:nth-child(2) > td:nth-child(2):before {
        content : "January 1: Text Here";
    }

    Would target the table row 2, table column 2 and add the content "January 1: Text Here"

    To target the cell below it, you would use this code:

    #cid_3 > table > tbody > tr:nth-child(3) > td:nth-child(2):before {
        content : "January 2: Text Here";
    }

    Here would be the test form with that code added:

    https://form.jotform.com/60277125905960

    Similarly, in the custom CSS portion of the multi select grid, you can add this CSS:

    #tablegrid > tbody > tr:nth-child(2) > td:nth-child(2):after {
    content: "Text here";
    }

    Changing the the row/column number for each additional entry.