Group dining form

Default group dining form

HTML


<form method="GET" action="#" class="orc-c-form orc-c-form--group  orc-js-form">

  <input type="hidden" name="_token" value="">

  <div class="orc-c-form__body">

    <div class="orc-c-field  orc-js-field">

      <label for="group-first-name" class="orc-c-field__label ">First Name</label>

      <div class="orc-c-field__body">

        <input type="" id="group-first-name" class="orc-c-input " name="given-name" placeholder="First Name" value="" title="Please enter your first name." required="required" autocomplete="given-name" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--first name-->

    <div class="orc-c-field  orc-js-field">

      <label for="group-last-name" class="orc-c-field__label ">Last Name</label>

      <div class="orc-c-field__body">

        <input type="" id="group-last-name" class="orc-c-input " name="family-name" placeholder="Last Name" value="" title="Please enter your last name." required="required" autocomplete="family-name" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--last name-->

    <div class="orc-c-field  orc-js-field">

      <label for="group-email" class="orc-c-field__label ">Email</label>

      <div class="orc-c-field__body">

        <input type="email" id="group-email" class="orc-c-input " name="email" placeholder="email@email.com" value="emailaddress@email.com" title="Please enter a valid email." required="required" autocomplete="email" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--email-->

    <div class="orc-c-field  orc-js-field">

      <label for="group-phone" class="orc-c-field__label ">Preferred phone number</label>

      <div class="orc-c-field__body">

        <input type="tel" id="group-phone" class="orc-c-input " name="tel" placeholder="xxx-xxx-xxxx" value="" title="Please enter a valid phone number." required="required" autocomplete="tel" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--phone-->

    <div class="orc-c-field  orc-js-field">

      <label for="group-extension" class="orc-c-field__label ">Extension</label>

      <div class="orc-c-field__body">

        <input type="number" id="group-extension" class="orc-c-input " name="extension" placeholder="i.e. 000" value="" title="Please enter a valid phone number extension number." autocomplete="tel" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--phone extension-->

    <div class="orc-c-field  orc-js-field">

      <label for="group-company" class="orc-c-field__label ">Company&#x2F;Organization</label>

      <div class="orc-c-field__body">

        <input type="" id="group-company" class="orc-c-input " name="org" placeholder="Company&#x2F;Organization" value="" title="Please enter a company&#x2F;organization." required="required" autocomplete="org" />

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--company-->

    <div class="orc-c-field  orc-js-field">

      <label for="group-event-type" class="orc-c-field__label ">Nature of this Event</label>

      <div class="orc-c-field__body">

        <input type="" id="group-event-type" class="orc-c-input " name="event-type" placeholder="Birthday Party" value="" title="Please enter the nature of this event." required="required" />

      </div>
      <!-- end orc-c-field__body -->

      <div class="orc-c-field__note orc-js-field-note">i.e. Birthday Party</div>

    </div>
    <!-- end orc-c-field -->
    <!--event type-->


    <div class="orc-c-field orc-c-field--inline orc-c-field--date-range  orc-js-field" data-date-picker data-date-picker-large-screen-width="585">

      <!-- date picker -->
      <span class="orc-c-field start-date orc-js-start-date">
        <label for="start-date" class="orc-c-field__label orc-u-is-vishidden">Start Date</label>
        <input type="date" class="orc-c-input orc-js-start-date" name="fromDate" id="start-date" placeholder="All dates" min="2017-01-01" max="2019-01-01"  />
    </span>

      <span class="orc-c-field end-date orc-js-vishidden">
        <label for="end-date" class="orc-c-field__label orc-u-is-vishidden">End Date</label>
        <input type="date" class="orc-c-input" name="toDate" id="end-date" placeholder="All dates" min="2017-01-01" max="2019-01-01"  />
    </span>

      <!-- end date picker -->

    </div>
    <!--end orc-c-field-->
    <!--date-->


    <div class="orc-c-field  orc-js-field">

      <label for="" class="orc-c-field__label">Start Time</label>

      <div class="orc-c-field__body">

        <select class="orc-c-select" id="" name="" placeholder="Placeholder">

    <option value="start-time-1" >12:00am</option>
    <option value="start-time-2" >12:30am</option>
    <option value="start-time-3" >1:00am</option>
    <option value="start-time-4" >1:30am</option>
    <option value="start-time-5" >2:00am</option>
    <option value="start-time-6" >2:30am</option>
    <option value="start-time-7" >3:00am</option>
    <option value="start-time-8" >3:30am</option>
    <option value="start-time-9" >4:00am</option>
    <option value="start-time-10" >4:30am</option>
    <option value="start-time-11" >5:00am</option>
    <option value="start-time-12" >5:30am</option>
    <option value="start-time-13" >6:00am</option>
    <option value="start-time-14" >7:30am</option>
    <option value="start-time-15" >8:00am</option>
    <option value="start-time-16" >8:30am</option>
    <option value="start-time-16" >9:00am</option>
    <option value="start-time-17" >9:30am</option>
    <option value="start-time-18" >10:00am</option>
    <option value="start-time-19" >10:30am</option>
    <option value="start-time-20" >11:00am</option>
    <option value="start-time-21" >11:30am</option>
    <option value="start-time-22" >12:00pm</option>
    <option value="start-time-23" >12:30pm</option>
    <option value="start-time-24" >1:00pm</option>
    <option value="start-time-25" >1:30pm</option>
    <option value="start-time-26" >2:00pm</option>
    <option value="start-time-27" >2:30pm</option>
    <option value="start-time-28" >3:00am</option>
    <option value="start-time-29" >3:30pm</option>
    <option value="start-time-30" >4:00pm</option>
    <option value="start-time-31" >4:30pm</option>
    <option value="start-time-32" >5:00pm</option>
    <option value="start-time-33" >5:30pm</option>
    <option value="start-time-34" >6:00pm</option>
    <option value="start-time-35" >7:30pm</option>
    <option value="start-time-36" >8:00pm</option>
    <option value="start-time-37" >8:30pm</option>
    <option value="start-time-38" >9:00pm</option>
    <option value="start-time-39" >9:30pm</option>
    <option value="start-time-40" >10:00pm</option>
    <option value="start-time-41" >10:30pm</option>
    <option value="start-time-42" >11:00pm</option>
    <option value="start-time-43" >11:30pm</option>


</select>
        <!--end orc-c-select-->


      </div>
      <!-- end orc-c-field__body -->

      <div class="orc-c-field__note orc-js-field-note">This is a note about the field</div>

    </div>
    <!-- end orc-c-field -->
    <!--start time-->

    <div class="orc-c-field  orc-js-field">

      <label for="" class="orc-c-field__label">Start Time</label>

      <div class="orc-c-field__body">

        <select class="orc-c-select" id="" name="" placeholder="Placeholder">

    <option value="end-time-1" >12:00am</option>
    <option value="end-time-2" >12:30am</option>
    <option value="end-time-3" >1:00am</option>
    <option value="end-time-4" >1:30am</option>
    <option value="end-time-5" >2:00am</option>
    <option value="end-time-6" >2:30am</option>
    <option value="end-time-7" >3:00am</option>
    <option value="end-time-8" >3:30am</option>
    <option value="end-time-9" >4:00am</option>
    <option value="end-time-10" >4:30am</option>
    <option value="end-time-11" >5:00am</option>
    <option value="end-time-12" >5:30am</option>
    <option value="end-time-13" >6:00am</option>
    <option value="end-time-14" >7:30am</option>
    <option value="end-time-15" >8:00am</option>
    <option value="end-time-16" >8:30am</option>
    <option value="end-time-16" >9:00am</option>
    <option value="end-time-17" >9:30am</option>
    <option value="end-time-18" >10:00am</option>
    <option value="end-time-19" >10:30am</option>
    <option value="end-time-20" >11:00am</option>
    <option value="end-time-21" >11:30am</option>
    <option value="end-time-22" >12:00pm</option>
    <option value="end-time-23" >12:30pm</option>
    <option value="end-time-24" >1:00pm</option>
    <option value="end-time-25" >1:30pm</option>
    <option value="end-time-26" >2:00pm</option>
    <option value="end-time-27" >2:30pm</option>
    <option value="end-time-28" >3:00am</option>
    <option value="end-time-29" >3:30pm</option>
    <option value="end-time-30" >4:00pm</option>
    <option value="end-time-31" >4:30pm</option>
    <option value="end-time-32" >5:00pm</option>
    <option value="end-time-33" >5:30pm</option>
    <option value="end-time-34" >6:00pm</option>
    <option value="end-time-35" >7:30pm</option>
    <option value="end-time-36" >8:00pm</option>
    <option value="end-time-37" >8:30pm</option>
    <option value="end-time-38" >9:00pm</option>
    <option value="end-time-39" >9:30pm</option>
    <option value="end-time-40" >10:00pm</option>
    <option value="end-time-41" >10:30pm</option>
    <option value="end-time-42" >11:00pm</option>
    <option value="end-time-43" >11:30pm</option>


</select>
        <!--end orc-c-select-->


      </div>
      <!-- end orc-c-field__body -->

      <div class="orc-c-field__note orc-js-field-note">This is a note about the field</div>

    </div>
    <!-- end orc-c-field -->
    <!--end time-->

    <div class="orc-c-field  orc-js-field">

      <label for="group-number-people" class="orc-c-field__label ">Number of People</label>

      <div class="orc-c-field__body">

        <input type="number" id="group-number-people" class="orc-c-input " name="number" placeholder="i.e. 000" value="" title="Please enter a valid extension number." required="required" />

      </div>
      <!-- end orc-c-field__body -->

      <div class="orc-c-field__note orc-js-field-note">Minimum of 10</div>

    </div>
    <!-- end orc-c-field -->
    <!--number of people-->

    <div class="orc-c-field  orc-js-field">

      <label for="group-additional" class="orc-c-field__label">Is there any additional information you would like to add?</label>

      <div class="orc-c-field__body">

        <textarea class="orc-c-textarea " id="group-additional" placeholder="i.e. Birthday Party" value="" rows="5"></textarea>

      </div>
      <!-- end orc-c-field__body -->


    </div>
    <!-- end orc-c-field -->
    <!--text area-->

  </div>
  <!--end orc-c-form__body-->

  <div class="orc-c-form__footer">

    <div class="orc-c-btn-group ">

      <button class="orc-c-btn ">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
      <!-- end orc-c-btn -->


      <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
      <!-- end orc-c-btn -->




    </div>
    <!--end orc-c-btn-group-->



  </div>
  <!--end orc-c-form__footer-->

</form>
<!--end orc-c-form-->

When to use

Make this form available in dining reservation states when a user reserves a table for 13 or more people.

When to consider an alternative

This is specifically for large restaurant reservations. For most other use cases, use a contact form or provide a single text field.

Class Name	Description
`orc-c-form` Required	Applied to the outer `<form>` element. This `form` element will help allow the data in the fields to be submitted. An `input` with a `type` of `hidden` and a `name` of `_token` needs to be added within this form as the first element for submission reasons.
`orc-c-form--group` Required	Applied to the outer `<form>` element in addition to `orc-c-form` to add the proper styling to a group form.
`orc-js-form` JS	Applied to the `<form>` element so that JavaScript can target this form.
`orc-c-form___body` Required	Inner container of the `orc-c-form`.
`orc-c-field` Required	Form field within the `orc-c-form`. Consists of a field label, field body, and input in most cases.
`orc-js-field` JS	Class added to `orc-c-field` to have JavaScript target this element, mainly for form field validation
`orc-c-field__label` Required	Form field label used to describe the input within the field
`orc-c-field__body` Required	Form field container that houses the input and other form field content.
`orc-c-input` Required	Form field input. Inputs can be of various types. The contact form has types of “text”.
`orc-c-select` Required	Select field input with a list of options to choose from.
`orc-c-textarea` Required	Textarea input within the contact form. This is used with the `<textarea>` tag.
`orc-c-form__footer` Required	The bottom portion of the form that houses items like the button group
`orc-c-btn-group` Required	Button group containing the buttons to submit the contact form or any other actions needed within the form.

Default group dining form `orc-c-form orc-c-form--group`

Usage

When to use

When to consider an alternative