Connect with Vanilla JavaScript
Submit an existing form using fetch and inspect the HTTP response.
Before you begin
In Panther Hook, open Forms → your form → Setup & delivery → Form setup. Copy its public form key or internal form ID, depending on your integration mode.
Add a form element with id="contact-form" and named inputs to a web page. Use its submit event handler.
Start with the setup checklistStep-by-step integration
Step 1: Configure the form
Copy the public form key from Form Setup. It is designed to be visible to a browser, unlike a private API token.
Step 2: Add the integration
The example uses browser fetch, so only the public form key belongs here. Keep Authorization and private API tokens off the page.
Step 3: Send a safe test
Use the dashboard Send test submission control or append ?test=true to the public submission endpoint while validating the connection.
Step 4: Verify and go live
Open the form’s Submissions tab and select Test data. Confirm received fields, then configure any delivery destinations and verify attempts in Deliveries.
Use the production endpoint only after testing. A successfully stored lead and a successful outbound delivery are two separate states.
Example code
The example below comes from the same JavaScript generator used by Form Setup. Replace placeholder IDs and configure required fields for your form.
const form = document.querySelector('#contact-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const body = Object.fromEntries(new FormData(form));
const response = await fetch('https://pantherhook.com/f/YOUR_PUBLIC_FORM_KEY', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body),
});
if (!response.ok) throw new Error(await response.text());
});Troubleshooting and security
- A 400 or 422 response can indicate missing or invalid fields. Compare payload keys and form validation rules.
- A 403 response may indicate a missing scope, blocked origin, or authorization rule. Do not bypass restrictions by exposing a private token.
- A 429 response means you reached a request rate limit. Use a bounded backoff rather than retrying continuously.
- A request can be accepted even if an outbound integration is failing; inspect the destination separately in Deliveries.