> ## Documentation Index
> Fetch the complete documentation index at: https://formbnb.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Hugo

> Add contact forms to your Hugo static site

## Basic Form

Add a form to any Hugo template or content file:

```html layouts/partials/contact-form.html theme={null}
<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
  <input type="hidden" name="_next" value="{{ .Permalink }}thank-you/">
  <input type="text" name="_gotcha" style="display:none">
  
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div>
    <label for="message">Message</label>
    <textarea id="message" name="message" required></textarea>
  </div>
  
  <button type="submit">Send Message</button>
</form>
```

## Shortcode

Create a reusable shortcode:

```html layouts/shortcodes/contact.html theme={null}
{{ $formSlug := .Get "slug" }}
{{ $orgCode := .Get "org" }}
<form action="https://api.formbnb.com/f/{{ $orgCode }}/{{ $formSlug }}" method="POST">
  <input type="text" name="_gotcha" style="display:none">
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>
```

Use in content:

```markdown theme={null}
{{</* contact org="YOUR_ORG" slug="YOUR_FORM" */>}}
```

## With Config

Store your organization code and form slug in config.toml:

```toml config.toml theme={null}
[params]
  formbnbOrgCode = "YOUR_ORG"
  formbnbFormSlug = "YOUR_FORM"
```

```html layouts/partials/contact-form.html theme={null}
<form action="https://api.formbnb.com/f/{{ .Site.Params.formbnbOrgCode }}/{{ .Site.Params.formbnbFormSlug }}" method="POST">
  <input type="text" name="_gotcha" style="display:none">
  
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  
  <button type="submit">Send</button>
</form>
```

## AJAX Submission

Add JavaScript for submission without page reload:

```html layouts/partials/ajax-form.html theme={null}
<form id="contact-form" action="https://api.formbnb.com/f/{{ .Site.Params.formbnbOrgCode }}/{{ .Site.Params.formbnbFormSlug }}" method="POST">
  <input type="text" name="_gotcha" style="display:none">
  
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  
  <button type="submit">Send</button>
  <p id="form-status"></p>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const form = this;
  const status = document.getElementById('form-status');
  
  status.textContent = 'Sending...';
  
  try {
    const res = await fetch(form.action, {
      method: 'POST',
      body: new FormData(form),
      headers: { 'Accept': 'application/json' }
    });
    
    if (res.ok) {
      status.textContent = 'Thanks!';
      form.reset();
    } else {
      status.textContent = 'Error, please try again.';
    }
  } catch (err) {
    status.textContent = 'Error, please try again.';
  }
});
</script>
```