Jekyll Booking Form Generator

---
layout: page
title: Booking Form Form
permalink: /forms/booking-form/
---

<!-- Jekyll Form with Liquid Templating -->
<div class="form-container">
  {% if site.form_success %}
  <div class="form-success">
    <h3>Thank you for your submission!</h3>
    <p>{{ site.form_success_message }}</p>
    <a href="{{ page.url }}" class="reset-button">Submit another response</a>
  </div>
  {% else %}
  <form id="booking-form" action="{% if site.form_endpoint %}{{ site.form_endpoint }}{% else %}https://api.parrotforms.com/v1/forms/submit{% endif %}" method="POST" class="form">
    <!-- Replace with your actual ParrotForms endpoint in _config.yml -->
    <input type="hidden" name="form_name" value="booking-form">
    <div class="form-group">
      <label for="name">Full Name <span class="required">*</span></label>
      <input type="text" id="name" name="name" required
        {% if site.form_data.name %}value="{{ site.form_data.name }}"{% endif %}>
    </div>
    <div class="form-group">
      <label for="email">Email Address <span class="required">*</span></label>
      <input type="email" id="email" name="email" required
        {% if site.form_data.email %}value="{{ site.form_data.email }}"{% endif %}>
    </div>
    <div class="form-group">
      <label for="phone">Phone Number <span class="required">*</span></label>
      <input type="tel" id="phone" name="phone" required
        {% if site.form_data.phone %}value="{{ site.form_data.phone }}"{% endif %}>
    </div>
    <div class="form-group">
      <label for="service">Service <span class="required">*</span></label>
      <select id="service" name="service" required>
        <option value="">Select an option</option>
        <option value="Service A" {% if site.form_data.service == "Service A" %}selected{% endif %}>Service A</option>
        <option value="Service B" {% if site.form_data.service == "Service B" %}selected{% endif %}>Service B</option>
        <option value="Service C" {% if site.form_data.service == "Service C" %}selected{% endif %}>Service C</option>
      </select>
    </div>
    <div class="form-group">
      <label for="date">Preferred Date <span class="required">*</span></label>
      <input type="date" id="date" name="date" required
        {% if site.form_data.date %}value="{{ site.form_data.date }}"{% endif %}>
    </div>
    <div class="form-group">
      <label for="time">Preferred Time <span class="required">*</span></label>
      <select id="time" name="time" required>
        <option value="">Select an option</option>
        <option value="Morning" {% if site.form_data.time == "Morning" %}selected{% endif %}>Morning</option>
        <option value="Afternoon" {% if site.form_data.time == "Afternoon" %}selected{% endif %}>Afternoon</option>
        <option value="Evening" {% if site.form_data.time == "Evening" %}selected{% endif %}>Evening</option>
      </select>
    </div>
    <div class="form-group">
      <button type="submit" class="submit-button">{% if site.form_submitting %}{{ site.form_submitting }}{% else %}Submit{% endif %}</button>
    </div>

    {% if site.form_error %}
    <div class="error-message">
      {{ site.form_error_message }}
    </div>
    {% endif %}
  </form>
  {% endif %}
</div>

<!-- Add this to your assets/css/main.scss or include in your CSS -->
<style>
.form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #333;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fff;
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

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

.radio-item, .checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

span.required {
  color: #e53e3e;
  margin-left: 2px;
}

.submit-button {
  background-color: #4a7dbd;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-button:hover {
  background-color: #3a6eae;
}

.form-success {
  text-align: center;
  color: #2f855a;
  padding: 1.5rem;
  background-color: #f0fff4;
  border-radius: 4px;
}

.error-message {
  color: #c53030;
  padding: 0.75rem;
  background-color: #fff5f5;
  border-radius: 4px;
  margin-top: 1rem;
}

.reset-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1px solid #4a7dbd;
  color: #4a7dbd;
  border-radius: 4px;
  text-decoration: none;
}

.reset-button:hover {
  background-color: #f0f7ff;
}
</style>

<!-- Add this JavaScript for form submission handling -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('booking-form');
  if (form) {
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      
      // Show loading state
      const submitButton = form.querySelector('button[type="submit"]');
      const originalText = submitButton.textContent;
      submitButton.textContent = 'Submitting...';
      submitButton.disabled = true;
      
      // Collect form data
      const formData = new FormData(form);
      const formObject = {};
      formData.forEach((value, key) => {
        // Handle arrays (checkboxes with same name)
        if (key.endsWith('[]')) {
          const arrayKey = key.slice(0, -2);
          if (!formObject[arrayKey]) {
            formObject[arrayKey] = [];
          }
          formObject[arrayKey].push(value);
        } else {
          formObject[key] = value;
        }
      });
      
      // Send data to ParrotForms endpoint
      fetch(form.action, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formObject)
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('Form submission failed');
        }
        return response.json();
      })
      .then(data => {
        // Show success message
        const formContainer = form.closest('.form-container');
        const successHtml = `
          <div class="form-success">
            <h3>Thank you for your submission!</h3>
            <p>We have received your information and will be in touch soon.</p>
            <a href="${window.location.pathname}" class="reset-button">Submit another response</a>
          </div>
        `;
        formContainer.innerHTML = successHtml;
      })
      .catch(error => {
        console.error('Error:', error);
        // Show error message
        let errorDiv = form.querySelector('.error-message');
        if (!errorDiv) {
          errorDiv = document.createElement('div');
          errorDiv.className = 'error-message';
          form.appendChild(errorDiv);
        }
        errorDiv.textContent = 'There was a problem submitting your form. Please try again.';
        
        // Reset button
        submitButton.textContent = originalText;
        submitButton.disabled = false;
      });
    });
  }
});
</script>

/*
# Instructions for _config.yml:
# Add these configuration options to your Jekyll _config.yml file

# ParrotForms Integration
form_endpoint: https://api.parrotforms.com/v1/forms/submit
form_success: false
form_success_message: We have received your information and will be in touch soon.
form_submitting: Submitting...
form_error: false
form_error_message: There was a problem submitting your form. Please try again.

# You can also pre-populate form fields with default values:
form_data:
  # Example pre-filled values:
  # name: "Default Name"
  # email: "default@example.com"

*/