Formularis De Contacte a WordPress: Les 3 Millors Extensions amb Blocs

Formularis de contacte WordPress amb blocks

Els formularis de contacte compleixen un dels objectius més bàsics d’un lloc web, que és que qualsevol persona pugui posar-se en contacte amb el propietari. Es pot fer de moltes maneres, però la forma més fàcil (i eficient) de fer-ho és inserir un bloc.

WordPress no incorpora de forma nativa els formularis de contacte i sempre cal recórrer a extensions externes. Al repositori de WordPress trobem un munt de extensions que ens permeten afegir formularis al nostre web. De fet, entre les extensions més populars de WordPress trobem diverses solucions per afegir formularis de contacte al nostre lloc web, com ContactForm 7 i WPForms.

Table of Contents

Cercant formularis que treballin amb blocs

N’hi ha per a tots els gustos: de ben simples com l’addon de JetPack que ens permet crear un formulari amb els camps més bàsics (nom, email i missatge) fins a solucions més complexes que poden adaptar-se a tota classe de situacions (formularis que permeten calcular un pressupost, registres personalitzats, avaluacions, etc). També tenim algunes coleccions de blocs que inclouen formularis…

Davant d’aquest panorama, molts cops és complicat escollir l’extensió que més s’adeqüi pel nostre projecte web. Et proposo tres extensions que et permetran crear formularis de contacte fàcilment (i de forma visual) des de l’editor de blocs de WordPress.

Per no trencar la teva web producció durant les proves …

Clona el teu server producció i crea un entorn “staging” !!!

Clonar un lloc de WordPress amb Wetopi és tan fàcil com un simple clic.

1. Formulari de Contacte Contact Form Block (Jordy Meow)

Contact Form Block by Jordy Meow

Contact Form Block està disponible com a extensió gratuïta que en instal·lar-se s’activa el bloc de formulari. Es defineix com a un bloc de formularis senzill, bonic i perfecte per a la gran majoria d’usuaris. Si busques un formulari de contacte sense complicacions segurament Contact Form Block és una bona solució. 

L’extensió està desenvolupada per Jordy Meow, que ja disposa d’altres plugins interessants en el repositori de WordPress com el Media File Renamer, Media Gallery o Gallery Custom Links

En inserir el bloc, s’afegeix de forma automàtica un formulari amb els següents camps: Nom, Email i Missatge.

Formulari de contacte  simple Contact Form Block de Jordy Meow
En inserir el bloc Contact Form Block ens apareix un formulari ja preparat. Malauradament, no podem afegir més camps al formulari 

El bloc ens ofereix unes opcions per a modificar:

l’estil del formulari que incorpora tres opcions predefinides (per defecte, estil Meow i sense estil, que serà molt útil per poder personalitzar el formulari amb estils CSS).

  • mostrar una capçalera bàsica amb un títol
  • canviar el color del botó
  • modificar la grandària de la caixa de missatge.

A més, també es pot incorporar un filtre anti-spam a través del servei reCAPTCHA i establir una redirecció a un URL un cop enviat el formulari. Una opció molt útil per si volem tenir una pàgina de “Gràcies”.

Inconvenients de Contact Form Block

L’extensió té alguns inconvenients que cal tenir en compte:

  • No es poden afegir més camps. Si tenim previst que el nostre formulari necessitarà més camps, com per exemple un camp pel telèfon, no ens ho permet.
  • Relacionat amb el punt anterior, tampoc podem afegir caselles d’acceptació de la política de privacitat ni incorporar la primera capa per complir el RGPD. Això pot suposar un greu problema pels usuaris de la UE.
  • Tampoc permet incorporar text d’ajuda.

Conclusions sobre el plugin Contact Form Block

En resum, Contact Block Form és una solució molt bàsica i funcional.

Però si necessitem més camps o simplement, poder adaptar el formulari al RGPD, no serà la millor solució. Actualment, al repositori trobem altres alternatives molt més interessants.

2. Formulari de Contacte Gutenberg Forms

WordPress Form Builder Plugin - Gutenberg Forms

Gutenberg Forms també està disponible com a extensió gratuïta que en instal·lar-se s’activa un bloc de formulari. Es defineix com a un constructor de formularis d’última generació que et permetrà construir formularis directament a l’editor visual.

Formulari de contacte Gutenberg Form
En inserir el bloc Gutenberg Forms ens apareix un formulari ja preparat. A partir d’aquí, podem personalitzar-ho amb més camps. 

Tot i que l’extensió està actualment desenvolupada per TetraSoft, en tenim poca informació. Amb la versió actual en el moment d’elaborar aquesta guia, (2.2.8.1), s’experimenten certs problemes de compatibilitat. Amb la versió anterior, 2.2.8 que encara és atribuïda a l’anterior desenvolupador WP Chill, no s’ha observat cap mena d’errors. Així que la valoració la realitzarem basant-nos en la versió 2.2.8.

En instal·lar el bloc, veiem que s’ha creat un nou tipus d’entrada a WordPress que ens permetrà gestionar els formularis del web. Hi trobem una pàgina de benvinguda que ens anima a col·laborar amb el desenvolupament de l’extensió, notificar qualsevol error i ens enllaça amb una pràctica guia.

Funcionalitats del plugin WordPress Form Builder

En aquest mateix menú també podem veure:

  • integracions de tercers. Per defecte en trobem una d’anti-spam: Google reCAPTCHA v2. 
  • estadístiques d’ús dels formularis
  • panell de configuració per personalitzar els missatges d’error del formulari i la importació de formularis.

Amb Gutenberg Forms podem crear els formularis de dues formes:

  • a través del tipus de contingut
  • directament en afegir el bloc a la nostra pàgina.

Un cop inserit el bloc, podem posar el nom del formulari i especificar si és del tipus estàndard o bé un formulari de múltiples passos o bé volem inserir un formulari:

  • Si escollim la primera opció, el formulari per defecte serà un que inclou nom, correu electrònic i missatge. Ara ja només ens caldrà modificar-ho al nostre gust.
  • Si escollim entre els formularis predefinits, el connector ens deixarà triar entre els formularis que prèviament hem creat o bé entre una gran quantitat de plantilles predefinides.

Podem configurar algunes opcions:

  • afegir prefix, sufixos als camps
  • convertir en camp en obligatori
  • mostrar textos d’ajuda
  • establir condicionals segons la resposta prèvia
  • incloure patrons de validació RegExp

Dins del panell de configuració de formulari podem configurar:

  • modificar els colors
  • acció que es realitzarà un cop s’hagi enviat el formulari (amagar el formulari, redirecció o no fer res) i si és necessari avisar-nos per correu electrònic.
  • notificacions al correu electrònic
Formulari Gutenber Forms

Tot i que d’entrada sembli molt complicat i amb moltes opcions. Gutenberg Forms ens permet crear tota mena de formularis sense complicar-nos gràcies a la gran quantitat de plantilles preestablertes que té.

Si, tanmateix, volem crear-ne un des de 0 podem fer-ho perfectament perquè tenim el següent llistat de componets de formulari:

  • casella selecció
  • camp de data
  • camp d’hora
  • camp numèric
  • camp de si/no
  • barra de progrés
  • camp ocult
  • camp de pujada de fitxers
  • camp de ràdio
  • camp de calculadora
  • camp numèric amb control lliscant
  • grup de botons d’opció
  • camp de selector
  • camp de text multi-línia
  • camp de text.

A més de poder afegir els blocs natius de l’editor de text. Per tant, podríem afegir textos explicatius.

Aquesta extensió és molt completa i ens permet crear formularis de lògica condicional, i guardar les dades rebudes a través del formulari a la base de dades. Pel que fa a les integracions amb tercers, cal recórrer a extensions de tercers.

Actualment, n’hi ha tres:

  • dues per a serveis de mail màrqueting (MailPoet i MailChimp).
  • anti-spam (Akismet).

Inconvenients del plugin WordPress Form Builder

Si hem de destacar algun inconvenient és que l’última versió del connector no funciona correctament. Revisant els fòrums de suport de WordPress també ens adonem que el desenvolupador no està resolent els dubtes i consultes que fan els usuaris sobre l’extensió. 

Conclusions sobre WordPress Form Builder – Gutenberg Forms

Gutenberg Forms és una solució molt completa per a crear directament formularis des de l’editor de blocs.

De fet, ens recorda a la versatilitat de les extensions més famoses de tot el repositori Contact Form 7 o Gravity Forms. Aquesta versatilitat pot fer que no sigui l’opció més òptima per a certs usuaris que segurament no necessitaran tantes opcions.

3. Formulari de Contacte Nelio Forms

Nelio Forms plugin

Nelio Forms està disponible com a extensió gratuïta que en instal·lar-se s’activa un bloc de formulari. Es defineix com a una solució estàndard per a crear formularis i permet crear-ne fàcilment de tal manera que et sentis com un desenvolupador.

El connector està desenvolupat per Nelio Software, disposa d’altres plugins interessants en el repositori de WordPress com el Nelio PopUps, Nelio AB/Testing o Gallery Custom Links. 

Formulari de contacte Nelio Forms
En inserir el bloc Nelio Forms, només apareix un camp de text. A partir d’aquí, podem inserir més camps per tal d’ajustar el formulari a les nostres necessitats 

En instal·lar el bloc, veiem que s’ha creat un nou tipus d’entrada a WordPress que ens permetrà gestionar els formularis del web.

Funcionalitats de Nelio Forms

Podem crear-los a través d’aquest tipus de contingut o bé crear el formulari directament en afegir el bloc a la nostra pàgina.

Un punt molt atractiu és que el bloc permet reaprofitar els formularis. Pel que si necessitem incorporar un formulari en diverses pàgines del web, podrem reutilitzar-ho.

En els dos casos, en inserir el bloc, apareix un camp de text en blanc i podem modificar quin tipus de verificació volem escollir (correu electrònic, contrasenya, telèfon i URL).

Formulari Nelio Form
En pocs minuts pots tenir un formulari de contacte personalitzat gràcies a Nelio Forms

Podem configurar algunes opcions:

  • amagar les etiquetes,
  • convertir en camp en obligatori
  • establir el mínim i el màxim de caràcters que permetrà el camp.

Dins del panell de configuració de formulari podem configurar:

  • seleccionar un patró preestablert. Inclou les plantilles més habituals (formulari bàsic, caixa de subscripció al butlletí i diverses opcions de formularis de contacte). Molt útil si no ens volem complicar.
  • filtre de detecció de correu brossa, a través del servei Akismet.
  • acció que es realitzarà un cop s’hagi enviat el formulari (amagar el formulari, redirecció o no fer res) i si és necessari avisar-nos per correu electrònic.

Tot i que d’entrada sembli molt senzill, Nelio Forms ens permet crear formularis molt complexos, ja que té molts components de formularis:

  • casella selecció
  • grup de caselles de selecció
  • camp de data i hora
  • camp de data
  • camp d’hora
  • camp numèric amb control lliscant
  • grup de botons d’opció
  • camp de selector
  • camp de text multi-línia
  • camp de text.

A més, Nelio Forms ens permet poder afegir els blocs natius de l’editor de text. Per això , podríem afegir textos explicatius.

Inconvenients de Nelio Forms

El connector és molt complet, però si encara volem fer un pas endavant amb formularis de lògica condicional, guardar les dades rebudes a través del formulari a la base de dades o integrar aplicacions de tercers com MailChimp o Zapier, haurem d’optar per la versió de pagament del connector (49€ més IVA en promoció de llançament), amb un preu molt competitiu respecte a altres plugins amb les mateixes funcionalitats.

Conclusions sobre el plugin de formularis Nelio Forms

Nelio Forms és una de les millors solucions si vols optar per una solució simple, funcional i molt versàtil per a tothom.

Conclusions finals

Al repositori de WordPress trobem diverses solucions per a crear fàcilment els nostres formularis de contacte del nostre lloc web. Cal revisar-les bé perquè cal buscar el millor connector que s’adapti a les nostres necessitats.

  • Si estàs buscant una opció simple, ràpida d’utilitzar i sobretot, molt intuïtiva de gestionar, segurament Nelio Forms sigui la millor opció.
  • Si necessitem altres opcions més complexes com integrar un servei de subscripció al butlletí o emmagatzemar la informació a la base de dades del servidor, potser valdrà la pena valorar la versió de pagament de Nelio Forms per desbloquejar més funcionalitats o bé pensar a utilitzar Gutenberg Forms.

Si encara estàs indecís, és important recordar-te que Nelio Forms està traduït completament al castellà i al català, pel que serà molt més senzill de configurar. A més, els integrants de Nelio Forms són molt actius a la comunitat de WordPress.

En el cas Gutenberg Forms, has d’escollir la versió 2.2.8. per tal que funcioni correctament el connector, mentre no solucionin els problemes de compatibilitat.

Les dues opcions són molt vàlides i no tenen res a envejar als grans plugins de formularis més populars del repositori o d’altres alternatives que incorporen constructors visuals.

Tant Nelio Forms com Gutenberg Forms ens demostren que es pot disposar d’una bona eina per crear formularis que es lleugera, ràpida i aprofitant els recursos que ofereix el mateix editor visual de WordPress, optimitzant així recursos del sistema.

Ja has decidit crear els formularis de contacte del teu web?


Sóc consultora en màrqueting digital i WordPress. Ajudo empreses i marques a digitalitzar-se per aconseguir més vendes i a tenir més visibilitat. M’agrada buscar la solució més òptima pels problemes digitals.

Em pots trobar a cherrycreative.es

Resumidament, som uns techies apassionats per WordPress que hem creat Wetopi, un Allotjament WordPress Gestionat, per minimitzar la fricció a la que tot professional s’enfronta en treballar i allotjar projectes WordPress.

Inclou servidors de desenvolupament Gratis.
No cal tarjeta de crèdit.