How to design Ticket widget?

  • sisters7
    Asked on June 10, 2016 at 7:26 AM

    https://www.jotform.com//?formID=61477497499175

     

    Please see Section 3, Housing Reservation.

    The first "Thursday, June 1" was from ticket template. How can I change the font and font size, so they are consistent with the rest of the form? Can I use check boxs on this ticket wedget template like the rest of the form?

  • Charlie
    Replied on June 10, 2016 at 9:34 AM

    You can add custom CSS code in your widget settings to design it's contents.

    Here's how:

    1. First, select the widget and click the wizard or wand icon.

    How to design Ticket widget? Image 1 Screenshot 50

    2. In the widget settings, click the "Custom CSS" tab. Here you can paste the custom CSS code that will style your widgets font. In my case, I used this CSS code:

    * {

    font-size: 11px !important;

    font-family: "Lucida Grande", sans-serif !important;

    }

    How to design Ticket widget? Image 2 Screenshot 61

     

    The asterisk in the CSS code means apply this design to the whole widget. You can also change the CSS code, like the font-size value or the font-family used.

     

    Now if you want to change your check box or radio button style, we have presets that you can select. Here's how:

    1. First, open your Form Designer Tool.

    2. In the Form Designer Tool, select the check box or radio button field. You'll see that the styling for them will show up at the right side. 

    How to design Ticket widget? Image 3 Screenshot 72

    3. After clicking the template, you should be able to see the list of preset styles that you can use.

    How to design Ticket widget? Image 4 Screenshot 83

     

    We also have some themes that you can easily apply on your forms, you can find them in our Themes Store. Or you can learn more about custom CSS code so that you can design basic to advance styling on your forms.

    I hope that helps.