Form submissions not appearing when using Firefox

[Joel_Rubin]

I added a form to my site and it worked during the testing phase. We’re about to go live and I tested it again and it did not appear in the dashboard.

The site is new-york-klezmer and it has the following domain: https://www.newyorkklezmer.com

I looked at the network tab in the browser and I see that the browser submitted a form and returned a 200. It also successfully redirected to the “thanks” page.

But nothing appears in the admin dashboard and an email notification is not sent. I also checked the spam page.

(There were some earlier messages in there which I deleted, but the new one I just sent didn’t appear.)

Curiously - I also checked a different website where I had gotten emails before and the same thing happened where the new message didn’t show up.

Thanks for your help!

[Dennis]

Hi, have you checked out the steps and tips mentioned here: [Support Guide] Form problems, form debugging, 404 when submitting?

[Joel_Rubin]

Yes:

1. I do have “netlify” on the form element. (I think if I didn’t I wouldn’t see the form on the netlify dashboard).
2. I do have a name on the opening form. (I see that name on the dashboard so I assume that was recognized)
3. The name is unique because I only have one form.
4. Every input does have a “name” attibute…
5. …and is unique.
6. I am posting. I haven’t specified the Content-Type at all. (The form is posted without any javascript intervening.)
7. I checked the spam filter.

The dashboard says “last submission on April 16” which is probably when I did my initial testing of the form.

This is the html. (Note that it exists in index.html at the time the page loads, but it has display: none at page load.)

<form class='contact-form' name='contact' method='POST' action='/thanks'><input type='hidden' name='form-name' value='contact' />
	<p>
		<label><span>Your Name:</span> <input type="text" name="name"/></label>
	</p>
	<p>
		<label><span>Your Email:</span> <input type="email" name="email"/></label>
	</p>
	<p>
		<label><span>Subject:</span> <input type="text" name="subject"/></label>
	</p>
	<p style="display: none;">
		<label><span>Phone:</span> <input name="bot-field"/></label>
	</p>
	<p>
		<label><span>Message:</span> <textarea name="message"></textarea></label>
	</p>
	<p>
		<button type="submit">Send</button>
	</p>
</form>

I just checked my git history and the only thing that is different on the form from when it worked to when it didn’t is I added the class to the form element.

I know that something must have been posted to the netlify server. It would be nice if there were a “debug” button that could list all traffic so I could figure out why the submission was rejected.

Thanks for your time!

[Joel_Rubin]

(Note the above html was from doing a “view page source”. The original html I wrote contains this first line:

<form class="contact-form" name="contact" method="POST" netlify-honeypot="bot-field" netlify action="/thanks.html">

)

[jen]

Hey @Joel_Rubin,
I just sent a test submission to your form and I show that it was successful. I don’t have access to your site’s forms through the UI, so could you let me know if you’re seeing it here?

Netlify App

I show that mine was the 5th submission and that the data received by our database was:

                  "name" => "test",
                 "email" => "test@example.com",
               "subject" => "test",
               "message" => "test",
              "referrer" => "https://www.newyorkklezmer.com/contact.html"
        }

If you’re not seeing it in the UI, that will be helpful debugging info for us!

[Joel_Rubin]

Yes, that submission went through and is both on your dashboard and the notification email was sent.

However, I just tried again to send something and it did not show up either in “verified” or “spam”.

But then I tried in Safari and Chrome and the message showed up. I then tried again in Firefox and it didn’t. So, the problem looks like it is just Firefox. As far as I can tell, Firefox is telling me (through the network tab in devtools) that it posted the form but I’ll see if I can tell if that is really true.

[Joel_Rubin]

I figured it out: in firefox there is auto-fill of fields and it was auto-filling in the bot-field. I thought it would be better to use a realistic field label of “Phone” for the bot-field so that spammers would have less chance of detecting it, but I will change the label to something more unique.

So the only thing I’d ask is a way for me to see if there were bot submissions on request - just like there is a “spam submissions” option, perhaps there could be a “dropped submissions” option with a reason it was dropped.

[perry]

hi Joel,

glad it is working now! I don’t think that we will have a way to differentiate between types of spam submissions - the vast majority of spam will always be bot-spam. Maybe I’m misunderstanding?

[Joel_Rubin]

Hi Perry,

This is now a feature request - it might help me or someone else in the future.

I wasn’t asking for netlify to differentiate - I was just asking for transparency. When the message didn’t show up my question was “What was the server activity at my domain in the last 5 minutes?” If I had a button that gave me that, and if there were an explanation of what happened, I would have solved the problem in a few minutes.

For instance, if there were a place where I saw:

POST /contact { name: “test” , etc… }

form caught by Spam bot

[jonsully]

I’ll respectfully second that as well. It would be useful to have better visibility into the way Netlify’s form action handlers respond to all transactions, not just those it deems as ‘accepted’ or ‘spam’ – knowing that it was POST’ed to but determined that particular event to be spam presents value in debugging and/or analytics over time.

–
jon

[jen]

Hey @Joel_Rubin and @jonsully,
I’ve been looking into our form processing and have added this question of disappearing form submissions that do not appear in either “verified” or “spam” areas of the UI to a meeting with our backend engineers. I agree that it’s confusing and makes troubleshooting pretty mysterious when there are “successful” form submissions that don’t end up anywhere visible. But it’s also very unexpected that Firefox would behave like a bot by filling in invisible bot fields. At any rate, will get some answers and report back. Thanks y’all!

[jen]

Update on this: where we previously did not, we now have logging internally for form submissions that are dropped because they got caught by the honeypot. Surfacing that information in the UI is quite a bit more complicated so I can’t say if/when that will be a live feature, but at least we’ll now be able to better help troubleshoot this issue for others in the future thanks to your research. Much appreciated!

I also updated the title of this post to make it more searchable.

[jonsully]

That’s fantastic. Thanks @jen!

[freerossagora]

Hi,

I have the problem in the title, but the solution specified does not appear to be resolving the issue. I perhaps don’t understand the solution correctly(?). I don’t have a ‘bot-field’ in my code.

However, I changed the attribute name of the phone number from ‘phone’ to ‘mobilephone’. How or why this might be the solution is not clear to me, but it anyway didn’t resolve the issue.

Submissions from Chrome mobile and desktop browsers ARE appearing in the ‘Spam submissions’ folder.

From any other source (e.g. Firefox, Edge) they are not appearing in either folder.

What do I need to do to reliably ensure form submissions are collected for all browser types, desktop and mobile?

Thanks …

[nathanmartin]

@freerossagora Do you see the success message when you submit the form with Firefox etc?

I just tried with Firefox and as far as I could tell, everything worked successfully.
Presuming that your form is in the same location as this previous thread.
(But I obviously cannot see if you received the submission in your Netlify UI.)

The solution for this thread is specific to having used a honeypot field:
https://docs.netlify.com/forms/spam-filters/#honeypot-field

If you aren’t using that feature, then it won’t apply to you.

[freerossagora]

@nathanmartin
Yes, this is the problem. Everything appears to work but the form submission doesn’t actually appear in verified or spam submissions (and there is no email notification) when using Firefox and Edge (Brave and Chrome work).

I haven’t changed form location or code as it appears to be solely a browser compatibility issue.

Please find image of a form submission in Firefox and the subsequent ‘success message’ in dev tools/network.

Noted re: honeypot field.

[nathanmartin]

@freerossagora When I submit the form here https://squashpassion.com/contact

I don’t see the page at /thank-you as the response, I see the default Netlify success message:

This is the case for both Chrome & Firefox.

When you submit, do you end up on this page?

What’s the payload of the POST for you?

I’m seeing…

[freerossagora]

@nathanmartin
Chrome I get the default Netlify success message, Firefox I don’t.

Firefox is version: 134.0.2 (64-bit) for Linux Mint

Payload of POST:
Firefox:

Chrome:

Looks like it’s the encoding, i.e. extra '+'s in the Firefox submission. My guess is this is best handled on the backend:
“The backend fix (properly decoding + to spaces) is the most robust solution because it ensures consistent handling of form submissions regardless of browser behavior or encoding type.”
Is this a fix that can/should be fixed on Netlify’s end?

[nathanmartin]

What you’re showing looks fine to me.

I cannot replicate, even entering almost the same values as you, seemingly provides a different result:

My Firefox version is

[nathanmartin]

@freerossagora

Looks like it’s the encoding, i.e. extra '+'s in the Firefox submission. My guess is this is best handled on the backend:

I did note the + encoding, but presumed it wasn’t the cause of the issue, since as per my last screenshot it seemed to have been successfully received by Netlify (although again, I can’t check that).

@freerossagora

Is this a fix that can/should be fixed on Netlify’s end?

If it’s not caused by your site’s code, not a browser bug for a specific version, and is determined to be due to Netlify Forms’ default server side handling, then yes.