okkur / syna-start

Clonable starter repository for a Syna theme based website

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Formspree redirect to thanks page is getting CORS Issues

snasto opened this issue · comments

Is this a BUG REPORT or FEATURE REQUEST?:
bug

What happened:
With formspree after the form post call was succesfull the formspree redirect page "https://formspree.io/thanks" is giving "Access to XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

What you expected to happen:
Not getting CORS issue when formspree is successfull

How to reproduce it (as minimally and precisely as possible):

  • Setting in the contact fragment formspree
  • Succesfully sending the form

Anything else we need to know?:

Environment:

  • Syna Theme Starter version: 0.17.4
  • Hugo version: 0.74.3/extended windows

As far as I can see this is a setting on formspree's side of things. If you have a specific example, we might be able to dig into it more.

I've copied the contact fragment, did some minor changes and added a few more input in the form.
I've created the form on formspree and associated with google ReCaptcha.
My formspree plan is the free one.

this is my .md

+++
fragment = "contact"
date = "2020-11-18"
weight = 120
form_name = "contact_form"

subtitle  = ""
post_url = "https://formspree.io/f/xxxxxx" #default: formspree.io
button_text = "Invia"
formspree = true
email = "xxxx@yyyy.zz"

[message]
  success = "Messaggio inviato, verrai ricontattato al più presto"
  error = "Impossibile inviare l'email. "

[recaptcha]
  sitekey = "xxxxxxxxxxxxxxxxxxxxxx"
+++

Let me know if you need more info about it

Thanks in advance

I'm facing a similar issue, anyone can add some help?

Use libraries that have cors handling, for example if you are using javascript instead of using fetch use axios or jquery, another alternative is to use cors proxy.

const send =(e)=>{
e.preventDefault();
axios.post('https://formspree.io/f/xxxxxxx', new FormData(e.target) )
.then(response => {
        if(response.status===200){
          setTimeout(() => {
            setMsg("Success");
          }, 5000);
        }
      })
      .catch(error => {
        console.log(error)
      });
    }