Description of Issue:
I’m experiencing an issue where form submissions are not showing in the Netlify Forms dashboard despite the form being detected correctly during deployment. I’ve followed the Netlify Forms documentation and ensured the form meets all criteria. However, after submitting the forms I am faced with a ‘303’ response. Which I looked through forum posts for but was not able to find anything that helped. Been at this for almost 6 hours.
Here is my HTML Code for the form:
<form name="contact" method="post" action="/" id="consultation-form" data-netlify="true" netlify>
<input type="hidden" name="form-name" value="contact" />
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" />
<div class="row mb-3">
<div class="col-12 col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="First Name" name="First Name" required />
</div>
<div class="col-12 col-md-6 mt-3 mt-md-0">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Last Name" name="Last Name" />
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" name="Email" required />
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3" placeholder="Message" name="Message" required></textarea>
</div>
<button type="submit" class="btn btn-submit">Submit</button>
</form>
I’m using JavaScript to handle reCAPTCHA v3 validation and form submission. Here is my script:
const form = document.getElementById("consultation-form");
const handleSubmit = async (event) => {
event.preventDefault(); // Prevent form submission from reloading the page
grecaptcha.ready(async () => {
try {
// Execute reCAPTCHA and get the token
const token = await grecaptcha.execute("6LfVtpIqAAAAAAFtdzD58iQvvwxhNVzz_DayrQ8Z", { action: "submit" });
// Attach the token to the hidden input field
document.getElementById("g-recaptcha-response").value = token;
// Collect form data
const formData = new FormData(form);
const formObject = Object.fromEntries(formData.entries());
// Submit the data to the Netlify function for validation
const response = await fetch("/.netlify/functions/validate-recaptcha", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formObject),
});
const result = await response.json();
if (result.success && result.score > 0.5) {
// If reCAPTCHA validation passes, submit the form to Netlify
await fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(formData).toString(),
});
// Show the success section
document.getElementById("contact-form").classList.add("d-none");
document.getElementById("success-section").classList.remove("d-none");
} else {
alert("Failed reCAPTCHA verification. Please try again.");
}
} catch (error) {
console.error("Error during submission:", error);
alert("An error occurred. Please try again later.");
}
});
};
form.addEventListener("submit", handleSubmit);
Here is my serverless function for validation:
import fetch from "node-fetch";
export async function handler(event) {
if (event.httpMethod !== "POST") {
return {
statusCode: 405,
body: JSON.stringify({ success: false, message: "Method not allowed" }),
};
}
const { "g-recaptcha-response": token } = JSON.parse(event.body);
if (!token) {
return {
statusCode: 400,
body: JSON.stringify({ success: false, message: "Missing reCAPTCHA token" }),
};
}
const secretKey = process.env.RECAPTCHA_SECRET; // Securely load secret key from Netlify environment variables
const response = await fetch(`https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${token}`, { method: "POST" });
const verificationResult = await response.json();
if (verificationResult.success && verificationResult.score > 0.5) {
return {
statusCode: 200,
body: JSON.stringify({ success: true, score: verificationResult.score }),
};
} else {
return {
statusCode: 400,
body: JSON.stringify({
success: false,
message: "reCAPTCHA verification failed",
errorCodes: verificationResult["error-codes"],
}),
};
}
}
Observations:
The form is detected in the Netlify Forms dashboard after deployment.
Submissions are not appearing in the dashboard, even after successful POST requests.
Troubleshooting Attempts:
Verified that all input fields have unique name attributes matching the HTML form.
Ensured the action=“/” attribute is present in the tag.
Confirmed that the form includes data-netlify=“true” and a hidden form-name field.
Tested locally using netlify dev --context production and on the production site hosted on Netlify.
Checked spam submissions in the Netlify Forms dashboard.
Questions for Support:
Are there any specific reasons why the submissions might not be showing despite correct form detection and payloads?
Could the reCAPTCHA validation workflow interfere with Netlify’s form handling, and how should this be resolved?
Does the 303 response indicate a misconfiguration in the form’s action or submission process?
Are there additional debugging steps or logs I can review to identify the issue?
Deployment Info:
Site URL: https://medenditactus.netlify.app
Form Name: contact
No framework (HTML, CSS, JS)
reCAPTCHA v3 with Netlify serverless validation
Any help will be appreciated aswell as any suggestions both with my implementation and potential fixes to my issue.