Currently, I am developing a SvelteKit project that requires sending form data from a server endpoint to an external API called FormSubmit.co/ajax. While I can successfully send the form data directly from the client-side in a +page.svelte file, I have encountered difficulties when attempting to send the form data from a server endpoint (+page.server.ts). Even after deploying the web application to Vercel for troubleshooting, I keep encountering the following error:
{
success: "false",
message: "Make sure you open this page through a web server, FormSubmit will not work in pages browsed as HTML files."
}
In my +page.server.ts file, here is the code snippet I am using:
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'
}
};
}
};
Additionally, this is the form setup within 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"
>
...
Despite reviewing the documentation and attempting multiple strategies to enable server-side submission, including testing on Vercel, I still face the same issue. Interestingly, when executing a simple fetch operation from +page.svelte, the email sends successfully. However, I am eager to achieve successful submission from +page.server.ts. Any insights or guidance on resolving this would be greatly appreciated. Thank you all in advance!