Com construir un formulari amb Gravity Forms

per | 27-11-2015 | Manual de WordPress | 0 comments

Gravity Forms Tutorial en Català - Crear un formulari

A DeMomentSomTres sempre ens ha agradat utilitzar components que ens simplifiquin la vida i, si pot ser, que siguin en codi obert. Per això, des de fa ben bé 4 anys, que fem servir Contact Form 7 per construir els formularis de les pàgines web dels nostres clients.

Darrerament, hem renunciat, en aquest petit aspecte, a fer servir aquesta solució en codi obert, per passar a utilitzar Gravity Forms. És un motiu senzill i clar: funcionalment és més potent, la interacció és més senzilla i la solució és força més sòlida.

I com que necessitem que alguns dels nostres usuaris puguin gestionar-se els seus formularis web de forma autònoma, hem creat aquest petit tutorial bàsic de Gravity Forms en català.

Gravity Forms Tutorial en Català - Crear un formulari

Crear un formulari amb Gravity Forms

Si vols crear un formulari amb Gravity Forms, has d’anar al menú de l’administrador de WordPress i escollir l’opció Form > New Form.

Apareix una pantalla on et demana el nom del formulari, que és obligatori, i la descripció del formulari. Malgrat que no es mostren públicament, és recomanable posar-hi un nom i una descripció que t’ajudin a saber què fa el formulari d’aquí a un temps.

Afegir camps al formulari

Quan premis Create Form aniràs a la pantalla Form Editor que serveix per gestionar els camps. Té l’aspecte següent:

Tutorial de Gravity Form en Català

En aquesta pantalla podrem anar afegint els camps que considerem oportuns.

Per fer-ho, els escollirem de la part dreta de la pantalla.

Els camps més comuns com el de text, paràgraf o número es troben al desplegable standard fieldsmentre que a advanced fields conté camps més específics com el de correu electrònic.

Aquest procés ens permetrà anar afegint camps al formulari i reoganitzar-los fent ús de drag & drop.

Si fem clic sobre qualsevol dels camps es desplega el menú d’edició on podràs canviar la informació de nom de l’etiqueta, incloure un missatge explicatiu, indicar si és un camp obligatori i un munt d’opcions més.

Per desar els canvis, hi ha el botó Update Form.

Afegir un camp al formulari de Gravity Forms

I ja està el formulari de Gravity Forms?

Estríctament sí, però falten 3 elements més per acabar-lo d’arrodonir:

  1. Form Settings
  2. Confirmacions
  3. Notificacions

Form Settings: la configuració general del formulari

A Gravity Forms podem establir paràmetres de configuració específics del formulari a través d’aquesta pantalla.

Alguns dels paràmetres són, per exemple:

  • Form Layout: que gestiona la distribució del formulari i dels seus elements.
  • Form Button: on podrem fer que el botó digui Inscriu-me enlloc de Submit.

I altres paràmetres que tractarem en un altre tutorial, si s’escau.

Configuració del formulari de Gravity Forms per a WordPress
Tutorial Formularis amb Gravity Forms - Confirmacions
Missatge de confirmació a Gravity Forms

Confirmacions: com avisar a l’usuari que s’ha enviat correctament el formulari

A Gravity Forms, de forma molt més clara que a Contact Form 7, pots dir-li a l’usuari que s’ha rebut correctament la seva petició i mostrar-li diverses opcions.

Això es fa des de la pestanya Confirmations.

Una confirmació pot ser:

  1. Un missatge en pantalla (text).
  2. El salt cap a una pàgina de WordPress (page).
  3. La redirecció cap a una URL que triïs.

Notificacions. Ep, que algú ha omplert el formulari!

I quan algú omple el formulari, què? Doncs, els resultats s’emmagatzemen de forma natural a la base de dades sense que calgui tirar de cap altre extensió de WordPress com el Contact Form DB.

No obstant, normalment, és interessant que els formularis ens avisin quan algú els ha omplert. Per això serveixen les notificacions.

Pots crear-ne tantes com vulguis i consisteixen en missatges de correu electrònic. Les possibilitats de configuració són molt grans.

Tutorial Gravity Forms per WordPress
Tutorial Gravity Forms per WordPress

Inserir Gravity Forms a la web

Per acabar, només cal afegir el formulari a la zona de la web on el necessitem.

Es pot fer mitjançant widgets o utilitzant un shortcode.

L’editor incorpora un botó que ens simplifica aquesta tasca.

Apa, doncs, a crear formularis.

Arxius