Form submits fine, but no submissions in UI

stefanfrede · January 28, 2024, 5:19pm

everyone,

I have read the docs and many articles in this forum, including this support guide, but unfortunately my little form is still not working.

My form is being detected:

And when I submit my form, as far as I can tell, all the form data is submitted correctly:

But I never get a submission:

Now I’m at my wits’ end and welcome any push in the right direction to get this form going.

The hidden HTML form:

github.com

Ovinhaca/website/blob/main/public/contact-form.html

<form
  action="/"
  method="POST"
  name="contact"
  netlify-honeypot="bot-field"
  data-netlify="true"
  hidden
>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <input type="text" name="phone" />
  <textarea name="message"></textarea>
  <input name="bot-field" />
  <input type="hidden" name="form-name" value="contact" />
  <button type="submit">Submit</button>
</form>

The JavaScript rendered form:

github.com

Ovinhaca/website/blob/main/storyblok/ContactForm.vue

<script setup lang="ts">
import { reset } from "@formkit/core";
import { CheckCircleIcon } from "@heroicons/vue/20/solid";

import type { ContactFormStoryblok } from "../component-types-sb";

type Props = {
  blok: ContactFormStoryblok;
};

const props = defineProps<Props>();

const success = ref(false);

const handleSubmit = (data: any) => {
  if (data["bot-field"]) {
    return;
  }

  const formData = new FormData();

This file has been truncated. show original

And the live form:
https://www.ovinhaca.pt/contact

Thank you in advance

Melvin · January 29, 2024, 5:51pm

Hi @stefanfrede,

Thank you for reaching out and welcome back to Netlify’s Support Forums!

I believe the solution is in our Support Guide here:

You’re using some kind of server side rendering to render the endpoint. For example, if you’re rendering the page that you’ve set as the endpoint using a serverless function, you’d not seem the submission in the UI. The solution is similar, set the endpoint to a page or an asset (like /favicon.ico) that already exists.

Could you look that over and give it a try?

stefanfrede · January 30, 2024, 8:24am

Hi Melvin,

Thanks for getting back to me.

I have now changed the endpoint to the static HTML form I use as a placeholder, but unfortunately still no submissions.

luke · January 30, 2024, 8:43pm

Hi, @stefanfrede. This information below is from the “Copy as cURL” data from the browser devtools when the form is submitted:

--data-raw 'name=Netlify+Test&email=test%40example.com&phone=503-555-1212&message=This+is+only+a+test.&bot-field=&form-name=contact&submit_1='

Netlify will ignore any form submission with the bot-field, even if they are empty. That field is being defined above with this: &bot-field=.

If you remove that from the form submission it will work.

stefanfrede · February 1, 2024, 8:12pm

Hi Luke,

Small victory

I removed the bot field and now I actually have submissions.

Unfortunately they are all marked as SPAM

I played around a bit but the result is always the same.

Interestingly, the test email you probably send is not marked as SPAM.

Any ideas on how to solve this?

Thank you very much!

hrishikesh · February 3, 2024, 3:03pm

Try submitting from a different device/network

stefanfrede · February 3, 2024, 6:09pm

Thank you so much! It looks like the submissions are going through now.

Topic		Replies	Views
Vue form questions Support netlify-forms	8	2682	November 5, 2020
Netlify Form in Vue Not Working Support netlify-forms	7	4127	November 3, 2020
Netlify doesn't recognize my Form - Vue.js Support deployment , netlify-forms , vuejs	3	1349	March 16, 2023
No submissions detected by netlify form (Nuxt.js website) Support netlify-forms , vuejs , nuxt	4	315	February 2, 2024
Problems with form Support netlify-forms	4	1985	May 11, 2021

Form submits fine, but no submissions in UI

Related topics