Ti è mai capitato di impostare un modulo sul tuo sito, solo per dimenticare di controllare le voci che sono state inviate? La creazione di un modulo HTML che invii un’e-mail dopo l’invio è uno dei modi più semplici ed efficaci per risolvere questo problema.
Qui, ti guideremo attraverso come creare un modulo che invii un’e-mail a te, così come al cliente, per assicurarti che il modulo sia stato ricevuto.
Come creare un modulo HTML che invia e-mail
HTML non offre un’opzione per creare un modulo che invii un’e-mail dopo l’invio. Tuttavia, puoi utilizzare l’elemento form action per impostare un indirizzo mailto: (in questo caso, il tuo), attivando l’apertura del client di posta del mittente. Questa è un’ultima opzione se non puoi creare un modulo basato su PHP.
Idealmente, i browser ti permetterebbero di instradare gli invii dei moduli direttamente a un indirizzo e-mail. Tuttavia, il motivo per cui non lo fanno è che l’invio di e-mail direttamente da un modulo Web HTML rivelerebbe l’indirizzo e-mail del visitatore, rendendo l’utente vulnerabile ad attività dannose, come il phishing.
L’aggiunta di un indirizzo mailto: al modulo può essere un potenziale modo per aggirare questa sfida. Questa opzione attiva il client di posta predefinito sul computer dell’utente, chiedendogli di inviare il modulo tramite posta elettronica. Il browser web invia una richiesta al provider del servizio di posta elettronica, non all’indirizzo specificato.
Ci sono alcuni problemi con il mailto: opzione. Ad esempio, non è compatibile al 100% con tutti i browser, non è molto intuitivo ed è impossibile controllare la formattazione dei dati quando il modulo viene inviato dal browser.
Oltre a ciò, verrà visualizzato un messaggio di avviso quando l’utente invia il modulo, informandolo che le informazioni che stanno per inviare non saranno crittografate per motivi di privacy.
Di seguito, esamineremo alcune opzioni per la creazione di un modulo HTML che ti invia un’e-mail quando viene inviata una nuova voce.
L’opzione che scegli dipende da come lavori e dalla piattaforma che stai utilizzando. Questo per dire che le cose sono leggermente diverse se il piano prevede di utilizzare un mix di HTML e script diversi. Di seguito, esaminiamo le diverse opzioni disponibili.
Metodo 1: creare un modulo di invio e-mail utilizzando HTML (non consigliato)
Usi solo HTML? Dall’inizio, ecco un codice di esempio da utilizzare:
Vedi la penna Come creare un modulo HTML che ti invii un’e-mail di HubSpot (@hubspot) su CodePen.
Questo codice creerà un modulo che richiede il nome del contatto, il messaggio e include un pulsante di invio (non visibile in CodePen). Nota che questo codice è di base: non sembrerà super elegante. Per uno più bello, dovrai aggiungere altre righe di codice specifiche per le tue esigenze.
Sebbene tu possa utilizzare solo l’HTML di base, questa non è l’opzione ideale. Questo modulo non invia direttamente agli indirizzi e-mail, ma apre un client di posta elettronica o una finestra degli strumenti per inviare il modulo. Questo può spaventare l’utente dall’inviare il modulo.
Quindi, quale codice HTML ti consente di inviare gli invii di moduli direttamente a un indirizzo e-mail?
Per far funzionare il modulo con il tuo server di posta elettronica e inviarlo a una casella di posta, PHP è la risposta: esploriamo ora questa opzione.
Metodo 2: crea un modulo di invio e-mail utilizzando PHP (avanzato)
Per creare un modulo con cui gli abbonati possono contattarti, lo script PHP sarà il tuo migliore amico. Lo so, un altro acronimo. Questo sta per Hypertext Preprocessor e questo linguaggio collabora con HTML per elaborare il modulo.
Prima di saltare nel processo, analizziamo alcune basi del modulo.
Un modulo web ha due lati: il front-end, visto nel browser dai visitatori, e uno script di back-end in esecuzione sul server.
Il browser web del visitatore utilizza il codice HTML per visualizzare il modulo. Quando il modulo viene inviato, il browser invia le informazioni al back-end utilizzando il collegamento menzionato nell’attributo “azione” del tag del modulo, inviando i dati del modulo a quell’URL.
Per esempio: