Com configurar Contact Form 7 amb WP Mail SMTP a WordPress

Contact Form 7 és un plugin gratuït que et permet crear i gestionar formularis de contacte per a WordPress.

info Perquè Contact Form 7 funcioni, és essencial tenir instal·lat i configurat el plugin WP Mail SMTP. Pots seguir la guia del següentmanual.

Instal·lació del plugin

Primer, accedirem al WordPress i instal·larem el plugin Contact Form 7. Per això, ens dirigirem a "Plugins" -> "Afegir nou plugin":

Buscarem el plugin al cercador superior:

Un cop instal·lat, farem clic a activar:

Creació dels formularis

Per afegir o editar un formulari farem clic a la icona "Contacte" i al botó "Afegir nou".

Posarem un nom al formulari i el guardarem:

La pàgina «Edita el formulari de contacte» està dividida en quatre seccions.

Formulari – Personalitza la teva plantilla de formulari de contacte HTML amb una varietat d'opcions de camp com ara text, correu electrònic, caselles de verificació, etc. També pots escriure HTML personalitzat al quadre de personalització del formulari.
Correu electrònic – Personalitza la plantilla de correu electrònic i la configuració utilitzada per als correus electrònics de notificació.
Missatges – Personalitza els missatges que es mostren després d'accions específiques. Per exemple, pots configurar un missatge únic perquè es mostri després que algú enviï un formulari de contacte.
Paràmetres addicionals – Especifica fragments per habilitar funcions addicionals com ara el mode només per a subscriptors, el mode de demostració o l'omissió de correu. També permet crear codi que s'executarà abans o després d'accions específiques.

Pestanya Formulari

Pots utilitzar els diferents botons preestablerts per generar els codis abreujats de les etiquetes, d'entrada de dades, per a un formulari més utilitzades.

Text – Crea una etiqueta de formulari per a una sola línia de text. Els camps de text són útils per a noms, cognoms i altres retallades basades en text que no requereixen múltiples línies.
Correu electrònic – Crea una etiqueta de formulari per a una adreça de correu electrònic.
URL – Crea una etiqueta de formulari per a una URL.
Telèfon – Crea una etiqueta de formulari per a un número de telèfon.
Nombre – Crea una etiqueta de formulari per a un número. A diferència dels camps d'entrada de text o àrea de text, els camps de número només permeten dígits numèrics.
Data – Crea una etiqueta de formulari per a una data.
Àrea de text – Crea una etiqueta de formulari per a una àrea de text. A diferència del camp d'entrada normal de text, un camp d'àrea de text permet múltiples línies de text. Són ideals per introduir el cos del missatge.
Menú desplegable – Crea una etiqueta de formulari per a un menú desplegable.
Caselles de verificació – Crea una etiqueta de formulari per a caselles de verificació.
Botons de selecció – Crea una etiqueta de formulari per als botons de selecció.
Acceptació – Crea una etiqueta de formulari per a una casella de validació.
Qüestionari – Crea una etiqueta per crear un qüestionari de preguntes i respostes.
Fitxer – Crea un camp per a la pujada de fitxers.
Enviar – Crea una etiqueta de formulari per a un botó d'enviament.

Cadascun dels tipus d'entrada de dades ha d'estar entre etiquetes '''<label>''' i '''</label>'''. Per exemple:

 <label> Título
     [entrada_de_datos] </label>

El camp "Títol" serà el títol/encapçalament que veurà l'usuari a sobre del camp d'entrada de dades.

El camp "[entrada_de_dades]" és el codi que ens proporcionen cadascuna de les etiquetes anteriors.

Per exemple, si volem afegir al nostre formulari un camp d'entrada de text, farem clic a "text":

Ens apareixerà una finestra amb les següents opcions de configuració (cada etiqueta té diferents opcions, pots revisar la guia de cada etiqueta):

Tipus de camp: Podem escollir si és obligatori emplenar el camp.
Nom: Aquest és el nom intern que disposem per identificar el camp a la configuració del formulari.
Valor per defecte: El valor que es mostrarà al camp si l'usuari no el canvia. Es mostra com un text i si l'usuari el vol modificar haurà d'eliminar-lo manualment.
Usar el text com a marcador de posició del camp: El text que veurà l'usuari al camp si no es modifica. Es mostra com a text, però desapareixerà en fer clic al camp o en introduir un nou valor.
Aquest camp requereix el nom de l'autor: Aquesta etiqueta identifica un camp on l'usuari ha d'introduir el seu nom i serà processat pel sistema de filtratge Akismet (en cas de tenir-lo configurat) per determinar si les dades del formulari són Spam o no.
Atribut d'ID: T'assigna un ID al camp. S'utilitza per assignar estils mitjançant codi CSS.
Atribut de classe: T'assigna una classe al camp. S'utilitza per assignar estils mitjançant codi CSS.

Un cop configurats els camps, farem clic a inserir:

Ens crearà l'entrada de dades que haurem de posar entre etiquetes '''<label>''' i '''</label>'''. Podem assignar un títol/encapçalat a l'etiqueta:

<label> Apellidos:
     [text* apellidos]</label>

Pestanya Correu Electrònic

En aquesta pestanya definirem la plantilla que es farà servir a l'hora d'enviar el correu electrònic quan l'usuari faci clic al botó d'enviar.

Per defecte, el correu electrònic s'envia al compte de l'administrador de la web, des del compte [email protected].

L'assumpte és: "Nom_del_lloc" + l'assumpte que hagi posat l'usuari al formulari.

En fer clic al botó respondre, un cop ens arribi un correu, respondrem al compte que hagi introduït l'usuari. El cos del missatge seran les dades que s'han introduït als diferents camps del formulari.

A la part superior ens apareixeran els noms dels camps del formulari per poder configurar la plantilla, són les variables que contindran els diferents valors/inputs que hagi introduït l'usuari.

Si tinguéssim camps on pujar fitxers, ens apareixeran les etiquetes a l'apartat "Fitxers adjunts".

info Haurem de desar els canvis fets al formulari perquè s'actualitzin les etiquetes

Per exemple, la configuració següent en aquesta pestanya es rebrà amb el format següent:

Pestanya Missatges

Aquesta pestanya permet personalitzar els missatges que l'usuari rep segons l'estat del formulari: si s'ha enviat, si no s'ha pogut enviar, si hi ha hagut un error...

Pestanya Ajustos Addicionals

Des d'aquesta pestanya podem personalitzar funcions addicionals. Tant omissió d'enviament de correu, mode només subscriptors o l'execució de funcions personalitzades en moments concrets de l'execució del formulari.