Connect with Vue
Submit Vue reactive form state through the public 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 Vue Single File Component with a form and reactive email/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
Bind the form fields to your reactive object and call submit from the form handler. Display validation and HTTP errors in the component.
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 Vue generator used by Form Setup. Replace placeholder IDs and configure required fields for your form.
<script setup>
import { reactive } from 'vue';
const body = reactive({ 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.