Create a seat map plan

Hello team,

Could you please advice me how to create a theater seat map in jotform and take reserve on the map?

Thank you

Hi Dancenter,

Thank you for reaching out to Jotform Support. There are some widgets you can use for this purpose. For example, you can use the Buy Tickets widget. Here are two helpful guides you can follow to set up your widget and process payments on your form (if needed).

Complete guide: How to set up the multiple choices or single choice with limited quantity?  

Complete guide: How to set up a payment order form with limited stocks?  

Give it a try and let us know if you have any questions.

Hi,

Thanks for reaching out to us for help.

To create a seating plan, you can use the MultiSelect Grid widget. I've created an example form, you can find it here. Also, you can find the steps below:

• Create form and select MultiSelect Grid from Widgets area.

• After that, you will see the widget and widget settings. You can name the rows and columns as you want. And also you can arrange the width and height values of the widget from Properties section.

• After the arrangements, your customer can choose seats and see the selected seats easily via your form.

Please give it a try and let us know if you need any help.

Thank you ayseakkoc, I'll keep it as ref. for my future need.

Thank you Ece, your advice is what I'm looking for. I'll try it now :)

Hi Ece, it's me again.

Can you show me or help me to expand the Grid of MultiSelect Grid, please?

I currently need it to show 40 colunms and 23 rows, but I don't know how to do.

Here is link to my form: https://form.jotform.com/223132500764042

Thank you,

Hi Dancenter, 

Thanks for reaching out to Jotform Support. You can horizontally scroll in your MultiSelect Grid widget. Simply press the shift key and scroll the mouse wheel. Here is a quick demonstration:

Let us know if you have any other questions.

Thanks baris_ayyildiz,

How to freeze the first row and first column please.

When I drag the scroll bar, I won't know which seat to choose.

I can see it's hover text, but it's really incovenience to look the seat by waiting to see hover text appear.

Hi Dancenter,

Thank you for contacting Jotform Support. I cloned your form, tested it and found a solution for your problem. Let me show you how to fix it:

Firstly ;

1- Go to the Form designer (right menu) in the Form builder section.

2- Add the following code to your Inject Custom CSS under the Styles Tab.

 iframe#customFieldFrame_3 {

    width: 100%!important;

    max-width: 100%!important;

}

3-Click on your MultiSelect Grid widget and add the following code to the Custom CSS field from the menu that opens on the right side of the page.

table#tablegrid tbody tr>th {

    position: fixed;

    z-index: 9;

    vertical-align: middle;

    text-align: center;

}



table#tablegrid tbody tr:first-child th {

    position: relative;

}

Let us know if you need any other help.

Thank you very much Emrezavar, your advice is very supportive and useful.