Com crear un formulari de contacte per al web del centre educatiu
Avui dia, qualsevol escola o institut necessita una manera còmoda i directa perquè les famílies i l'alumnat puguin fer arribar els seus dubtes o suggeriments. Un bon formulari de contacte és la peça clau d'aquesta comunicació, sempre que estigui ben dissenyat i funcioni correctament des de qualsevol dispositiu. A més, ens permet rebre la informació estructurada i evitar que es perdi enmig del correu o de les xarxes socials.
Moltes persones encarregades del web del centre parteixen de coneixements tècnics bàsics i de poc temps. Per això, abans d'afegir cap element, convé tenir clar què ha de fer el formulari, a qui s'adreça i quin manteniment podem assumir. D'aquesta manera triarem bé entre una solució prefabricada o construir-ne una de pròpia amb HTML i PHP.
Tot seguit repassarem els elements imprescindibles, compararem les opcions existents i veurem com programar un formulari bàsic, protegir-lo del correu brossa i complir la normativa de protecció de dades.
Quins camps ha d'incloure
Un formulari útil comença amb una pregunta pràctica: quina informació volem rebre? En un context escolar, les necessitats solen coincidir: nom complet, correu de contacte, telèfon, motiu de la consulta i un espai per al missatge. A partir d'aquí podem afegir camps específics del centre, com el curs, el grup o el nom del tutor legal.
És recomanable marcar com a obligatoris només els camps realment imprescindibles. Si en demanem massa, moltes persones abandonaran el formulari a mitja passada. Per això, abans d'escriure codi, és bona idea fer una llista curta i revisar-la amb el personal de secretaria o de l'equip docent.
No ens hem d'oblidar del botó d'enviament. El text ha de ser clar, com "Enviar consulta", i podem afegir un missatge breu a sota que recordi el termini de resposta, per exemple "Rebràs una resposta en un termini màxim de tres dies laborables".
Triar entre codi propi o servei extern
Quan ja sabem què volem, cal decidir com construirem el formulari. Hi ha dues vies: programar-lo nosaltres amb HTML, CSS i un script al servidor, o recórrer a serveis en línia que ja ens ofereixen tot el mecanisme preparat. La millor elecció dependrà del temps, dels recursos i del grau de control que necessitem.
Per als centres que comencen, un servei extern sol ser l'opció més pràctica, ja que s'encarrega del disseny, de l'enviament i sovint de la protecció antispam. En canvi, si volem personalitzar completament el formulari o integrar-lo amb un sistema propi, programar-lo a mà ens donarà molta més llibertat. Vegem-ne les diferències principals:
| Característica | Codi propi (HTML + PHP) | Servei extern (Formulari Google, Formspree, etc.) |
|---|---|---|
| Cost inicial | Baix, només el temps de programació | Sovint gratuït per a usos bàsics |
| Personalització | Total, control absolut del codi | Limitada a les plantilles del servei |
| Manteniment | Cal fer-lo nosaltres | El proveïdor s'encarrega de les actualitzacions |
| Protecció antispam | Cal afegir-la manualment | Sovint ja inclosa |
| Privacitat de les dades | Les dades queden al nostre servidor | Viatgen al servidor del proveïdor |
| Corba d'aprenentatge | Mitjana amb nocions de programació | Baixa, tot visual |
Com es pot veure, cap via no és universalment millor. El centre ha de valorar què li és més còmode i quin grau d'autonomia vol sobre la informació rebuda. Una bona estratègia és començar amb un servei extern i migrar més endavant a una solució pròpia si la demanda creix.
Construir l'estructura amb HTML
Si hem optat pel codi propi, començarem per l'estructura HTML, que és la part visible per a la persona visitant. Cal crear un element <form> amb el mètode POST que apunti a l'script que rebrà les dades, i dins hi anirem col·locant els camps amb les seves etiquetes. Cada camp s'ha d'associar a una etiqueta <label> per millorar l'accessibilitat, especialment per a persones amb lectors de pantalla o que naveguen des del mòbil.
Per als camps de text llarg farem servir un <textarea>, mentre que per al correu utilitzarem un input de tipus email, que valida automàticament el format bàsic. També afegirem l'atribut required als camps imprescindibles perquè el navegador avisi si s'intenta enviar el formulari buit. Un cop l'estructura està llesta, li donarem estil amb CSS per adaptar-lo al disseny general del web.
Aquí és important pensar en la visualització des del mòbil, ja que moltes famílies consultaran el web des del mòbil a la Wi-Fi de la biblioteca o de casa. Un formulari clar, amb camps prou grans i ben espaiats, marcarà una diferència notable en l'experiència d'ús.
Rebre i processar les dades al servidor
La part visible del formulari és només la meitat del treball. Un cop la persona prem el botó d'enviament, les dades viatgen fins a un script al servidor, normalment en PHP, que valida la informació i l'envia per correu a la persona responsable del centre. Un formulari sense aquest script al servidor no rebrà mai cap missatge.
L'script ha de comprovar que tots els camps obligatoris estan omplerts, netejar possibles caràcters sospitosos i construir un cos de missatge clar amb les dades ordenades. També és molt recomanable guardar al núvol una còpia de seguretat de cada consulta, per exemple en una carpeta compartida de Drive o OneDrive, per si hi ha cap incidència amb el correu.
Si volem anar una mica més enllà, podem fer que l'script enviï una resposta automàtica a la persona que ha omplert el formulari, confirmant la rebuda del missatge. Aquesta notificació, tot i ser molt senzilla, millora la percepció del centre i tranquil·litza les famílies que sovint es pregunten si el seu missatge ha arribat correctament.
Protegir el formulari del correu brossa
Qualsevol formulari publicat a internet acabarà rebent, més aviat que tard, intents d'spam i de bots automatitzats. Per minimitzar aquest risc podem aplicar diverses capes de protecció. La primera és la validació al servidor, on descartarem missatges amb contingut sospitós o adreces no vàlides. La segona és l'ús d'un sistema antispam com reCAPTCHA o un honeypot ocult, que distingeix les persones reals dels bots.
També és bona idea limitar la freqüència d'enviament, permetent per exemple un màxim d'un missatge cada minut des de la mateixa adreça IP. Això no eliminarà tot el correu brossa, però reduirà considerablement la càrrega sobre el servidor. Si el centre rep un volum molt alt de consultes, podem valorar eines específiques com Akismet o CleanTalk, que s'integren fàcilment amb PHP.
Cap sistema no és infal·lible, per la qual cosa cal revisar periòdicament la safata d'entrada del correu. Si detectem patrons repetitius d'spam, podem afegir noves regles a l'script o ajustar el mètode de validació. La clau és mantenir una actitud proactiva i no donar mai per descomptat que el formulari es gestiona sol.
Complir la normativa de protecció de dades
Quan el formulari recull dades personals —nom, correu, telèfon— entra en joc la normativa de protecció de dades. A Catalunya i a la resta de l'Estat cal complir el Reglament General de Protecció de Dades i la legislació estatal vigent. Això vol dir que el centre ha d'informar clarament de quines dades recull, amb quina finalitat i durant quant de temps les conservarà.
Al peu del formulari hi ha d'aparèixer una casella de consentiment explícit, que la persona ha de marcar abans d'enviar la consulta. Aquesta casella ha d'anar acompanyada d'un enllaç a la política de privacitat del centre, on s'expliquin tots aquests punts amb detall. Si el centre utilitza un servei extern, cal assegurar-se que aquest proveïdor compleix la normativa i que les dades es tracten dins de l'espai econòmic europeu.
Finalment, cal designar una persona responsable de gestionar les sol·licituds d'accés, rectificació o supressió que puguin arribar per part de les famílies. Mantenir un registre de tractament actualitzat és obligatori i ens ajudarà a demostrar la conformitat del centre davant d'una possible inspecció.
Proves, publicació i manteniment
Abans de fer públic el formulari, és essencial provar-lo a fons. Cal omplir tots els camps, provar enviaments amb dades incompletes, comprovar que el correu arriba correctament i revisar la visualització en pantalles molt diferents, des d'un mòbil antic fins a un monitor gran. També és bona idea demanar a algun company o companya del centre que l'ompli sense explicacions prèvies, per detectar possibles punts de fricció.
Un cop publicat, el manteniment no s'atura. Cada cert temps convé revisar els camps del formulari per adaptar-los a noves necessitats, per exemple quan s'inicia un nou curs escolar o quan canvia el procediment de preinscripció. Igualment, cal actualitzar les llibreries externes que fem servir, com reCAPTCHA, per evitar errors derivats de versions obsoletes.
Si el centre disposa d'un espai de formació en línia, es pot aprofitar el formulari com a petit projecte pràctic per aprendre els fonaments del desenvolupament web. Aquesta activitat és perfecta per introduir conceptes d'HTML, CSS i programació bàsica, i alhora dona un resultat tangible que millora la comunicació del centre amb tota la comunitat educativa.
T'animem a posar en pràctica aquests passos i adaptar-los a la realitat del teu centre. Si necessites acompanyament, els manuals i recursos de Tecniber-5 t'ajudaran a entendre cada fase del procés, des de la primera línia de codi fins al compliment legal. Comença avui amb un prototip senzill i, mica en mil, aniràs polint-lo fins a convertir-lo en una eina de comunicació sòlida, clara i fiable per al teu centre educatiu.