fbpx

Come creare un form di contatto collegato a Telegram

In questa guida vediamo un semplice ed efficace metodo per gestire un form di contatto senza email. La comodità di usare una soluzione del genere è che non abbiamo bisogno di un linguaggio lato server che gestisca le mail. Possiamo fare semplicemente una chiamata HTTP alle API di Telegram per ricevere il messaggio al submit di un form.

Nota: per poter ottenere i dati necessari a questa guida è necessario conoscere le basi dei bot di Telegram e come aggiungere un bot a un canale. Avrete bisogno del BOT_TOKEN e del CHAT_ID .

Potete seguire la mia guida su come ottenere questi dati cliccando qui

Creare un form HTML

Creiamo un semplice form in HTML. Giusto per rendere semplici le cose vado a creare un form con solo:

  • Nome
  • Email
  • Messaggio
  • Pulsante per effettuare il submit
<form id="telegram-form">
    <input type="text" name="name" id="name" placeholder="Nome">
    <input type="email" name="email" id="email" placeholder="Indirizzo email">
    <textarea name="message" id="message" placeholder="Il tuo messaggio" rows="5"></textarea>
    <button type="submit">Invia!</button>
</form>

Azioni da fare al submit del form

  1. Bloccare il comportamento naturale di un form. Non dobbiamo far ricaricare la pagina al submit.
  2. Leggere tutti i valori all’interno dei campi.
  3. Inviare, tramite API telegram, i dati compilati dall’utente.
<script>
    const bot_token = 'IL_TUO_BOT_TOKEN'
    const chat_id = 'IL_TUO_CHAT_ID'

    const form = document.querySelector('#telegram-form')
    form.addEventListener('submit', e => {
        // 1. Bloccare il comportamento naturale di un form. Non dobbiamo far ricaricare la pagina al submit.
        e.preventDefault();
        const elements = form.elements;
        let message = '';

        // 2. Leggere tutti i valori all'interno dei campi.
        for (const element of elements) {
            if (element.value.length > 0) {
                message += `${element.id}: ${element.value}\n`
            }
        }

        // 3. Inviare, tramite API telegram, i dati compilati dall'utente.
        fetch(`https://api.telegram.org/bot${bot_token}/sendMessage?chat_id=${chat_id}&text=${encodeURI(message)}`)
            .then(res => res.json())
            .then(res => {
                // Fai qualcosa in caso di risposta positiva da Telegram.
                console.log(res)
            })
            .catch(err => {
                // Gestisci l'errore
                console.error(err)
            })
    })
</script>

Attenzione: questo articolo serve solo puramente per scopo informativo. Non è consigliato lasciare in chiaro il vostro bot_token e il chat_id. Vi consiglio vivamente di spostare il codice su un server per poter tenere nascosto il chat_id e il bot_token.

Marco Giannini

Marco Giannini

Ciao! Piacere, sono Marco Giannini e sono un Full-Stack Developer. Sto lavorando un sacco con PHP e WordPress ma AMO JavaScript e React. Ogni tanto pusho su Github qualcuno dei miei assurdi progetti

Condividi l'articolo

Condividi su facebook
Facebook
Condividi su linkedin
LinkedIn
Condividi su telegram
Telegram
Condividi su whatsapp
WhatsApp
Condividi su email
Email

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Sfoglia le categorie

Condividi 6Magazine

Condividi su facebook
Facebook
Condividi su linkedin
LinkedIn
Condividi su email
Email
Condividi su whatsapp
WhatsApp

Vuoi rimettere mano alla tua comunicazione?