Review_My_Case_Form created by us is not submissiting Data (Netlify Forms)

URL where form get submitted: https://www.knowyourrights.com/auto/attorney/bicycle-accident/

Please find the code below:

<template>
  
  <Form
    class="form"
    @submit="onSubmit"
    :validation-schema="schema"
    @invalid-submit="onInvalidSubmit"
    data-netlify="true"
    data-netlify-honeypot="bot-field"
    data-netlify-recaptcha="true" 
    method="POST"
    name="Review_My_Case_Form"
    ref="ReviewForm"
  >
    <TextInput
      name="name"
      type="text"
      placeholder="Name" 
    />
    <TextInput
      name="email"
      type="email"
      placeholder="Email" 
    />
    <TextInput
      name="tel"
      type="tel"
      placeholder="Phone" 
    />
    <TextArea
      name="message"
      placeholder="Message" 
    />
    <TextInput
      name="pageURL"
      type="hidden"
      :value="targetURL" 
    />
    <!-- UTM -->
    <template v-for="(utm, index) in UtmValues" :key="index">
      <TextInput
        type="hidden"
        :name="index"
        :value="utm" 
      />
    </template>
    
    <TextInput type="hidden" name="form-name" value="Review_My_Case_Form" />
    
    <div class="cta" v-if="ctaBtn">
      <div class="g-recaptcha" ref="recaptchaRef" data-callback="recaptchaCallback" :data-sitekey="SITEKEY"></div>
      <span class="white-text" role="alert" v-show="message.text"
        :type="message.status"
      >{{message.text}}</span>
      <button type="submit" class="button button--black" ref="submitBtn">{{ data.submitBtnText }}</button>
    </div>
    <template v-else>      
      <div class="g-recaptcha" ref="recaptchaRef" data-callback="recaptchaCallback" :data-sitekey="SITEKEY"></div>
      <span role="alert" v-show="message.text"
        :type="message.status"
      >{{message.text}}</span>
      <p><button type="submit" :class="props.buttonClass" ref="submitBtn">{{ data.submitBtnText }}</button></p>
    </template>
    <!-- <p class="note" v-if="props.note">
      <svg width="19" height="25" viewBox="0 0 19 25" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9.5 0C5.54167 0 2.375 3.125 2.375 7.03125V10.1562C1.02917 10.1562 0 11.1719 0 12.5V22.6562C0 23.9844 1.02917 25 2.375 25H16.625C17.9708 25 19 23.9844 19 22.6562V12.5C19 11.1719 17.9708 10.1562 16.625 10.1562V7.03125C16.625 3.125 13.4583 0 9.5 0ZM17.4167 12.5V22.6562C17.4167 23.125 17.1 23.4375 16.625 23.4375H2.375C1.9 23.4375 1.58333 23.125 1.58333 22.6562V12.5C1.58333 12.0312 1.9 11.7188 2.375 11.7188H16.625C17.1 11.7188 17.4167 12.0312 17.4167 12.5ZM3.95833 10.1562V7.03125C3.95833 3.98438 6.4125 1.5625 9.5 1.5625C12.5875 1.5625 15.0417 3.98438 15.0417 7.03125V10.1562H3.95833Z" fill="#535352"/>
        <path d="M9.5 14.0625C8.15417 14.0625 7.125 15.0781 7.125 16.4063C7.125 17.4219 7.75833 18.2812 8.70833 18.5938V20.3125C8.70833 20.7812 9.025 21.0938 9.5 21.0938C9.975 21.0938 10.2917 20.7812 10.2917 20.3125V18.5938C11.2417 18.2812 11.875 17.4219 11.875 16.4063C11.875 15.0781 10.8458 14.0625 9.5 14.0625ZM9.5 17.1875C9.025 17.1875 8.70833 16.875 8.70833 16.4063C8.70833 15.9375 9.025 15.625 9.5 15.625C9.975 15.625 10.2917 15.9375 10.2917 16.4063C10.2917 16.875 9.975 17.1875 9.5 17.1875Z" fill="#535352"/>
      </svg>
      <span>{{ data.note }}</span>
    </p> -->
  </Form>
</template>
<script setup>
import * as Yup from "yup";
import { ref } from 'vue'
import { Form } from 'vee-validate';
import TextInput from "/components/Forms/FormElements/TextInput";
import TextArea from "/components/Forms/FormElements/Textarea";
const props = defineProps({
  buttonClass: {
    type: String,
    default: 'submit'
  },
  note: {
    type: Boolean,
    default: true
  },
  ctaBtn: {
    type: Boolean,
    default: false
  },
  isPopup: {
    type: Boolean,
    default: false
  }
})
const route = useRoute()
const config = useRuntimeConfig();
const UtmValues = {
  utm_id: route.query?.utm_id,
  utm_source: route.query?.utm_source,
  utm_medium: route.query?.utm_medium,
  utm_campaign: route.query?.utm_campaign,
  utm_content: route.query?.utm_content,
  utm_term: route.query?.utm_term,
}
const targetURL = ref(`${config.public.HOSTNAME}${route.path}`)
const SITEKEY = config.public.SITE_RECAPTCHA_KEY
const message = ref({text: null, status: '' })
const ReviewForm = ref(null)
const recaptchaRef = ref(null)
const submitBtn = ref(null)
const recaptchaValidation = ref(false)
const data = ref({
  note: 'Secure form. Your information is confidential with us.',
  submitBtnText: 'Review my case'
})
function onSubmit(values, e) {
  const captcha = recaptchaRef.value?.querySelector('textarea.g-recaptcha-response')
  if (captcha?.value) {
    fetch( '/', {
      method: 'POST',
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams(values).toString()
    } )
    .then(() => {
      if (!props.isPopup) {
        const fullURL = location.href
        const redirectionURL = fullURL?.includes('auto/attorney') ?
          '/auto-eval-confirmation/'
          :
          fullURL?.includes('workerscomp/attorney') ?
            '/workers-comp-eval-confirmation/'
            :
            '/eval-confirmation'
        setTimeout(() => location.assign(redirectionURL), 100);
        return
      }
      console.log("Form successfully submitted")
      message.value.text = 'Form successfully submitted'
      message.value.status = 'success'
      
      console.log('Submitted Values: ', values);
      ReviewForm.value?.resetForm()
    })
    .catch((error) => alert(error));    
  } else {
    message.value.text = 'Please validate Google Captcha'
    message.value.status = 'error'
    setTimeout(() => message.value.text = '', 5000);
  }
  // alert(JSON.stringify(values, null, 2));
}
function onInvalidSubmit() {
  submitBtn.value.classList.add("invalid");
  setTimeout(() => {
    submitBtn.value.classList.remove("invalid");
  }, 1000);
}
function recaptchaCallback() {
  recaptchaValidation.value = !recaptchaValidation.value
}
const schema = Yup.object().shape({
  name: Yup.string().required(),
  email: Yup.string().email().required(),
  message: Yup.string().required(),
  // reCaptcha: window?.grecaptcha?.getResponse()?.string()?.required()
});
</script>
<style>
</style>

This form has been working for the past 2 years. We had two same forms. Now, one form is working and another is not working. When the user goes to the form, he fills the form and submits it successfully, even the Thank You was also shown to the user that your form is successfully submitted but when we checked the data, no data had been recorded by the form.

We have same form on the homepage and it works fine https://www.knowyourrights.com/

I request you please share the possible solutions ASAP.

Your form submission doesn’t have the recaptcha response:

but you have recaptcha enabled. So we respond with a 303. You need to submit the recaptcha data along with the form data.

Hi @hrishikesh

Thank you for pointing out the issue we were able to fix the forms by passing the captcha values into the payload.

I have another form where I am facing the same issue of 303. However, I am already sending the Recaptcha value to Netlify in that form. Can you please look into it and suggest a solution?

Ticket URL: Issue with google recaptcha when use data-netlify-recaptcha="true" attribute in nextjs+prismic+formik

Form URL: Contact - Acadian Supply