Form Redirecting to 404 Error on WordPress but Works on Duda

Question

I’m running into an issue with my contact form on my website. It works fine on Duda, but it’s not working on WordPress. Every time someone submits the form on WordPress, it redirects to a 404 (Page Not Found) error. I’ve double-checked the form action URL and the server settings, but the issue persists.

Has anyone experienced this or knows how to resolve it? Any advice on how to get it working properly in WordPress would be greatly appreciated. Thanks!

I expected the form to submit and return a success message, just like on Duda.

document.getElementById('MelbourneContact').addEventListener('submit', async (event) => {

   event.preventDefault();

    // Collect form data

   const formData = new FormData(event.target);

   const formObject = {};

  

   formData.forEach((value, key) => {

     formObject[key] = value;

   });



    // Convert to JSON

   const jsonString = JSON.stringify(formObject);


   const myHeaders = new Headers();

   myHeaders.append("Content-Type", "application/json");

   myHeaders.append("Authorization", "Token");

    const requestOptions = {

       method: "POST",

       headers: myHeaders,

       body: jsonString,

       redirect: "follow"

   };


   fetch("https://asteriskapi.website.com/:5001/sendForm", requestOptions)

       .then((response) => response.text())

       .then((result) => console.log(result))

       .catch((error) => console.error(error));


  

 });

Answer 1

WP Configuration

I don't see any problem from your codes. It's something to do with your WP Configurations. or double check if the link you have is really correct. https://asteriskapi.perthpatiomagic.com.au/ you may verify if the link is working by using: https://www.urlvoid.com/

Referrence:

Fetch API