A static site can't receive a form on its own: something has to take the POST, keep the message and tell you. You don't need to write that part. Point the form's action at your InboxPanda endpoint and the browser sends each message straight there.
1
The form
HTML<form action="https://inboxpanda.io/f/your-form-id" method="POST"> <label>Name <input name="name" autocomplete="name" required></label> <label>Email <input name="email" type="email" autocomplete="email" required></label> <label>Message <textarea name="message" required></textarea></label> <!-- Spam trap: keep it hidden --> <input name="_honey" style="display:none" tabindex="-1" autocomplete="off"> <button type="submit">Send</button> </form>
To get your own endpoint, type your email on the home page and press Create your inbox: no password, no card. The code above, with your endpoint in it, is under Settings, then Messages in. Open the link we email you to claim the inbox.
That's the whole install. Your markup and CSS stay yours: style the form like anything else on the page.
2
The rules
- Every field needs a
name. It's the field's label in your inbox. A form with no named fields is refused. - Use
method="POST". - Any field works. Add a phone number, a dropdown, checkboxes:
<select name="budget">arrives under budget. Several checkboxes with the same name arrive as one field, likedesign, copy. - Text up to 32 KB per message. More than any contact form needs.
- Every field needs a
3
Options
Fields starting with
_are settings, not part of the message:Field What it does _redirectA page on your site to send the visitor to after sending, like https://yoursite.com/thanks. It has to be on the same site as the form._subjectThe subject line of your notification email. _honeyThe spam trap. Keep it hidden and empty: bots fill it in, people don't. HTML<input type="hidden" name="_redirect" value="https://yoursite.com/thanks"> <input type="hidden" name="_subject" value="New enquiry from the website">
Without
_redirect, visitors see a thank-you page. You can change its title and message, or set your own page once for every form, under Settings, then After someone sends.4
File uploads
Add
enctype="multipart/form-data"and a file input:HTML<form action="https://inboxpanda.io/f/your-form-id" method="POST" enctype="multipart/form-data"> <input name="email" type="email" required> <input name="cv" type="file" accept=".pdf,.doc,.docx"> <button type="submit">Send</button> </form>
PDF, Word, text and image files are accepted, up to 4 MB per message in total. Uploads work once you've claimed the inbox.
5
Without leaving the page
To show "Thanks" in place instead of loading a new page, send the form with
fetchand ask for JSON:HTML<script> document.querySelector("form").addEventListener("submit", async (e) => { e.preventDefault() const res = await fetch(e.target.action, { method: "POST", headers: { Accept: "application/json" }, body: new URLSearchParams(new FormData(e.target)), }) e.target.outerHTML = res.ok ? "<p>Thanks. We'll get back to you soon.</p>" : "<p>Something went wrong. Please try again.</p>" }) </script>
With
Accept: application/jsonthe endpoint answers{"ok": true, "id": "…"}instead of a page. It accepts posts from any site, so there's nothing to configure.6
Check it works
Send the form from a different email address than your own. It shows up in your inbox within a few seconds, and you get an email about it. Or skip the site: Send test submission under Messages in sends one for you.
If it lands in Spam, press Not spam: a message that only says "test" can look like spam.