Hugo Booking Form Generator

{{/* Hugo Form Template for Booking form */}}
{{ define "main" }}
<section class="form-section py-8">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto bg-white rounded-lg shadow-md p-6">
      <h2 class="text-2xl font-bold text-gray-800 mb-6">Booking form</h2>
      
      <form id="form" action="{{ .Site.Params.formEndpoint }}" method="POST" class="space-y-6">
        <input type="hidden" name="form-name" value="booking-form">
        
        <!-- Name Field -->
        <div class="form-group">
          <label for="name" class="block text-gray-700 text-sm font-medium mb-2">Name <span class="text-red-500">*</span></label>
          <input 
            type="text" 
            id="name" 
            name="name" 
            required
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
          <div class="error-message text-red-600 text-sm mt-1 hidden" id="name-error">Please enter your name</div>
        </div>
        
        <!-- Email Field -->
        <div class="form-group">
          <label for="email" class="block text-gray-700 text-sm font-medium mb-2">Email <span class="text-red-500">*</span></label>
          <input 
            type="email" 
            id="email" 
            name="email" 
            required
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
          <div class="error-message text-red-600 text-sm mt-1 hidden" id="email-error">Please enter a valid email address</div>
        </div>
        
        <!-- Message Field -->
        <div class="form-group">
          <label for="message" class="block text-gray-700 text-sm font-medium mb-2">Message <span class="text-red-500">*</span></label>
          <textarea 
            id="message" 
            name="message" 
            rows="4" 
            required
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          ></textarea>
          <div class="error-message text-red-600 text-sm mt-1 hidden" id="message-error">Please enter your message</div>
        </div>
        
        <!-- Submit Button -->
        <div class="form-group">
          <button 
            type="submit" 
            class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
          >
            Submit
          </button>
        </div>
        
        <!-- Form Status Messages -->
        <div id="form-success" class="hidden bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
          Thank you! Your form has been submitted successfully.
        </div>
        
        <div id="form-error" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
          Sorry, there was an error submitting your form. Please try again.
        </div>
      </form>
    </div>
  </div>
</section>

<!-- Custom JavaScript for form validation -->
{{ $js := resources.Get "js/form-validation.js" | resources.Minify }}
<script src="{{ $js.RelPermalink }}"></script>
{{ end }}

{{/* 
  To use this template:
  1. Create a partial in layouts/partials/forms/booking-form.html with this content
  2. Add the form endpoint to your config.toml:
     [params]
       formEndpoint = "https://formendpoint.example.com"
  3. Include the partial in your template:
     {{ partial "forms/booking-form.html" . }}
*/}}

{{/* form-validation.js content:
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('form');
  
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    if (validateForm()) {
      submitForm();
    }
  });
  
  function validateForm() {
    let isValid = true;
    
    // Validate name
    const name = document.getElementById('name');
    if (!name.value.trim()) {
      showError('name-error');
      isValid = false;
    } else {
      hideError('name-error');
    }
    
    // Validate email
    const email = document.getElementById('email');
    if (!email.value.trim() || !isValidEmail(email.value)) {
      showError('email-error');
      isValid = false;
    } else {
      hideError('email-error');
    }
    
    // Validate message
    const message = document.getElementById('message');
    if (!message.value.trim()) {
      showError('message-error');
      isValid = false;
    } else {
      hideError('message-error');
    }
    
    return isValid;
  }
  
  function isValidEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  }
  
  function showError(id) {
    document.getElementById(id).classList.remove('hidden');
  }
  
  function hideError(id) {
    document.getElementById(id).classList.add('hidden');
  }
  
  function submitForm() {
    const formData = new FormData(form);
    const submitButton = form.querySelector('button[type="submit"]');
    
    // Disable button and change text
    submitButton.disabled = true;
    submitButton.textContent = 'Submitting...';
    
    fetch(form.action, {
      method: 'POST',
      body: formData
    })
    .then(response => {
      submitButton.disabled = false;
      submitButton.textContent = 'Submit';
      
      if (response.ok) {
        form.reset();
        document.getElementById('form-success').classList.remove('hidden');
        document.getElementById('form-error').classList.add('hidden');
        
        // Hide success message after 5 seconds
        setTimeout(() => {
          document.getElementById('form-success').classList.add('hidden');
        }, 5000);
      } else {
        throw new Error('Form submission failed');
      }
    })
    .catch(error => {
      submitButton.disabled = false;
      submitButton.textContent = 'Submit';
      document.getElementById('form-error').classList.remove('hidden');
      document.getElementById('form-success').classList.add('hidden');
      
      // Hide error message after 5 seconds
      setTimeout(() => {
        document.getElementById('form-error').classList.add('hidden');
      }, 5000);
    });
  }
});
*/}}