How to adjust layout of Ticket Purchases widget?

I am using a ticket sales widget and I have a number of sessions and I would like some customized formatting in it.

is there anyway to do some advanced type of formatting with lines and/or bold and still maintaining the count amounts.

Mainly I want to have the title and teacher stand out a bit more from the class description

I've attached example class titles, teacher and description, along with what I have now in the form.

Hi ewaldal,

Thanks for reaching out to Jotform Support. Unfortunately, it's not yet possible to format the options of the Ticket Purchases widget. In the meantime, you may consider creating your table with the Paragraph field, and add codes that match with the options in your Ticket Purchases widget. Let me show you how:

1. In Form Builder, click on the Add Element button on the left, and select the Paragraph field.
2. Next, click on the Pen icon next to the Paragraph field, and click on the Table option in the toolbar.
3. Select your preferred cell layout, and then drag the table's corner to increase its size.
4. Enter your values within the cells and click on the Check icon on the right.
5. Now, click on the Ticket Purchases widget, and on the Wand icon next to it.
6. Configure the options to match with the codes in your paragraph field and click on the Update button on the bototm right corner of the page.
   

This way, you'll be able to preserve your table layout, while allowing users to match the rows with your ticket purchases widget.

Reach out again if you need any help.

This will not work because I have 12 different sessions and users would have to scroll up and down to see.

So there is no other way to format the ticket option directly?

Hi Emily,

In this case we can add a text to each option using custom CSS code. Check out the steps and screencast below to see how to add the custom CSS to your widget:

1. First, copy this code:

li:nth-child(1) label.checkbox:before {

    content: "1. Teacher Name here";

    font-weight: 700;

}

li:nth-child(2) label.checkbox:before {

    content: "2. Teacher Name here";

    font-weight: 700;

}

2. Open your form in Form Builder, scroll down, and select the Line Checkbox widget.

3. Click on the Wand icon on the right side of the widget to open Widget Settings.

4. Under the Custom CSS tab, paste the code into the CSS Code box.

Here's the cloned version of the form that you can test.

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