Email

1. Creare il file proxy.js all’interno di questa cartella

   • Directorynetlify

     • Directoryfunctions

       • proxy.js

   proxy.js

   export async function handler(event) {
     try {
       const { apiUrl, requestBody } = JSON.parse(event.body);
   
       const response = await fetch(apiUrl, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
           Authorization: event.headers.authorization
         },
         body: JSON.stringify(requestBody)
       });
   
       const data = await response.json();
   
       return {
         statusCode: response.status,
         body: JSON.stringify(data)
       };
     } catch (error) {
       console.error("Errore nella Netlify Function:", error);
   
       return {
         statusCode: 500,
         body: JSON.stringify({
           message: "Errore nella Netlify Function",
           error: error.message
         })
       };
     }
   }

2. All’interno del file desiderato (Oppure nel file js desiderato) inserisci questo snippet:

   Contatti.astro

   document.getElementById("contactForm").addEventListener("submit", async function (e) {
    e.preventDefault(); // Prevenire il submit tradizionale del form
   
    const formData = new FormData(this); // Crea un oggetto FormData con i dati del form
   
    const loader = document.getElementById("loader");
   
    loader.classList.remove("hidden")
    loader.classList.add("flex");
   
    // Controllo dei campi nascosti
    const honeypotFields = ["nome_alternativo", "sito_web", "email_secondaria", "telefono_cellulare"];
    const isBot = honeypotFields.some((field) => {
      const value = formData.get(field);
      return typeof value === "string" && value.trim() !== "";
    });
   
    if (isBot) {
      return;
    }
   
    const postDataEmail = {
      name: formData.get("name"),
      email: formData.get("email"),
      phoneNumber: formData.get("phoneNumber"),
      message: formData.get("message"),
      numeroPersone: formData.get("message"),
      servizioElaia: formData.get("servizio"),
      emailReceiver: ["[email protected]"],
      emailSender: ["[email protected]"],
      nameSender: "Elaia",
      cliente: "ELAIA"
    };
   
    try {
    const response = await fetch("/.netlify/functions/proxy", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
        body: JSON.stringify({
        apiUrl: `${import.meta.env.PUBLIC_SMTP_URL}`,
        requestBody: postDataEmail
      })
    });
   
      window.location.href = "/ThanksYouPage";
      loader.classList.remove("flex");
      loader.classList.add("hidden");
    } catch (error) {
      alert("Errore nel processo. Riprova più tardi.");
      loader.classList.remove("flex");
      loader.classList.add("hidden");
    }
   });

   Attenzione!

   Ricordati di inserire va variabile PUBLIC_SMTP_URL all’interno del tuo file .env

3. Crea il div con all’interno il loader I loader li puoi trovare qui

   Sito per loader