Basic Form
Add a form to any Jekyll page or layout:_includes/contact-form.html
<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
<input type="hidden" name="_next" value="{{ site.url }}/thank-you/">
<input type="text" name="_gotcha" style="display:none">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send</button>
</form>
Include in Page
contact.md
---
layout: page
title: Contact
---
# Contact Us
{% include contact-form.html %}
With Config
Store your organization code and form slug in _config.yml:_config.yml
formbnb_org_code: YOUR_ORG
formbnb_form_slug: YOUR_FORM
_includes/contact-form.html
<form action="https://api.formbnb.com/f/{{ site.formbnb_org_code }}/{{ site.formbnb_form_slug }}" 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:<form id="contact-form" action="https://api.formbnb.com/f/{{ site.formbnb_org_code }}/{{ site.formbnb_form_slug }}" 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' }
});
status.textContent = res.ok ? 'Thanks!' : 'Error, try again.';
if (res.ok) form.reset();
} catch (err) {
status.textContent = 'Error, try again.';
}
});
</script>