FormDex integration
A complete production checklist for HTML, JavaScript, React, Node.js, cURL, and WordPress integrations.
End-to-end setup
Add important fields to the schema for validation. Enable Dynamic fields only when your frontend must send additional keys.
Open the form’s Integrate tab. Use the endpoint exactly as shown and keep the API key out of public repositories.
Use the exact Honeypot field name saved in FormDex. It must be an empty, visually hidden text input in browser-facing forms.
Add the full origin, for example https://example.com. Do not include page paths. Use Test mode only for temporary cURL or Postman checks.
Copy the generated provider script and widget markup. The public site key belongs in the browser; the secret stays saved in FormDex.
Submit from the production website, confirm it in Submissions, verify the notification email and webhook, then disable Test mode.
Choose your stack
Contact Form 7 routing, configuration, and debugging.
Read guideNative form posts, honeypot, captcha, and attachments.
Read guideFetch requests, FormData, and response handling.
Read guideAccessible state handling, honeypot markup, and safe submission.
Read guideSafe endpoint and validation testing from a terminal.
Read guideSecure server-side proxy integration with Express.
Read guideHoneypot protection
The honeypot is a normal text input that real visitors must never complete. FormDex checks the configured field name before validation; any non-empty value is rejected as spam. The field is removed before the accepted payload is stored, emailed, exported, or forwarded.
Do not use type="hidden" for the honeypot. Many bots deliberately ignore hidden-type inputs. Use a visually hidden text input, remove it from keyboard navigation, and keep it empty. Do not prefill it with a company name or placeholder value.
<div aria-hidden="true"
style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
<label>Leave this field empty
<input
type="text"
name="company"
tabindex="-1"
autocomplete="off"
/>
</label>
</div>company, replace the example’s name with the exact saved value. Changing the setting without updating the frontend disables the intended trap.HTML starter
<form action="https://YOUR_FORMDEX_DOMAIN/api/forms/FORM_ID"
method="POST" enctype="multipart/form-data">
<input type="hidden" name="_api_key" value="YOUR_API_KEY" />
<!-- Use the honeypot block shown below -->
<input type="email" name="email" required />
<textarea name="message" required></textarea>
<button type="submit">Send enquiry</button>
</form>The Integrate tab generates the current snippet for each form, including its saved honeypot name, captcha provider, and attachment setting. Prefer that generated snippet over copying this generic example.