Creating Group Bookings Form

  • Kristian Bainey
    Asked on July 30, 2020 at 6:42 PM

    Hello I am looking for a way to create group bookings at a hotel. For example, if I was a client and want to book 15 bookings at the same time with different room types,  dates, first name, last name, how would I go about doing this with JotForms?


    Is there a way?


    Please see attached.


    Thank you

    Jotform Thread 2483122 Screenshot
  • Mike
    Replied on July 30, 2020 at 8:43 PM

    You may take a look at a Configurable List widget that allows users to add rows dynamically. The questions are displayed in a horizontal order by default, but this is possible to change them to a vertical order if needed.

    Another option is to use an Input Table element. The number of rows is static with this element.

    Also, this is possible to use regular fields and conditional logic to show these fields.

    If you have any follow up questions, please let us know.

  • Kristian Bainey
    Replied on July 31, 2020 at 3:28 PM
    Thank you and how do I make the Configurable list questions vertical?
    ...
  • Jimmy_D
    Replied on July 31, 2020 at 5:22 PM

    Hi!

    You can use custom CSS to make the change the layout of the configurable list widget. 

    Kindly refer to this guide for instructions.- How-to-Inject-CSS-Codes-to-Widgets

    Let us know should you need further assistance. 

    Attentively, 

  • Mike
    Replied on July 31, 2020 at 6:10 PM

    Here is a CSS code that you can add to the Configurable List widget to make the questions vertical:

    #list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

    Creating Group Bookings Form Image 1 Screenshot 20

  • Kristian Bainey
    Replied on July 31, 2020 at 6:28 PM

    For some reason, when I go to my online form in the Guest Information entry it will not go to the next card unless I re-select a submission from a radio button.
    Also, the radio buttons are showing up with a watermark next to them.
    The signature functionality doesn't show the image in the email
    Can you please take a look?
    [ https://form.jotform.com/202125915538050 | https://form.jotform.com/202125915538050 ]
    Contractor: text
    *Employer: text
    *Last Name
    *First Name
    Gender: radio: Male, Female
    Shift: radio: Male, Female
    Has guest travelled outside of the country in the last 14 days?: radio: Yes, No
    Is guest exhibiting any symptoms of COVID-19?: radio: Yes, No
    Has guest be in contact with any confirmed to be infected with COVID-19?: radio: Yes, No
    Department: text
    Project: text
    PO/AFE: text
    Cost Center: text
    Location: text
    *Room Type: dropdown: , Hotel Ops, Executive, Executive Jr, Jack and Jill, Central Private
    *Check-in or TIme-in?: radio: C/I, T/I
    *Arrival: date: m/d/y
    *Departure: date: m/d/y
    ------------------------------------------------------------------
    #list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}
    ...
  • Mike
    Replied on July 31, 2020 at 8:24 PM

    We will address the issue via the next support ticket:

    https://www.jotform.com/answers/2485310