Unable to Send Form Data from SvelteKit Server Endpoint to formsubmit.co/ajax

Question

I'm working on a SvelteKit project where I need to send form data from a server endpoint to an external API (FormSubmit.co/ajax). I'm able to send the form data directly from the client-side (in a +page.svelte file), but when I try to send the form data from a server endpoint (+page.server.ts), it doesn't work. I also tried deploying my webapp to Vercel to check the problem but it keeps giving me the same error:

{
  success: "false",
  message: "Make sure you open this page through a web server, FormSubmit will not work in pages browsed as HTML files."
}

Here's the code I'm using in my +page.server.ts file:

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const formValues = Object.fromEntries(formData);

    ...

    const response = await fetch('https://formsubmit.co/ajax/your-formsubmit-id', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json'
      },
      body: JSON.stringify(formValues)
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();

    if (data.success === 'false') {
      throw new Error(data.message);
    }

    return {
      status: 200,
      body: {
        success: true,
        resultMessage: 'The message was sent correctly'
      }
    };
  }
};

And this is the form I'm using in my +page.svelte page:

...
<form
        action="#"
        method="POST"
        use:enhance={() => {
            isLoading = true;
            return async ({ update }) => {
                await update();
                isLoading = false;
            };
        }}
        class="mx-auto mt-10 max-w-xl sm:mt-15"
    >
...

I have tried reading the documentation, I have tried many times to send server side but it keeps giving the same problem even loading the project on Vercel, while if I try to do a simple fetch from +page.svelte the email arrives successfully, however I would like it to be sent from +page.server.ts, how to do it? Thanks a lot to everyone in advance!

Answer 1

This is an issue with FormSubmit, rather than SvelteKit.

FormSubmit expects the request to come directly from a client-side form. It's possible FormSubmit looks for specific browser-generated headers to verify submissions are coming directly from a browser.

See here: Can't submit form with formsubmit.co AJAX API

And: https://formsubmit.co/help#:~:text=You%20may%20encounter%20an%20error,server%20like%20Apache%20HTTP%20Server.

One idea for a workaround to both perform server-side actions and send data to FormSubmit is to do:

export const actions: Actions = {
    default: async ({ cookies, request, url }) => {
        const formData = await request.formData();

        // Perform server side actions here
        // e.g. Store in DB

        // Redirect to a new page 
        // On this new page, use a hidden form to submit the data on page load
        return {
            status: 303, 
            headers: {
                 location: '/submit-form/confirmation',
            },
        };
    }
};