How to Add Fourth Column in Product List?

It seems on most jotform order page, there is only space for three products across. I would like to add a fourth. Is this possible? I would also like to remove the word "free" from the pricing.

Hi Sarah,

Thanks for reaching out to Jotform Support. You can make four columns on your product list field by injecting custom CSS codes in your form. Let me show you how to do it:

1. First, copy this code:

/* Make product list flex and wrap items */

.form-product-item.new_ui {

  width: 24% !important; /* 4 per row, with some margin */

  margin: 0.5% !important;

  display: inline-block;

  vertical-align: top;

}

/* Ensure the container behaves as a grid */

.product-container-wrapper {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

/* Optional: Tidy up alignment and spacing */

.form-product-item-detail.new_ui {

  height: 100%;

  box-sizing: border-box;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's the sample screenshot result after injecting custom CSS codes:

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

That is perfect! Exactly what I needed!

Could you help me with that?

Hi Sarah,

I moved your other question to another thread. You can check it out here.

Let us know if you have any other questions.

Okay, this works in the editing window, but when I preview the form 'live' it is still 3 across.

Hi Sarah,

I cloned and tested your form, using exactly the codes my colleague provided and I see in form's published mode that the columns are split into 4. Check out the screenshot below for my results:

Can you try it removing the existing codes in your form, and add it back exactly as how my colleague shared it and try it again?

Keep us updated and let us know how it goes.

It works! Amazing!

Hi Sarah,

As for your other question, I've moved that to a new thread. You can check that out here.

Let us know if you have any other questions.