Astro + Svelte send form email

Question

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>