Come creare un form di contatto collegato a Telegram

• Creare un bot telegram e associarlo a un canale
• Creare un form HTML
• Eseguire una chiamata fetch alle API di Telegram con il contenuto del messaggio

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.