Hello everyone,
Just wanted to follow up and close the loop on this topic, as we have successfully solved the issue. Thank you to everyone who read the post and thought about it.
The problem was that our sms and marketing checkbox fields were not being saved, even though we verified they were being sent in the browser payload.
The Root Cause:
The core issue was that our form component was being rendered client-side only. We discovered this by using “View Page Source” on our live site and noticing that the entire form’s HTML—including our hidden “blueprint” form—was not present in the initial static HTML file that Netlify serves.
Because of this, Netlify’s build bots could never see the blueprint form to learn about our new sms and marketing fields. They were likely using an old, outdated schema for our form from a previous deploy, which is why they silently dropped the new, unrecognized fields from our submissions.
The Solution That Worked:
The solution was to force Next.js to pre-render the blueprint form into a dedicated static HTML file that Netlify’s bots could find.
- We created a new, unlinked page in our project at
pages/forms.js. - Inside this new file, we placed only the hidden HTML blueprint form, containing
<input>tags for every single field we might submit (includingsmsandmarketing). - We removed the hidden blueprint form from our interactive React component to keep the code clean.
- After redeploying the site, Netlify’s build process discovered the new
/formspage, scanned the complete blueprint, and updated our form’s schema on their backend.
All subsequent submissions now correctly save all fields.
Key Takeaway for others: If your fields are being dropped from a JavaScript-driven form submission despite a correct payload, verify with “View Page Source” that your hidden blueprint form is actually present in the initial static HTML. If it’s not, creating a dedicated, unlinked page just for your form blueprints is a robust solution.