Form Library Order Forms Catering Order Form

Catering Order Form

Use this simple HTML catering order form to collect and organize customer orders effortlessly, making event planning a breeze.
Preview Preview
Code Code 
        

          HTML HTML
          Copy Copy
        

        
        <form
  action="https://formspree.io/f/{FORM_ID}"
  class="fs-form fs-layout__2-column"
  target="_top"
  method="POST"
>
  <fieldset>
    <div class="fs-field">
      <label class="fs-label" for="full-name">Full Name</label>
      <input
        class="fs-input"
        id="full-name"
        name="full-name"
        placeholder="Enter your full name"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="email-address">Email Address</label>
      <input
        class="fs-input"
        id="email-address"
        name="email-address"
        placeholder="Enter your email address"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="phone-number">Phone Number</label>
      <input
        class="fs-input"
        id="phone-number"
        name="phone-number"
        placeholder="Enter your phone number"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="company-name">
        Company/Organization Name
      </label>
      <input
        class="fs-input"
        id="company-name"
        name="company-name"
        placeholder="Enter your company/organization name (optional)"
      />
    </div>
  </fieldset>
  <fieldset>
    <div class="fs-field">
      <label class="fs-label" for="event-type">Event Type</label>
      <select class="fs-select" id="event-type" name="event-type" required>
        <option value="wedding">Wedding</option>
        <option value="birthday">Birthday</option>
        <option value="corporate-event">Corporate Event</option>
        <option value="others">Others</option>
      </select>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="event-date">Event Date</label>
      <input
        class="fs-input"
        id="event-date"
        name="event-date"
        placeholder="Enter the event date"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="event-time">Event Time</label>
      <input
        class="fs-input"
        id="event-time"
        name="event-time"
        placeholder="Enter the event time"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="guest-count">Number of Guests</label>
      <input
        class="fs-input"
        id="guest-count"
        name="guest-count"
        placeholder="Enter the number of guests"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="event-location">
        Event Location/Address
      </label>
      <textarea
        class="fs-textarea"
        id="event-location"
        name="event-location"
        placeholder="Enter the detailed address of the event"
        required
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <div class="fs-field">
      <label class="fs-label" for="menu-type">Menu Type</label>
      <select class="fs-select" id="menu-type" name="menu-type" required>
        <option value="buffet">Buffet</option>
        <option value="sit-down">Sit-Down</option>
        <option value="finger-foods">Finger Foods</option>
        <option value="custom">Custom</option>
      </select>
    </div>
    <div class="fs-field">
      <label class="fs-label">Specific Dishes or Packages</label>
      <div class="fs-checkbox-group">
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="specific-dishes-vegetarian"
              name="specific-dishes"
              required
              type="checkbox"
              value="vegetarian"
            />
          </div>
          <div>
            <label class="fs-label" for="specific-dishes-vegetarian">
              Vegetarian
            </label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="specific-dishes-non-vegetarian"
              name="specific-dishes"
              required
              type="checkbox"
              value="non-vegetarian"
            />
          </div>
          <div>
            <label class="fs-label" for="specific-dishes-non-vegetarian">
              Non-Vegetarian
            </label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="specific-dishes-desserts"
              name="specific-dishes"
              required
              type="checkbox"
              value="desserts"
            />
          </div>
          <div>
            <label class="fs-label" for="specific-dishes-desserts">
              Desserts
            </label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="specific-dishes-custom-dishes"
              name="specific-dishes"
              required
              type="checkbox"
              value="custom-dishes"
            />
          </div>
          <div>
            <label class="fs-label" for="specific-dishes-custom-dishes">
              Custom Dishes
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="dietary-restrictions">
        Dietary Restrictions/Preferences
      </label>
      <textarea
        class="fs-textarea"
        id="dietary-restrictions"
        name="dietary-restrictions"
        placeholder="e.g., vegan, gluten-free, nut allergies"
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <div class="fs-field">
      <label class="fs-label">Staffing Requirements</label>
      <div class="fs-checkbox-group">
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="staffing-requirements-waitstaff"
              name="staffing-requirements"
              type="checkbox"
              value="waitstaff"
            />
          </div>
          <div>
            <label class="fs-label" for="staffing-requirements-waitstaff">
              Waitstaff
            </label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="staffing-requirements-bartenders"
              name="staffing-requirements"
              type="checkbox"
              value="bartenders"
            />
          </div>
          <div>
            <label class="fs-label" for="staffing-requirements-bartenders">
              Bartenders
            </label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="staffing-requirements-cleanup-crew"
              name="staffing-requirements"
              type="checkbox"
              value="cleanup-crew"
            />
          </div>
          <div>
            <label class="fs-label" for="staffing-requirements-cleanup-crew">
              Cleanup Crew
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="fs-field">
      <label class="fs-label">Rental Equipment</label>
      <div class="fs-checkbox-group">
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="rental-equipment-tables"
              name="rental-equipment"
              type="checkbox"
              value="tables"
            />
          </div>
          <div>
            <label class="fs-label" for="rental-equipment-tables">Tables</label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="rental-equipment-chairs"
              name="rental-equipment"
              type="checkbox"
              value="chairs"
            />
          </div>
          <div>
            <label class="fs-label" for="rental-equipment-chairs">Chairs</label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="rental-equipment-utensils"
              name="rental-equipment"
              type="checkbox"
              value="utensils"
            />
          </div>
          <div>
            <label class="fs-label" for="rental-equipment-utensils">
              Utensils
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="special-requests">Special Requests</label>
      <textarea
        class="fs-textarea"
        id="special-requests"
        name="special-requests"
        placeholder="e.g., decorations, custom themes, etc."
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <div class="fs-field">
      <label class="fs-label" for="payment-method">Payment Method</label>
      <select
        class="fs-select"
        id="payment-method"
        name="payment-method"
        required
      >
        <option value="credit-card">Credit Card</option>
        <option value="bank-transfer">Bank Transfer</option>
        <option value="cash">Cash</option>
      </select>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="deposit-amount">Deposit Amount</label>
      <input
        class="fs-input"
        id="deposit-amount"
        name="deposit-amount"
        placeholder="Enter the deposit amount or percentage"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="cardholder-name">Cardholder Name</label>
      <input
        class="fs-input"
        id="cardholder-name"
        name="cardholder-name"
        placeholder="Enter the name on the card (if applicable)"
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="card-number">Card Number</label>
      <input
        class="fs-input"
        id="card-number"
        name="card-number"
        placeholder="Enter the card number (if applicable)"
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="card-expiration-date">Expiration Date</label>
      <input
        class="fs-input"
        id="card-expiration-date"
        name="card-expiration-date"
        placeholder="Enter the expiration date (MM/YYYY)"
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="card-cvv">CVV</label>
      <input
        class="fs-input"
        id="card-cvv"
        name="card-cvv"
        placeholder="Enter the CVV (if applicable)"
      />
    </div>
  </fieldset>
  <fieldset>
    <div class="fs-checkbox-field">
      <div class="fs-checkbox-wrapper">
        <input
          class="fs-checkbox"
          id="terms-agreement"
          name="terms-agreement"
          required
          type="checkbox"
          value="agree"
        />
      </div>
      <div>
        <label class="fs-label" for="terms-agreement">
          I agree to the Terms and Conditions
        </label>
      </div>
    </div>
  </fieldset>
  <div class="fs-checkbox-field">
    <div class="fs-checkbox-wrapper">
      <input
        class="fs-checkbox"
        id="cancellation-policy-agreement"
        name="cancellation-policy-agreement"
        required
        type="checkbox"
        value="agree"
      />
    </div>
    <div>
      <label class="fs-label" for="cancellation-policy-agreement">
        I understand the cancellation policy
      </label>
    </div>
  </div>
  <div class="fs-button-group">
    <button class="fs-button" type="submit">Submit</button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/** Variables **/

:root {
  --color-background: #cbd5e1;
  --color-background-alt: #3a9092;
  --color-border-active: #23494c;
  --color-border-default: #94a3b8;
  --color-highlight: #7ecac7;
  --color-primary: #23494c;
  --color-primary-active: #122d30;
  --color-text-default: #0f172a;
  --color-text-muted: #475569;

  --font-family-body: "Open Sans", sans-serif;
  --font-family-display: "Nunito Sans", sans-serif;
}

/** Base **/

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family-body);
  font-optical-sizing: auto;
  font-style: normal;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

[type="checkbox"],
[type="radio"],
[type="range"] {
  appearance: none;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
}

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
  outline: none;
}

/** Components **/

.fs-form {
  display: grid;
  row-gap: 1rem;
}

.fs-form:where(.fs-layout__2-column) {
  column-gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

fieldset {
  display: grid;
  row-gap: 1rem;
}

.fs-form:where(.fs-layout__2-column) fieldset {
  column-gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / -1;
}

.fs-field {
  display: flex;
  flex-direction: column;
  row-gap: 0.375rem;
}

.fs-label {
  color: var(--color-text-default);
  display: block;
  font-family: var(--font-family-display);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.fs-button-group {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 0.75rem;
}

.fs-form:where(.fs-layout__2-column) .fs-button-group {
  grid-column: 1 / -1;
}

.fs-button {
  background-color: var(--color-primary);
  border-radius: 0.375rem;
  color: white;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  padding: 1rem 2rem;
  transition-duration: 200ms;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-button:hover {
  background-color: var(--color-primary-active);
}

.fs-button:focus-visible {
  background-color: var(--color-primary-active);
  outline: 3px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-primary);
  font-size: 0.875rem;
  height: 2rem;
  line-height: 1.25rem;
  outline: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-input::placeholder {
  color: var(--color-text-muted);
}

.fs-checkbox-group,
.fs-radio-group {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.fs-checkbox-field,
.fs-radio-field {
  column-gap: 0.5rem;
  display: flex;
}

:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
  margin-top: 0.125rem;
}

.fs-checkbox-wrapper,
.fs-radio-wrapper {
  align-items: center;
  display: flex;
  height: 1.25rem;
}

.fs-checkbox,
.fs-radio {
  background-color: #fff;
  border: 1px solid var(--color-primary);
  height: 1rem;
  width: 1rem;
}

.fs-checkbox {
  border-radius: 0.25rem;
}

.fs-radio {
  border-radius: 100%;
}

.fs-checkbox:checked,
.fs-radio:checked {
  background-color: var(--color-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: transparent;
}

.fs-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.fs-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.fs-slider {
  background: transparent;
  cursor: pointer;
  height: 1.25rem;
  width: 100%;
}

.fs-slider::-moz-range-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-webkit-slider-runnable-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-moz-range-thumb {
  background-color: var(--color-primary);
  border: none; /* Removes extra border that FF applies */
  border-radius: 50%;
  height: 1.25rem;
  width: 1.25rem;
}

.fs-slider::-webkit-slider-thumb {
  appearance: none;
  background-color: var(--color-primary);
  border-radius: 50%;
  height: 1.25rem;
  margin-top: -0.375rem; /* Centers thumb on the track */
  width: 1.25rem;
}

.fs-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-switch-field {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.5rem;
  cursor: pointer;
  height: 1.5rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.75rem;
}

.fs-switch:checked {
  background-color: var(--color-primary);
  background-position: right center;
}

.fs-switch:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea {
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

.fs-textarea:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

        
        Show more
      
        

          HTML HTML/Tailwind
          Copy Copy
        

        
        <form
  action="https://formspree.io/f/{FORM_ID}"
  class="grid grid-cols-2 gap-x-3 gap-y-4"
  target="_top"
  method="POST"
>
  <fieldset>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="full-name"
      >
        Full Name
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="full-name"
        name="full-name"
        placeholder="Enter your full name"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="email-address"
      >
        Email Address
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="email-address"
        name="email-address"
        placeholder="Enter your email address"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="phone-number"
      >
        Phone Number
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="phone-number"
        name="phone-number"
        placeholder="Enter your phone number"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="company-name"
      >
        Company/Organization Name
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="company-name"
        name="company-name"
        placeholder="Enter your company/organization name (optional)"
      />
    </div>
  </fieldset>
  <fieldset>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="event-type"
      >
        Event Type
      </label>
      <select
        class="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="event-type"
        name="event-type"
        required
      >
        <option value="wedding">Wedding</option>
        <option value="birthday">Birthday</option>
        <option value="corporate-event">Corporate Event</option>
        <option value="others">Others</option>
      </select>
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="event-date"
      >
        Event Date
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="event-date"
        name="event-date"
        placeholder="Enter the event date"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="event-time"
      >
        Event Time
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="event-time"
        name="event-time"
        placeholder="Enter the event time"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="guest-count"
      >
        Number of Guests
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="guest-count"
        name="guest-count"
        placeholder="Enter the number of guests"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="event-location"
      >
        Event Location/Address
      </label>
      <textarea
        class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="event-location"
        name="event-location"
        placeholder="Enter the detailed address of the event"
        required
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="menu-type"
      >
        Menu Type
      </label>
      <select
        class="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="menu-type"
        name="menu-type"
        required
      >
        <option value="buffet">Buffet</option>
        <option value="sit-down">Sit-Down</option>
        <option value="finger-foods">Finger Foods</option>
        <option value="custom">Custom</option>
      </select>
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
      >
        Specific Dishes or Packages
      </label>
      <div class="flex flex-col gap-y-2">
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="specific-dishes-vegetarian"
              name="specific-dishes"
              required
              type="checkbox"
              value="vegetarian"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="specific-dishes-vegetarian"
            >
              Vegetarian
            </label>
          </div>
        </div>
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="specific-dishes-non-vegetarian"
              name="specific-dishes"
              required
              type="checkbox"
              value="non-vegetarian"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="specific-dishes-non-vegetarian"
            >
              Non-Vegetarian
            </label>
          </div>
        </div>
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="specific-dishes-desserts"
              name="specific-dishes"
              required
              type="checkbox"
              value="desserts"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="specific-dishes-desserts"
            >
              Desserts
            </label>
          </div>
        </div>
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="specific-dishes-custom-dishes"
              name="specific-dishes"
              required
              type="checkbox"
              value="custom-dishes"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="specific-dishes-custom-dishes"
            >
              Custom Dishes
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="dietary-restrictions"
      >
        Dietary Restrictions/Preferences
      </label>
      <textarea
        class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="dietary-restrictions"
        name="dietary-restrictions"
        placeholder="e.g., vegan, gluten-free, nut allergies"
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
      >
        Staffing Requirements
      </label>
      <div class="flex flex-col gap-y-2">
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="staffing-requirements-waitstaff"
              name="staffing-requirements"
              type="checkbox"
              value="waitstaff"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="staffing-requirements-waitstaff"
            >
              Waitstaff
            </label>
          </div>
        </div>
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="staffing-requirements-bartenders"
              name="staffing-requirements"
              type="checkbox"
              value="bartenders"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="staffing-requirements-bartenders"
            >
              Bartenders
            </label>
          </div>
        </div>
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="staffing-requirements-cleanup-crew"
              name="staffing-requirements"
              type="checkbox"
              value="cleanup-crew"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="staffing-requirements-cleanup-crew"
            >
              Cleanup Crew
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
      >
        Rental Equipment
      </label>
      <div class="flex flex-col gap-y-2">
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="rental-equipment-tables"
              name="rental-equipment"
              type="checkbox"
              value="tables"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="rental-equipment-tables"
            >
              Tables
            </label>
          </div>
        </div>
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="rental-equipment-chairs"
              name="rental-equipment"
              type="checkbox"
              value="chairs"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="rental-equipment-chairs"
            >
              Chairs
            </label>
          </div>
        </div>
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="rental-equipment-utensils"
              name="rental-equipment"
              type="checkbox"
              value="utensils"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="rental-equipment-utensils"
            >
              Utensils
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="special-requests"
      >
        Special Requests
      </label>
      <textarea
        class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="special-requests"
        name="special-requests"
        placeholder="e.g., decorations, custom themes, etc."
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="payment-method"
      >
        Payment Method
      </label>
      <select
        class="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="payment-method"
        name="payment-method"
        required
      >
        <option value="credit-card">Credit Card</option>
        <option value="bank-transfer">Bank Transfer</option>
        <option value="cash">Cash</option>
      </select>
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="deposit-amount"
      >
        Deposit Amount
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="deposit-amount"
        name="deposit-amount"
        placeholder="Enter the deposit amount or percentage"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="cardholder-name"
      >
        Cardholder Name
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="cardholder-name"
        name="cardholder-name"
        placeholder="Enter the name on the card (if applicable)"
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="card-number"
      >
        Card Number
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="card-number"
        name="card-number"
        placeholder="Enter the card number (if applicable)"
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="card-expiration-date"
      >
        Expiration Date
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="card-expiration-date"
        name="card-expiration-date"
        placeholder="Enter the expiration date (MM/YYYY)"
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="card-cvv"
      >
        CVV
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="card-cvv"
        name="card-cvv"
        placeholder="Enter the CVV (if applicable)"
      />
    </div>
  </fieldset>
  <fieldset>
    <div class="flex gap-x-2">
      <div class="flex h-5 items-center">
        <input
          class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
          id="terms-agreement"
          name="terms-agreement"
          required
          type="checkbox"
          value="agree"
        />
      </div>
      <div>
        <label
          class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
          for="terms-agreement"
        >
          I agree to the Terms and Conditions
        </label>
      </div>
    </div>
  </fieldset>
  <div class="flex gap-x-2">
    <div class="flex h-5 items-center">
      <input
        class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
        id="cancellation-policy-agreement"
        name="cancellation-policy-agreement"
        required
        type="checkbox"
        value="agree"
      />
    </div>
    <div>
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="cancellation-policy-agreement"
      >
        I understand the cancellation policy
      </label>
    </div>
  </div>
  <div class="col-span-full flex flex-row-reverse gap-x-3">
    <button
      class="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
      type="submit"
    >
      Submit
    </button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-background: #cbd5e1;
    --color-background-alt: #3a9092;
    --color-border-active: #23494c;
    --color-border-default: #94a3b8;
    --color-highlight: #7ecac7;
    --color-primary: #23494c;
    --color-primary-active: #122d30;
    --color-text-default: #0f172a;
    --color-text-muted: #475569;

    --font-family-body: "Open Sans", sans-serif;
    --font-family-display: "Nunito Sans", sans-serif;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  * {
    border: 0;
    margin: 0;
    padding: 0;
  }

  body {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-style: normal;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  [type="checkbox"],
  [type="radio"],
  [type="range"] {
    appearance: none;
    flex-shrink: 0;
    padding: 0;
    user-select: none;
  }

  [type="checkbox"]:focus,
  [type="radio"]:focus,
  [type="range"]:focus {
    outline: none;
  }
}

@layer components {
  .fs-slider {
    background: transparent;
    cursor: pointer;
    height: 1.25rem;
    width: 100%;
  }

  .fs-slider::-moz-range-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-webkit-slider-runnable-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-moz-range-thumb {
    background-color: var(--color-primary);
    border: none; /* Removes extra border that FF applies */
    border-radius: 50%;
    height: 1.25rem;
    width: 1.25rem;
  }

  .fs-slider::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--color-primary);
    border-radius: 50%;
    height: 1.25rem;
    margin-top: -0.375rem; /* Centers thumb on the track */
    width: 1.25rem;
  }

  .fs-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .fs-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

@layer utilities {
  .bg-caret-down {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }

  .bg-checkbox-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  .bg-radio-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

  .bg-switch-thumb {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
  }
}

        
        Show more
      
        

          HTML React
          Copy Copy
        

        
        // Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";

export function ExampleForm() {
  const [state, handleSubmit] = useForm("FORM_ID");

  if (state.succeeded) {
    return <p>Thanks for joining!</p>;
  }

  return (
    <form className="fs-form fs-layout__2-column" onSubmit={handleSubmit}>
      <fieldset>
        <div className="fs-field">
          <label className="fs-label" htmlFor="full-name">
            Full Name
          </label>
          <input
            className="fs-input"
            id="full-name"
            name="full-name"
            placeholder="Enter your full name"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="email-address">
            Email Address
          </label>
          <input
            className="fs-input"
            id="email-address"
            name="email-address"
            placeholder="Enter your email address"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="phone-number">
            Phone Number
          </label>
          <input
            className="fs-input"
            id="phone-number"
            name="phone-number"
            placeholder="Enter your phone number"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="company-name">
            Company/Organization Name
          </label>
          <input
            className="fs-input"
            id="company-name"
            name="company-name"
            placeholder="Enter your company/organization name (optional)"
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="fs-field">
          <label className="fs-label" htmlFor="event-type">
            Event Type
          </label>
          <select
            className="fs-select"
            id="event-type"
            name="event-type"
            required
          >
            <option value="wedding">Wedding</option>
            <option value="birthday">Birthday</option>
            <option value="corporate-event">Corporate Event</option>
            <option value="others">Others</option>
          </select>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="event-date">
            Event Date
          </label>
          <input
            className="fs-input"
            id="event-date"
            name="event-date"
            placeholder="Enter the event date"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="event-time">
            Event Time
          </label>
          <input
            className="fs-input"
            id="event-time"
            name="event-time"
            placeholder="Enter the event time"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="guest-count">
            Number of Guests
          </label>
          <input
            className="fs-input"
            id="guest-count"
            name="guest-count"
            placeholder="Enter the number of guests"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="event-location">
            Event Location/Address
          </label>
          <textarea
            className="fs-textarea"
            id="event-location"
            name="event-location"
            placeholder="Enter the detailed address of the event"
            required
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="fs-field">
          <label className="fs-label" htmlFor="menu-type">
            Menu Type
          </label>
          <select
            className="fs-select"
            id="menu-type"
            name="menu-type"
            required
          >
            <option value="buffet">Buffet</option>
            <option value="sit-down">Sit-Down</option>
            <option value="finger-foods">Finger Foods</option>
            <option value="custom">Custom</option>
          </select>
        </div>
        <div className="fs-field">
          <label className="fs-label">Specific Dishes or Packages</label>
          <div className="fs-checkbox-group">
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="specific-dishes-vegetarian"
                  name="specific-dishes"
                  required
                  type="checkbox"
                  value="vegetarian"
                />
              </div>
              <div>
                <label
                  className="fs-label"
                  htmlFor="specific-dishes-vegetarian"
                >
                  Vegetarian
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="specific-dishes-non-vegetarian"
                  name="specific-dishes"
                  required
                  type="checkbox"
                  value="non-vegetarian"
                />
              </div>
              <div>
                <label
                  className="fs-label"
                  htmlFor="specific-dishes-non-vegetarian"
                >
                  Non-Vegetarian
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="specific-dishes-desserts"
                  name="specific-dishes"
                  required
                  type="checkbox"
                  value="desserts"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="specific-dishes-desserts">
                  Desserts
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="specific-dishes-custom-dishes"
                  name="specific-dishes"
                  required
                  type="checkbox"
                  value="custom-dishes"
                />
              </div>
              <div>
                <label
                  className="fs-label"
                  htmlFor="specific-dishes-custom-dishes"
                >
                  Custom Dishes
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="dietary-restrictions">
            Dietary Restrictions/Preferences
          </label>
          <textarea
            className="fs-textarea"
            id="dietary-restrictions"
            name="dietary-restrictions"
            placeholder="e.g., vegan, gluten-free, nut allergies"
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="fs-field">
          <label className="fs-label">Staffing Requirements</label>
          <div className="fs-checkbox-group">
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="staffing-requirements-waitstaff"
                  name="staffing-requirements"
                  type="checkbox"
                  value="waitstaff"
                />
              </div>
              <div>
                <label
                  className="fs-label"
                  htmlFor="staffing-requirements-waitstaff"
                >
                  Waitstaff
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="staffing-requirements-bartenders"
                  name="staffing-requirements"
                  type="checkbox"
                  value="bartenders"
                />
              </div>
              <div>
                <label
                  className="fs-label"
                  htmlFor="staffing-requirements-bartenders"
                >
                  Bartenders
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="staffing-requirements-cleanup-crew"
                  name="staffing-requirements"
                  type="checkbox"
                  value="cleanup-crew"
                />
              </div>
              <div>
                <label
                  className="fs-label"
                  htmlFor="staffing-requirements-cleanup-crew"
                >
                  Cleanup Crew
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="fs-field">
          <label className="fs-label">Rental Equipment</label>
          <div className="fs-checkbox-group">
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="rental-equipment-tables"
                  name="rental-equipment"
                  type="checkbox"
                  value="tables"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="rental-equipment-tables">
                  Tables
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="rental-equipment-chairs"
                  name="rental-equipment"
                  type="checkbox"
                  value="chairs"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="rental-equipment-chairs">
                  Chairs
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="rental-equipment-utensils"
                  name="rental-equipment"
                  type="checkbox"
                  value="utensils"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="rental-equipment-utensils">
                  Utensils
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="special-requests">
            Special Requests
          </label>
          <textarea
            className="fs-textarea"
            id="special-requests"
            name="special-requests"
            placeholder="e.g., decorations, custom themes, etc."
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="fs-field">
          <label className="fs-label" htmlFor="payment-method">
            Payment Method
          </label>
          <select
            className="fs-select"
            id="payment-method"
            name="payment-method"
            required
          >
            <option value="credit-card">Credit Card</option>
            <option value="bank-transfer">Bank Transfer</option>
            <option value="cash">Cash</option>
          </select>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="deposit-amount">
            Deposit Amount
          </label>
          <input
            className="fs-input"
            id="deposit-amount"
            name="deposit-amount"
            placeholder="Enter the deposit amount or percentage"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="cardholder-name">
            Cardholder Name
          </label>
          <input
            className="fs-input"
            id="cardholder-name"
            name="cardholder-name"
            placeholder="Enter the name on the card (if applicable)"
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="card-number">
            Card Number
          </label>
          <input
            className="fs-input"
            id="card-number"
            name="card-number"
            placeholder="Enter the card number (if applicable)"
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="card-expiration-date">
            Expiration Date
          </label>
          <input
            className="fs-input"
            id="card-expiration-date"
            name="card-expiration-date"
            placeholder="Enter the expiration date (MM/YYYY)"
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="card-cvv">
            CVV
          </label>
          <input
            className="fs-input"
            id="card-cvv"
            name="card-cvv"
            placeholder="Enter the CVV (if applicable)"
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="fs-checkbox-field">
          <div className="fs-checkbox-wrapper">
            <input
              className="fs-checkbox"
              id="terms-agreement"
              name="terms-agreement"
              required
              type="checkbox"
              value="agree"
            />
          </div>
          <div>
            <label className="fs-label" htmlFor="terms-agreement">
              I agree to the Terms and Conditions
            </label>
          </div>
        </div>
      </fieldset>
      <div className="fs-checkbox-field">
        <div className="fs-checkbox-wrapper">
          <input
            className="fs-checkbox"
            id="cancellation-policy-agreement"
            name="cancellation-policy-agreement"
            required
            type="checkbox"
            value="agree"
          />
        </div>
        <div>
          <label className="fs-label" htmlFor="cancellation-policy-agreement">
            I understand the cancellation policy
          </label>
        </div>
      </div>
      <div class="fs-button-group">
        <button className="fs-button" type="submit">
          Submit
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/** Variables **/

:root {
  --color-background: #cbd5e1;
  --color-background-alt: #3a9092;
  --color-border-active: #23494c;
  --color-border-default: #94a3b8;
  --color-highlight: #7ecac7;
  --color-primary: #23494c;
  --color-primary-active: #122d30;
  --color-text-default: #0f172a;
  --color-text-muted: #475569;

  --font-family-body: "Open Sans", sans-serif;
  --font-family-display: "Nunito Sans", sans-serif;
}

/** Base **/

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family-body);
  font-optical-sizing: auto;
  font-style: normal;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

[type="checkbox"],
[type="radio"],
[type="range"] {
  appearance: none;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
}

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
  outline: none;
}

/** Components **/

.fs-form {
  display: grid;
  row-gap: 1rem;
}

.fs-form:where(.fs-layout__2-column) {
  column-gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

fieldset {
  display: grid;
  row-gap: 1rem;
}

.fs-form:where(.fs-layout__2-column) fieldset {
  column-gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / -1;
}

.fs-field {
  display: flex;
  flex-direction: column;
  row-gap: 0.375rem;
}

.fs-label {
  color: var(--color-text-default);
  display: block;
  font-family: var(--font-family-display);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.fs-button-group {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 0.75rem;
}

.fs-form:where(.fs-layout__2-column) .fs-button-group {
  grid-column: 1 / -1;
}

.fs-button {
  background-color: var(--color-primary);
  border-radius: 0.375rem;
  color: white;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  padding: 1rem 2rem;
  transition-duration: 200ms;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-button:hover {
  background-color: var(--color-primary-active);
}

.fs-button:focus-visible {
  background-color: var(--color-primary-active);
  outline: 3px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-primary);
  font-size: 0.875rem;
  height: 2rem;
  line-height: 1.25rem;
  outline: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-input::placeholder {
  color: var(--color-text-muted);
}

.fs-checkbox-group,
.fs-radio-group {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.fs-checkbox-field,
.fs-radio-field {
  column-gap: 0.5rem;
  display: flex;
}

:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
  margin-top: 0.125rem;
}

.fs-checkbox-wrapper,
.fs-radio-wrapper {
  align-items: center;
  display: flex;
  height: 1.25rem;
}

.fs-checkbox,
.fs-radio {
  background-color: #fff;
  border: 1px solid var(--color-primary);
  height: 1rem;
  width: 1rem;
}

.fs-checkbox {
  border-radius: 0.25rem;
}

.fs-radio {
  border-radius: 100%;
}

.fs-checkbox:checked,
.fs-radio:checked {
  background-color: var(--color-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: transparent;
}

.fs-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.fs-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.fs-slider {
  background: transparent;
  cursor: pointer;
  height: 1.25rem;
  width: 100%;
}

.fs-slider::-moz-range-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-webkit-slider-runnable-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-moz-range-thumb {
  background-color: var(--color-primary);
  border: none; /* Removes extra border that FF applies */
  border-radius: 50%;
  height: 1.25rem;
  width: 1.25rem;
}

.fs-slider::-webkit-slider-thumb {
  appearance: none;
  background-color: var(--color-primary);
  border-radius: 50%;
  height: 1.25rem;
  margin-top: -0.375rem; /* Centers thumb on the track */
  width: 1.25rem;
}

.fs-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-switch-field {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.5rem;
  cursor: pointer;
  height: 1.5rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.75rem;
}

.fs-switch:checked {
  background-color: var(--color-primary);
  background-position: right center;
}

.fs-switch:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea {
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

.fs-textarea:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

        
        Show more
      
        

          HTML React/Tailwind
          Copy Copy
        

        
        // Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";

export function ExampleForm() {
  const [state, handleSubmit] = useForm("FORM_ID");

  if (state.succeeded) {
    return <p>Thanks for joining!</p>;
  }

  return (
    <form className="grid grid-cols-2 gap-x-3 gap-y-4" onSubmit={handleSubmit}>
      <fieldset>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="full-name"
          >
            Full Name
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="full-name"
            name="full-name"
            placeholder="Enter your full name"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="email-address"
          >
            Email Address
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="email-address"
            name="email-address"
            placeholder="Enter your email address"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="phone-number"
          >
            Phone Number
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="phone-number"
            name="phone-number"
            placeholder="Enter your phone number"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="company-name"
          >
            Company/Organization Name
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="company-name"
            name="company-name"
            placeholder="Enter your company/organization name (optional)"
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="event-type"
          >
            Event Type
          </label>
          <select
            className="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="event-type"
            name="event-type"
            required
          >
            <option value="wedding">Wedding</option>
            <option value="birthday">Birthday</option>
            <option value="corporate-event">Corporate Event</option>
            <option value="others">Others</option>
          </select>
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="event-date"
          >
            Event Date
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="event-date"
            name="event-date"
            placeholder="Enter the event date"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="event-time"
          >
            Event Time
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="event-time"
            name="event-time"
            placeholder="Enter the event time"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="guest-count"
          >
            Number of Guests
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="guest-count"
            name="guest-count"
            placeholder="Enter the number of guests"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="event-location"
          >
            Event Location/Address
          </label>
          <textarea
            className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="event-location"
            name="event-location"
            placeholder="Enter the detailed address of the event"
            required
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="menu-type"
          >
            Menu Type
          </label>
          <select
            className="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="menu-type"
            name="menu-type"
            required
          >
            <option value="buffet">Buffet</option>
            <option value="sit-down">Sit-Down</option>
            <option value="finger-foods">Finger Foods</option>
            <option value="custom">Custom</option>
          </select>
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
            Specific Dishes or Packages
          </label>
          <div className="flex flex-col gap-y-2">
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="specific-dishes-vegetarian"
                  name="specific-dishes"
                  required
                  type="checkbox"
                  value="vegetarian"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="specific-dishes-vegetarian"
                >
                  Vegetarian
                </label>
              </div>
            </div>
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="specific-dishes-non-vegetarian"
                  name="specific-dishes"
                  required
                  type="checkbox"
                  value="non-vegetarian"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="specific-dishes-non-vegetarian"
                >
                  Non-Vegetarian
                </label>
              </div>
            </div>
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="specific-dishes-desserts"
                  name="specific-dishes"
                  required
                  type="checkbox"
                  value="desserts"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="specific-dishes-desserts"
                >
                  Desserts
                </label>
              </div>
            </div>
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="specific-dishes-custom-dishes"
                  name="specific-dishes"
                  required
                  type="checkbox"
                  value="custom-dishes"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="specific-dishes-custom-dishes"
                >
                  Custom Dishes
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="dietary-restrictions"
          >
            Dietary Restrictions/Preferences
          </label>
          <textarea
            className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="dietary-restrictions"
            name="dietary-restrictions"
            placeholder="e.g., vegan, gluten-free, nut allergies"
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="flex flex-col gap-y-1.5">
          <label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
            Staffing Requirements
          </label>
          <div className="flex flex-col gap-y-2">
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="staffing-requirements-waitstaff"
                  name="staffing-requirements"
                  type="checkbox"
                  value="waitstaff"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="staffing-requirements-waitstaff"
                >
                  Waitstaff
                </label>
              </div>
            </div>
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="staffing-requirements-bartenders"
                  name="staffing-requirements"
                  type="checkbox"
                  value="bartenders"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="staffing-requirements-bartenders"
                >
                  Bartenders
                </label>
              </div>
            </div>
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="staffing-requirements-cleanup-crew"
                  name="staffing-requirements"
                  type="checkbox"
                  value="cleanup-crew"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="staffing-requirements-cleanup-crew"
                >
                  Cleanup Crew
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
            Rental Equipment
          </label>
          <div className="flex flex-col gap-y-2">
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="rental-equipment-tables"
                  name="rental-equipment"
                  type="checkbox"
                  value="tables"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="rental-equipment-tables"
                >
                  Tables
                </label>
              </div>
            </div>
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="rental-equipment-chairs"
                  name="rental-equipment"
                  type="checkbox"
                  value="chairs"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="rental-equipment-chairs"
                >
                  Chairs
                </label>
              </div>
            </div>
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="rental-equipment-utensils"
                  name="rental-equipment"
                  type="checkbox"
                  value="utensils"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="rental-equipment-utensils"
                >
                  Utensils
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="special-requests"
          >
            Special Requests
          </label>
          <textarea
            className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="special-requests"
            name="special-requests"
            placeholder="e.g., decorations, custom themes, etc."
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="payment-method"
          >
            Payment Method
          </label>
          <select
            className="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="payment-method"
            name="payment-method"
            required
          >
            <option value="credit-card">Credit Card</option>
            <option value="bank-transfer">Bank Transfer</option>
            <option value="cash">Cash</option>
          </select>
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="deposit-amount"
          >
            Deposit Amount
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="deposit-amount"
            name="deposit-amount"
            placeholder="Enter the deposit amount or percentage"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="cardholder-name"
          >
            Cardholder Name
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="cardholder-name"
            name="cardholder-name"
            placeholder="Enter the name on the card (if applicable)"
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="card-number"
          >
            Card Number
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="card-number"
            name="card-number"
            placeholder="Enter the card number (if applicable)"
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="card-expiration-date"
          >
            Expiration Date
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="card-expiration-date"
            name="card-expiration-date"
            placeholder="Enter the expiration date (MM/YYYY)"
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="card-cvv"
          >
            CVV
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="card-cvv"
            name="card-cvv"
            placeholder="Enter the CVV (if applicable)"
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="flex gap-x-2">
          <div className="flex h-5 items-center">
            <input
              className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="terms-agreement"
              name="terms-agreement"
              required
              type="checkbox"
              value="agree"
            />
          </div>
          <div>
            <label
              className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              htmlFor="terms-agreement"
            >
              I agree to the Terms and Conditions
            </label>
          </div>
        </div>
      </fieldset>
      <div className="flex gap-x-2">
        <div className="flex h-5 items-center">
          <input
            className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
            id="cancellation-policy-agreement"
            name="cancellation-policy-agreement"
            required
            type="checkbox"
            value="agree"
          />
        </div>
        <div>
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="cancellation-policy-agreement"
          >
            I understand the cancellation policy
          </label>
        </div>
      </div>
      <div class="col-span-full flex flex-row-reverse gap-x-3">
        <button
          className="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
          type="submit"
        >
          Submit
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-background: #cbd5e1;
    --color-background-alt: #3a9092;
    --color-border-active: #23494c;
    --color-border-default: #94a3b8;
    --color-highlight: #7ecac7;
    --color-primary: #23494c;
    --color-primary-active: #122d30;
    --color-text-default: #0f172a;
    --color-text-muted: #475569;

    --font-family-body: "Open Sans", sans-serif;
    --font-family-display: "Nunito Sans", sans-serif;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  * {
    border: 0;
    margin: 0;
    padding: 0;
  }

  body {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-style: normal;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  [type="checkbox"],
  [type="radio"],
  [type="range"] {
    appearance: none;
    flex-shrink: 0;
    padding: 0;
    user-select: none;
  }

  [type="checkbox"]:focus,
  [type="radio"]:focus,
  [type="range"]:focus {
    outline: none;
  }
}

@layer components {
  .fs-slider {
    background: transparent;
    cursor: pointer;
    height: 1.25rem;
    width: 100%;
  }

  .fs-slider::-moz-range-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-webkit-slider-runnable-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-moz-range-thumb {
    background-color: var(--color-primary);
    border: none; /* Removes extra border that FF applies */
    border-radius: 50%;
    height: 1.25rem;
    width: 1.25rem;
  }

  .fs-slider::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--color-primary);
    border-radius: 50%;
    height: 1.25rem;
    margin-top: -0.375rem; /* Centers thumb on the track */
    width: 1.25rem;
  }

  .fs-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .fs-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

@layer utilities {
  .bg-caret-down {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }

  .bg-checkbox-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  .bg-radio-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

  .bg-switch-thumb {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
  }
}

        
        Show more

How to use this form

Get started in just a few steps.

  1. Create a form on Formspree

    Create a free account and choose New Form.

  2. Add actions and validation rules

    Choose from our growing list of actions, from Airtable to Zendesk and everything in between.

  3. Update your form's action

    Replace with the form endpoint in the code above with the ID from your new form.
    <form action="https://formspree.io/f/{form_id}" method="post">

  4. Tweak your form's code

    Don’t forget to include a name attribute for every input.

  5. Deploy your form to your hosting platform

    Formspree works great with static websites, but also plays nicely with many hosting platforms like Shopify, Webflow and more. See the guides below.

Integration Guides

Contact forms that work out of the box with top website platforms.

GitBook

GitBook

Adding a form to GitBook

 Shopify

Shopify

Adding a form to Shopify

 Gatsby

Gatsby

React Forms with Gatsby

 Eleventy

Eleventy

HTML Forms with Eleventy

 Jekyll

Jekyll

HTML Forms with Jekyll

 NextJS

NextJS

React Forms with NextJS

What is a Catering Order Form?

A catering order form is a practical tool for catering businesses to streamline the process of accepting and managing customer orders for events. These forms typically include fields for customer details, event date, number of guests, menu selections, and any special requests or dietary restrictions. Catering order forms are essential for ensuring accuracy, efficiency, and clear communication between the catering team and the client. They are particularly useful for handling large volumes of orders, customizing services for events, and keeping all necessary information organized.

Formspree’s catering order form template makes it easy for catering businesses to add a professional, functional order form to their website. With Formspree, you can collect customer orders directly through email, while its spam protection and data storage features ensure secure and organized handling of customer information. This template is customizable to fit your specific menu and services, allowing you to focus on delivering excellent catering experiences while Formspree manages the technical details.

FAQ

  • What essential information does an order form collect?

    An order form collects essential details such as the customer’s name, contact information, order items, quantities, and payment preferences. With Formspree as the backend, these forms ensure secure data submission and instant email notifications for efficient order processing.

  • How are order forms used by different businesses like online stores, restaurants, and nonprofits?

    Order forms are versatile tools used by online stores to sell products, restaurants for takeout orders, and nonprofits for merchandise sales or donations. When powered by Formspree, these forms streamline the order process and allow real-time access to submission data for better management.

  • What key elements should be included in an order form?

    Key elements of an order form include product or service descriptions, quantity fields, pricing, payment methods, and contact details. Formspree makes it easy to customize these forms while providing seamless backend functionality for managing submissions and notifications.

  • What are the benefits of using order form templates?

    Order form templates save time, reduce errors, and improve the customer experience by offering a structured and professional design. With Formspree, templates can be integrated effortlessly, providing instant email notifications and easy access to submission data via the dashboard.

  • What are five common types of order forms?

    Common types of order forms include product order forms, service request forms, food order forms, wholesale order forms, and donation order forms. Using Formspree as the backend ensures these forms are flexible and secure, catering to the unique needs of various businesses.

  • Why might your order form not need to collect a delivery address?

    An order form might not need a delivery address if the transaction involves digital products, in-store pickup, or services provided online. With Formspree, you can tailor the form fields to collect only the necessary information, ensuring a streamlined and user-friendly experience.

More order Forms