Hugo Integration Guide

# Install Hugo (macOS)
brew install hugo

# Or download from https://github.com/gohugoio/hugo/releases

# Create new site
hugo new site my-staticbox-app
cd my-staticbox-app

# Add a theme (example: PaperMod)
git init
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
echo 'theme = "PaperMod"' >> config.toml

# Start development server
hugo server -D

<!-- layouts/partials/contact-form.html -->
<form id="contact-form" class="contact-form">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  <button type="submit" id="submit-btn">Send Message</button>
  <div id="form-status"></div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('contact-form');
  const status = document.getElementById('form-status');
  const submitBtn = document.getElementById('submit-btn');
  
  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(form);
    
    submitBtn.disabled = true;
    submitBtn.textContent = 'Sending...';
    status.innerHTML = '';
    
    try {
      const response = await fetch('https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit', {
        method: 'POST',
        body: formData,
      });
      
      if (response.ok) {
        status.innerHTML = '<p class="success">Thank you! Your message has been sent.</p>';
        form.reset();
      } else {
        throw new Error('Failed to send message');
      }
    } catch (error) {
      status.innerHTML = '<p class="error">Error sending message. Please try again.</p>';
    } finally {
      submitBtn.disabled = false;
      submitBtn.textContent = 'Send Message';
    }
  });
});
</script>

<style>
.contact-form {
  max-width: 600px;
  margin: 2rem auto;
}

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

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

button[type="submit"] {
  background: #0066cc;
  color: white;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.success { color: green; }
.error { color: red; }
</style>

<!-- content/contact.md -->
---
title: "Contact Us"
date: 2024-01-01
draft: false
---

# Contact Us

We'd love to hear from you! Send us a message using the form below.

{{< contact-form >}}

<!-- layouts/shortcodes/contact-form.html -->
{{ partial "contact-form.html" . }}

<!-- Enhanced form with validation -->
<form id="contact-form" class="contact-form" novalidate>
  <div class="form-group">
    <label for="name">Name *</label>
    <input type="text" id="name" name="name" required minlength="2">
    <span class="error-message" id="name-error"></span>
  </div>
  <div class="form-group">
    <label for="email">Email *</label>
    <input type="email" id="email" name="email" required>
    <span class="error-message" id="email-error"></span>
  </div>
  <div class="form-group">
    <label for="message">Message *</label>
    <textarea id="message" name="message" rows="5" required minlength="10"></textarea>
    <span class="error-message" id="message-error"></span>
  </div>
  <button type="submit" id="submit-btn">Send Message</button>
  <div id="form-status"></div>
</form>

<script>
// Add validation logic
function validateForm() {
  let isValid = true;
  
  // Name validation
  const name = document.getElementById('name');
  const nameError = document.getElementById('name-error');
  if (name.value.trim().length < 2) {
    nameError.textContent = 'Name must be at least 2 characters';
    isValid = false;
  } else {
    nameError.textContent = '';
  }
  
  // Email validation
  const email = document.getElementById('email');
  const emailError = document.getElementById('email-error');
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email.value)) {
    emailError.textContent = 'Please enter a valid email address';
    isValid = false;
  } else {
    emailError.textContent = '';
  }
  
  return isValid;
}
</script>