Last month I shipped a contact form that was, on paper, correct. Semantic HTML, keyboard accessible, validation that fired exactly when it should. The kind of component you would happily show another developer. Two weeks later the client called: “We just lost a major referral because the entry was sitting in an unmonitored inbox over the weekend.”
The form worked. The handoff did not. Front-end work tends to stop caring about the data the moment it leaves the fetch() call, and that is exactly where Form Automation lives: the stretch between a successful POST and somebody in the business acting on the lead. A workflow that ends in an inbox is a queue nobody is watching.
The notification fallacy
Most of us treat a submission as a notification. A sales team wants a CRM record and a Slack ping, usually with a follow-up sequence hanging off it. Treat the submission as a message rather than a payload and the damage shows up downstream: duplicate records, plus formatting that quietly breaks the automated import until somebody retypes the fields by hand.
The usual handling looks like this:
// The \"Junior\" approach: Fire and forget
fetch('/api/contact', {
method: 'POST',
body: JSON.stringify(formData)
}).then(() => alert('Thanks!'));It works until someone double-clicks and Salesforce ends up with two leads for one person. Or they type their name in ALL CAPS and your greeting email arrives shouting. Both problems get fixed in the same place: normalize the data before it leaves the browser.
Normalize the data early
Downstream tools are not clever about this. I once watched a client hand-deduplicate 200 CRM records because “John Smith” and “john smith ” with a trailing space counted as two different people. A few lines of JavaScript would have spared them the whole afternoon.
function normalizeFormData(data) {
return {
// Title case the name and trim whitespace
name: data.name.trim()
.split(' ')
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(' '),
// Lowercase email to prevent duplicates
email: data.email.trim().toLowerCase(),
// Strip everything but digits for CRM compatibility
phone: data.phone.replace(/\\D/g, ''),
timestamp: new Date().toISOString()
};
}For phone numbers, use libphonenumber-js instead of writing your own parser for international formats. Whatever Form Automation you build on top of Zapier or Make inherits the quality of what you feed it.
Race conditions and double submits
On a slow connection, people click submit until the page reacts. With no guard on that, you get race conditions and duplicate leads, so track the submission state explicitly on the front end.
let isSubmitting = false;
async function bbioon_handleSubmit(e) {
e.preventDefault();
if (isSubmitting) return;
isSubmitting = true;
const btn = e.target.querySelector('button[type=\"submit\"]');
btn.disabled = true;
btn.textContent = 'Processing...';
try {
const payload = normalizeFormData(Object.fromEntries(new FormData(e.target)));
await sendToWebhook(payload);
showSuccessState();
} catch (err) {
isSubmitting = false;
btn.disabled = false;
btn.textContent = 'Retry Submission';
}
}Structure the payload for whoever reads it
When you push to a Zapier webhook, the person wiring up the automation should not need a regex to pull a first name out of your object. Group the fields the way they are going to be consumed. I made the same argument in my post on pragmatic workflow automation.
Nesting the categories gets you most of the way there:
const structuredPayload = {
customer_context: {
first_name: name.split(' ')[0],
last_name: name.split(' ').slice(1).join(' '),
email: email
},
meta: {
source: 'homepage_hero_form',
conversion_url: window.location.href
}
};If lead capture like this is eating your dev hours, hand it over. I have been wrestling with WordPress and high-volume form handling since the 4.x days.
Where the job actually ends
A POST returning 200 OK means the browser is finished, not that the work is. The job ends when someone can act on the lead. Move validation, normalization and structuring into the front end and what you hand off is a clean record rather than a message somebody has to interpret first.
