Input Table: Adding images in the row headers

I need to add each of these images to a different row in the input table.

Hi Sergio,

Thanks for reaching out to Jotform Support. Unfortunately, there's no option to add images in the Input Table field. However, we can try a workaround for it. First, you need to split or cut the images, unless you want to show all of them in one cell.

We will try using custom CSS code to add the image in the Input Table cell. Here's what it looks like:

The image is a background image and the user can still fill out the field. Would that work for you? If yes, you need to upload it to any image uploader site. Copy the image link and share it with us.

Once we hear back from you, we'll be able to help you with this.

I need this image but in the rows that say "Service Quality" "Cleanliness"

Hi Sergio,

I've tried inserting an image in the row headers of the Input Table via copy and paste and HTML, but it didn't work. You can try using custom CSS as a workaround and apply a background image on each row header. Please take note that you'll need to create an image that has a similar height and width. You also need to upload the image and capture its direct link.

Here's an example of the custom CSS that you need to add in the Form Designer. We have a guide about How to Inject Custom CSS Codes that you can check out.

/* Putting background image in row headers - 25787601 */

.form-matrix-value-tr:nth-child(2) .form-matrix-row-headers {

background-image : url('https://jotform.claystructures.co/uploads/Jan_D/form_files/2025-04-02_23-31-52.67ed588847cf80.59965884.png') !important;

background-size : 100% 100%;

}



.form-matrix-value-tr:nth-child(3) .form-matrix-row-headers {

background-image : url('https://jotform.claystructures.co/uploads/Jan_D/form_files/2025-04-02_23-31-52.67ed588847cf80.59965884.png') !important;

background-size : 100% 100%;

}



.form-matrix-value-tr:nth-child(4) .form-matrix-row-headers {

background-image : url('https://jotform.claystructures.co/uploads/Jan_D/form_files/2025-04-02_23-31-52.67ed588847cf80.59965884.png') !important;

background-size : 100% 100%;

}



.form-matrix-value-tr:nth-child(5) .form-matrix-row-headers {

background-image : url('https://jotform.claystructures.co/uploads/Jan_D/form_files/2025-04-02_23-31-52.67ed588847cf80.59965884.png') !important;

background-size : 100% 100%;

}



/* code ends here */

You'll need to change the image URL depending on which image you would like to use. Here's a sample demo form wherein the custom CSS code above is applied:

Give it a try and let us know how it goes.

How do i get the image url?

When I put the code in it shows on both of these input tables but I just want it on the first one

Hi Sergio,

Are you working on this form? I've cloned it so I can create a custom CSS for it. For this specific form, you can replace the code I provided above so that only the first Input Table will have background images.

/* Putting background image in row headers - 25787601 */

#id_46 .form-matrix-value-tr:nth-child(2) .form-matrix-row-headers {

background-image : url('https://jotform.claystructures.co/uploads/Jan_D/form_files/2025-04-02_23-31-52.67ed588847cf80.59965884.png') !important;

background-size : 100% 100%;

}



#id_46 .form-matrix-value-tr:nth-child(3) .form-matrix-row-headers {

background-image : url('https://jotform.claystructures.co/uploads/Jan_D/form_files/2025-04-02_23-31-52.67ed588847cf80.59965884.png') !important;

background-size : 100% 100%;

}



#id_46 .form-matrix-value-tr:nth-child(4) .form-matrix-row-headers {

background-image : url('https://jotform.claystructures.co/uploads/Jan_D/form_files/2025-04-02_23-31-52.67ed588847cf80.59965884.png') !important;

background-size : 100% 100%;

}



#id_46 .form-matrix-value-tr:nth-child(5) .form-matrix-row-headers {

background-image : url('https://jotform.claystructures.co/uploads/Jan_D/form_files/2025-04-02_23-31-52.67ed588847cf80.59965884.png') !important;

background-size : 100% 100%;

}

/* code ends here */

Here's the result:

For the image URL, you can upload the image in the Form Builder so that it will be hosted on our server. After that, open the live form and copy the direct link of the image. You can also upload the images to your web server and grab the direct link.

Give it a try and let us know how it goes.