Come creare un modulo di contatto utilizzando Formspree

Puoi utilizzare molti metodi sul tuo sito Web per consentire agli utenti di inviarti e-mail in modo sicuro. Un esempio è l'utilizzo dell'attributo mailto in un modulo di contatto. L'attributo mailto apre un'applicazione di posta installata per consentire all'utente di immettere un messaggio.

Per un'esperienza migliore, considera l'integrazione di uno strumento come Formspree. Formspree funge da intermediario, registrando i dati del modulo e inviandoli all'indirizzo e-mail specificato.

Cos'è Formspree e come funziona?

Formspree è un servizio di posta elettronica che puoi integrare in un modulo di contatto personalizzato. Quando accedi a Formspree, puoi specificare il tuo indirizzo email di destinazione per un modulo. Formspree gestisce gli invii dei moduli per tuo conto. Ti permette

Formspree genererà un endpoint, che dovrai aggiungere al tuo modulo personalizzato. Quando un utente preme il pulsante "Invia", il modulo utilizzerà l'endpoint per chiamare il servizio API di Formspree. Questo genererà un'e-mail con il contenuto del modulo di contatto.

Formspree invierà questa e-mail all'e-mail di destinazione che hai elencato nel tuo account Formspree. Riceverai quindi l'e-mail nella tua casella di posta. Il tuo account Formspree ha anche uno spazio in cui puoi visualizzare i tuoi invii di moduli di contatto.

Per registrare la tua email con Formspree, accedi e inserisci l'indirizzo email di destinazione per il tuo modulo.

1. Accedere Formspree. Se non hai un account, dovrai inserire il tuo indirizzo email e una password. Registrati utilizzando l'indirizzo e-mail a cui desideri inviare gli invii del modulo di contatto. Potrebbe anche essere necessario verificare questo indirizzo email durante il processo di registrazione.
2. Una volta completata la procedura di registrazione, si aprirà la pagina "Moduli". Clicca su Nuova forma.
3. Inserisci un nome qualsiasi per il modulo di contatto e lascia le impostazioni predefinite del progetto. Inserisci l'indirizzo email di destinazione nel campo "Invia email a". È qui che Formspree invierà gli invii dei moduli di contatto. Una volta completato, fare clic su Crea modulo.
4. Formspree ti fornirà un endpoint ed esempi su come usarlo. Dovrai aggiungere questo endpoint al tuo modulo di contatto personalizzato sul tuo sito web (ne parleremo più avanti).
5. Per impostazione predefinita, Formspree archivia il tuo modulo in un progetto chiamato "Il mio primo progetto". Se vuoi cambiarne il nome, torna alla pagina "Moduli". Clicca su Impostazioni accanto al nome del progetto.
6. Qui puoi cambiare il nome del tuo progetto in qualcos'altro. Ad esempio, puoi rinominarlo in modo che abbia lo stesso nome del tuo sito web. Puoi anche aggiungere l'URL del tuo sito web.

Dovrai aggiungere l'endpoint fornito da Formspree nel modulo di contatto nel codice del tuo sito web.

1. Aggiungi l'endpoint nell'attributo "action" per il modulo. Ciò farà sì che il browser di un utente invii il modulo a quell'URL quando lo invia.

   <azione modulo="https://formspree.io/f/xjvlaqpe" metodo="INVIARE">
   <!-- Il tuo modulo qui -->
   <tipo di pulsante="Sottoscrivi" classe="pulsante"> Invia </button>
   </form>

2. Aggiungi input al tuo modulo. È possibile utilizzare questo modulo di esempio che utilizza il framework CSS Bootstrap:

   <azione modulo="https://formspree.io/f/mbjqjrdl" classe="imbottitura extra" metodo="INVIARE">
   <classe div="gruppo di moduli">
   <etichetta per="rispondi a"> Il tuo indirizzo di posta elettronica </label>
   <tipo di input="e-mail" classe="controllo della forma" id="rispondi a" nome="_rispondi a" ngModel="rispondere" aria-descritta da="e-mailAiuto" segnaposto="test@esempio.com">
   <ID piccolo="e-mailAiuto" classe="testo del modulo disattivato"> La tua email non sarà condivisa con nessun altro. </small>
   </div>
   <classe div="gruppo di moduli">
   <etichetta per="Messaggio"> Il tuo messaggio </label>
   <nome area di testo="Messaggio" stile="altezza: 200px" classe="controllo della forma" id="Messaggio" segnaposto="Ehilà! io'Ti contatto perché..."></textarea>
   </div>
   <tipo di pulsante="Sottoscrivi" classe="pulsante"> Invia </button>
   </form>
   

Per verificare se Formspree funziona, invia un messaggio utilizzando il modulo di contatto, premi Inviae controlla la posta in arrivo della tua email.

1. Esegui il tuo sito web e apri la pagina che ha il modulo di contatto. Inserisci un messaggio nel modulo di contatto e premi Invia.
2. Riceverai il messaggio del modulo di contatto nella tua casella di posta.
3. Se torni a Formspree, fai clic su Presentazioni scheda. Qui potrai anche vedere i messaggi inviati dal tuo modulo di contatto.

Formspree è uno dei tanti servizi che puoi utilizzare per integrare un modulo di contatto personalizzato sul tuo sito. Ti consente di iniziare rapidamente ad accettare il feedback degli utenti senza doversi preoccupare dei dettagli del back-end.

Se non conosci la creazione di moduli con HTML e JavaScript, puoi anche saperne di più sulla convalida dei moduli lato client. Questo aiuta a garantire che i moduli di contatto possano convalidare tutti gli input dell'utente.

Circa l'autore

Sharlene von Drehnen (9 articoli pubblicati)

Sharlene è una Tech Writer presso MUO e lavora anche a tempo pieno nello sviluppo di software. Ha una laurea in informatica e ha precedenti esperienze in Quality Assurance e tutoraggio universitario. Sharlene ama giocare e suonare il piano.

Altro da Sharlene Von Drehnen