Connect with Svelte
Connect a lightweight Svelte form via the browser endpoint.
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.
Create a Svelte component with bound email and message fields.
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
Use an onsubmit handler, call the public endpoint and display an error on non-2xx responses. No secret token is needed in the browser.
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 Svelte generator used by Form Setup. Replace placeholder IDs and configure required fields for your form.
<script>
let body = { email: '', message: '' };
async function submit() {
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());
}
</script>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.