I'm using Astro + Svelte for a blog project but I'm running into some problems adding integrations. In my case, I want the information to be sent after submitting a contact form. I have tried to use adapters and services like Netlify Functions, Netlify Forms, SendGrid (I can't register for this service), Resend and nodemailer, but I don't know how to implement it in AstroJS. Any advice?
<form id="contact" name="contact" method="POST" data-netlify="true" data-netlify-recaptcha="true" action=""><input type="hidden" name="form-name" value="contact" /><div class="grid gap-6 sm:grid-cols-2"><div class="relative z-0"><input type="text" name="name" id="name" class="peer block w-full appearance-none border-0 border-b border-gray-500 bg-transparent px-0 py-2.5 text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0" placeholder=" " /><label for="name" class="absolute top-3 -z-10 origin-[0] -translate-y-6 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:left-0 peer-focus:-translate-y-6 peer-focus:scale-75 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Name</label> {#if errors.name}<p class="text-red-600 font-semibold text-sm">{errors.name}</p> {/if}</div><div class="relative z-0"><input type="text" name="email" id="email" class="peer block w-full appearance-none border-0 border-b border-gray-500 bg-transparent px-0 py-2.5 text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0" placeholder=" " /><label for="email" class="absolute top-3 -z-10 origin-[0] -translate-y-6 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:left-0 peer-focus:-translate-y-6 peer-focus:scale-75 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Email</label> {#if errors.email}<p class="text-red-600 font-semibold text-sm">{errors.email}</p> {/if}</div><div class="relative z-0 col-span-2"><textarea maxlength="150" name="message" id="message" rows="5" class="peer block w-full resize-none appearance-none border-0 border-b border-gray-500 bg-transparent px-0 py-2.5 text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0" placeholder=" "></textarea><label for="message" class="absolute top-3 -z-10 origin-[0] -translate-y-6 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:left-0 peer-focus:-translate-y-6 peer-focus:scale-75 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Message</label> {#if errors.message}<p class="text-red-600 font-semibold text-sm">{errors.message}</p> {/if}</div></div><div data-netlify-recaptcha="true"></div><button type="submit" class="mt-5 rounded-md bg-black px-10 py-2 text-white">Send</button><button type="reset" on:click={()=>resetErrors()} class="mt-5 rounded-md bg-red-500 px-10 py-2 text-white">Clean</button></form></div></div>