Contact from here is a netlify form. I have a bunch of hidden fields that I’m using for utm param values. They’re not showing in the submission in netlify and the email notification. Tried using a different form name, that didn’t work. Tried hidden fields, text fields in display: none divs – didn’t work either. I can see the values being sent with the request. What am I missing?
import React, { useState, useEffect } from "react"
import { getStoredParams, getLastReferrer } from "../../helpers/paramUtils";
export default function ContactForm({ block }) {
useEffect(() => {
const storedParams = getStoredParams();
const currentReferrer = getLastReferrer();
if (storedParams) {
document.getElementById('utm_source').value = storedParams.utm_source || '';
document.getElementById('utm_campaign').value = storedParams.utm_campaign || '';
document.getElementById('utm_medium').value = storedParams.utm_medium || '';
document.getElementById('utm_content').value = storedParams.utm_content || '';
document.getElementById('fbclid').value = storedParams.fbclid || '';
document.getElementById('gclid').value = storedParams.gclid || '';
document.getElementById('referrer').value = currentReferrer || '';
}
}, []);
const { heading } = block;
const [isLoading, setIsLoading] = useState(false)
const [isSuccess, setIsSuccess] = useState(false)
const [isError, setIsError] = useState(false)
const handleSubmit = async (event) => {
event.preventDefault();
const myForm = event.target;
const formData = new FormData(myForm);
try {
setIsError(false)
setIsLoading(true)
fetch("/favicon.ico", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(formData).toString(),
})
.then(() => {
setIsLoading(false)
setIsSuccess(true)
window.dataLayer = window.dataLayer || []
window.dataLayer.push({
event: 'tba.form.confirmation',
eventData: {
formTitle: 'Contact Us',
formLocation: 'contact'
}
})
})
.catch((error) => {
setIsLoading(false)
setIsSuccess(false)
setIsError(true)
});
} catch (error) {
setIsLoading(false)
setIsError(true)
}
};
return (
<>
<div id="form" className="-top-32 relative"></div>
<div className="container container--constrained relative">
{isError && (
<div className="alert alert-danger form-error">
Sorry, an unexpected error occurred. Please try again.
</div>
)}
{isSuccess ? (
<div className="alert alert-success form-success" style={{ 'text-align': 'center' }}>
Thank you for your submission. We'll be in touch soon!
</div>
) : (
<form
className="my-12 md:my-24"
name="contact"
action="/success"
method="POST"
data-netlify="true"
onSubmit={e => handleSubmit(e)}
>
<input type="hidden" name="form-name" value="contact" />
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div style={{ display: 'none' }}>
<label htmlFor="utm_source">UTM Source</label>
<input type="text" name="utm_source" id="utm_source"/>
</div>
<div style={{ display: 'none' }}>
<label htmlFor="utm_campaign">UTM Campaign</label>
<input type="text" name="utm_campaign" id="utm_campaign"/>
</div>
<div style={{ display: 'none' }}>
<label htmlFor="utm_medium">UTM Medium</label>
<input type="text" name="utm_medium" id="utm_medium"/>
</div>
<div style={{ display: 'none' }}>
<label htmlFor="utm_content">UTM Content</label>
<input type="text" name="utm_content" id="utm_content"/>
</div>
<div style={{ display: 'none' }}>
<label htmlFor="fbclid">FB clid</label>
<input type="text" name="fbclid" id="fbclid"/>
</div>
<div style={{ display: 'none' }}>
<label htmlFor="gclid">G clid</label>
<input type="text" name="gclid" id="gclid"/>
</div>
<div style={{ display: 'none' }}>
<label htmlFor="referrer">Referrer</label>
<input type="text" name="referrer" id="referrer"/>
</div>
<div className="sm:col-span-3">
<label
htmlFor="first-name"
className="block font-medium text-gray-700"
>
First Name <em className="text-teal-500">(Required)</em>
</label>
<div className="mt-1">
<input
type="text"
name="first-name"
id="first-name"
autoComplete="given-name"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
required
/>
</div>
</div>
<div className="sm:col-span-3">
<label
htmlFor="last-name"
className="block font-medium text-gray-700"
>
Last Name <em className="text-teal-500">(Required)</em>
</label>
<div className="mt-1">
<input
type="text"
name="last-name"
id="last-name"
autoComplete="family-name"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
required
/>
</div>
</div>
<div className="sm:col-span-3">
<label htmlFor="email" className="block font-medium text-gray-700">
Email <em className="text-teal-500">(Required)</em>
</label>
<div className="mt-1">
<input
id="email"
name="email"
type="email"
autoComplete="email"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
required
/>
</div>
</div>
<div className="sm:col-span-3">
<label htmlFor="phone" className="block font-medium text-gray-700">
Phone <em className="text-teal-500">(Required)</em>
</label>
<div className="mt-1">
<input
id="phone"
name="phone"
type="text"
autoComplete="phone"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
required
/>
</div>
</div>
<div className="sm:col-span-6">
<label
htmlFor="message"
className="block font-medium text-gray-700"
>
Message <em className="text-teal-500">(Required)</em>
</label>
<div className="mt-1">
<textarea
id="message"
name="message"
type="text"
rows="10"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
required
/>
</div>
</div>
<div className="sm:col-span-6">
<button type="submit" className="button">
Submit
</button>
</div>
{isLoading && (
<div className="loading-rings">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
)}
</div>
</form>
)}
</div>
</>
);
}