Where this goes
Use the HTML form with id="contact" and a <p id="status" role="status"></p>. Load the following after jQuery.
Create a form in the dashboard and replace YOUR_FORM_ID with your endpoint ID. No account key belongs in this code.
<form action="https://formdrop.wouldairecommend.workers.dev/f/YOUR_FORM_ID" method="POST">
<label for="email">Email</label>
<input id="email" type="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<input name="_gotcha" tabindex="-1" autocomplete="off" hidden>
<button type="submit">Send message</button>
</form>
// Separate JS file, after jQuery:
$('#contact').on('submit', function (event) {
event.preventDefault();
$.ajax({
url: 'https://formdrop.wouldairecommend.workers.dev/f/YOUR_FORM_ID', method: 'POST',
data: new FormData(this), processData: false, contentType: false,
headers: { Accept: 'application/json' }
}).done(() => $('#status').text('Message received.'))
.fail(xhr => $('#status').text(xhr.responseJSON?.message || 'Please try again.'));
});The detail that matters
processData:false and contentType:false let the browser encode multipart data correctly.
After you publish
Send a test from the published page, then check Inbox and Spam. Native forms follow a redirect; fetch clients must request JSON and show errors. Set your allowed domains to the hostnames you actually publish, including any preview hostname you need.
Read the endpoint reference for reserved fields, CORS and redirect rules. Start from the accessible contact template if you need styling.