Forms doesn't work in some browsers (Gatsby)

Hello,

I really enjoy working with the easy and clear infrastructure netlify provides.

However I’ve come to the point where I’m encountering a bug I can’t figure out.

I’m using gatsby and am using netlify forms as it is described in the docs, I’ve just changed some tags eg. p->div to align more with my style of coding. My form URL is agenturignis.de/termin

The problem I’m having is that forms work in in some browsers and in others they don’t

Browsers that work:
Opera desktop,
MS Edge desktop,
Safari mobile,
Chrome mobile

Browsers that don’t work:
Chrome desktop,
Firefox desktop,
Brave desktop

Chrome mobile, Opera desktop and Brave desktop were clean installs just to test this out. I use the other browsers almost with default settings.

The weird thing is, that the data shows as sent in the dev tools.

Here’s my code:

/** @jsx jsx */
import { jsx } from "theme-ui";
import React from "react";
import { navigate } from "gatsby";

function encode(data) {
	return Object.keys(data)
		.map(
			(key) =>
				encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
		)
		.join("&");
}

const Form = () => {
	const [state, setState] = React.useState({});

	const handleChange = (e) => {
		setState({ ...state, [e.target.name]: e.target.value });
	};

	const handleSubmit = (e) => {
		e.preventDefault();
		const form = e.target;
		fetch("/", {
			method: "POST",
			headers: { "Content-Type": "application/x-www-form-urlencoded" },
			body: encode({
				"form-name": form.getAttribute("name"),
				...state,
			}),
		})
			.then(() => navigate(form.getAttribute("action")))
			.catch((error) => alert(error));
	};

	return (
		<>
			<form
				name="Kontakt Formular"
				method="post"
				action="/danke"
				data-netlify="true"
				data-netlify-honeypot="bot-field"
				onSubmit={handleSubmit}
				sx={{
					px: [3, 2, 2],
					div: {
						display: "flex",
						flexDirection: "column",
						alignItems: "center",
						width: "100%",
						label: {
							width: "100%",
							display: "flex",
							flexDirection: "column",
							alignItems: "center",
							input: {
								width: "100%",
								mb: 3,
								p: 1,
								fontSize: [2, 3, 3],
							},
						},
						button: {
							cursor: "pointer",
							appearance: "none",
							alignSelf: "flex-end",
							textAlign: "center",
							mt: 1,
							mx: "0px",
							color: "background",
							fontSize: [2, 3, 3],
							bg: "primary",
							borderRadius: "100px",
							borderStyle: "none",
							height: [1, 2, 2],
							width: [4, 6, 6],
						},
					},
				}}
			>
				{/* The `form-name` hidden field is required to support form submissions without JavaScript */}
				<input type="hidden" name="form-name" value="Kontakt Formular" />
				{/* Required for Netlify forms spam filter  */}
				<span hidden>
					<label>
						<span hidden>Bitte nicht ausfüllen (Botfeld): </span>
						<input name="bot-field" onChange={handleChange} />
					</label>
				</span>
				<div>
					<label>
						<span hidden>
							Ihr Name:
							<br />
						</span>
						<input
							type="text"
							name="Name"
							placeholder="Ihr Name"
							onChange={handleChange}
						/>
					</label>
				</div>
				<div>
					<label>
						<span hidden>
							Ihre E-Mail Adresse:
							<br />
						</span>
						<input
							type="email"
							name="E-Mail"
							placeholder="Ihre E-Mail Adresse"
							onChange={handleChange}
						/>
					</label>
				</div>
				<div>
					<label>
						<span hidden>
							Ihre Telefonnummer:
							<br />
						</span>
						<input
							type="tel"
							name="Telefon"
							placeholder="Ihre Telefonnummer"
							onChange={handleChange}
						/>
					</label>
				</div>
				<div>
					<button type="submit">Weiter</button>
				</div>
			</form>
		</>
	);
};

export default Form;

Thank you in advance

Update: It appears to just sometimes work and othe times submission is ignored. For example I have a previous test submission from Opera in my spam submissions folder and after trying again, it’s not recognized.

@quansenB, it looks like your site has a service worker registers. This can typically cause issues as described here: [Common Issue] Understanding & unregistering service workers. On Gatsby, you’ll want to disable the offline-plugin and then de-register the existing service worker as mentioned in that topic I linked to.

Hope that helps.

Hello Dennis,

Thank you so much. It worked.

Do you have any idea, how to enable PWA support with netlify forms considering this bug?. It’s not necessary but would be cool.

Again, thank you.

Regards,
Iñaki