Com crear formularis dinàmics amb lògica condicional

Els formularis estàtics fan les mateixes preguntes a tothom. Els formularis dinàmics s'adapten. Seleccioneu "Consulta comercial" i apareixeran els camps de l'empresa. Trieu "Altres" i s'obrirà un quadre de text. Responeu "Sí" i les preguntes de seguiment es revelaran. La lògica condicional transforma els qüestionaris rígids en converses intel·ligents que responen a la situació de cada usuari.

En aquesta guia, aprendràs a crear formularis dinàmics amb lògica condicional que mostrin els camps adequats a les persones adequades en el moment adequat.

Què fa que un formulari sigui dinàmic?

Formulari estàtic

• Cada usuari veu tots els camps
• Estructura fixa
• Sense adaptació
• Talla única

Formulari dinàmic

• Els camps apareixen en funció de les respostes
• S'adapta al context de l'usuari
• Experiència personalitzada
• Només es mostren les preguntes rellevants

La Diferència

ESTÀTIC: Nom → Correu electrònic → Telèfon → Empresa → Pressupost → Missatge (tothom els veu tots 6) DINÀMIC: Nom → Correu electrònic → "Tipus de consulta?" → SI Personal: Telèfon → Missatge (4 camps) → SI Empresa: Empresa → Telèfon → Pressupost → Missatge (6 camps)

Com funciona la lògica condicional

L'Estructura Bàsica

SI [es compleix la condició] LLAVORS [mostra/amaga el(s) camp(s)]

components

• Camp de desencadenament: El camp que determina què passa
• Estat: Quin valor desencadena l'acció
• Acció: Mostrar o amagar
• Camp(s) de destinació: El que apareix o desapareix

exemple

Activador: "Ja sou client?" Condició: El valor és igual a "Sí" Acció: Mostra l'objectiu: Camp "ID del client"

Creació del vostre primer formulari dinàmic

Pas 1: Planifica la teva lògica

Abans de construir, planifica:

• Quines preguntes desencadenants faràs?
• Quins camps depenen de quines respostes?
• Quin és l'opció per defecte (oculta o mostrada)?

Pas 2: Construir el formulari base

1. Obre el formulari a FIG
2. Afegeix tots els camps (tant els que es mostren sempre com els condicionals)
3. Ordenar en ordre lògic

Pas 3: Identificar els camps desencadenants

Bons camps de desencadenament:

• Menús desplegables amb categories clares
• Botons d'opció (Sí/No, selecció de tipus)
• Caselles de verificació

Pas 4: Configurar les condicions

1. Seleccioneu el camp de destinació (el que voleu mostrar/amagar)
2. Obre la configuració de la lògica condicional
3. Trieu el camp de desencadenament
4. Estableix la condició (igual a, conté, etc.)
5. Defineix l'acció (mostra/amaga)

Pas 5: Prova tots els camins

1. Previsualitza el formulari
2. Prova cada opció de disparador
3. Verifiqueu que apareguin els camps correctes
4. Envia entrades de prova
5. Comprovar que les dades es guarden correctament

Patrons de formulari dinàmics comuns

Patró 1: Seguiment de sí/no

Estructura:

Tens un lloc web? ○ Sí ○ No SI Sí → Mostra: camp "URL del lloc web" SI No → Mostra: camp "Vols ajuda per crear-ne un?"

Utilitzar per: Preguntes qualificadores amb diferents seguiments

Patró 2: Ramificació per categories

Estructura:

Quin tipus de consulta? ○ Vendes ○ Assistència ○ Facturació ○ Altres SI Vendes → Mostra: Pressupost, Cronologia, Mida de l'empresa SI Assistència → Mostra: Número de comanda, Descripció del problema SI Facturació → Mostra: Número de factura, Correu electrònic del compte SI Altres → Mostra: Àrea de text "Si us plau, descriviu-ho"

Utilitzar per: Diferents preguntes per a diferents tipus d'usuari

Patró 3: Especificació «Altres»

Estructura:

Com has sentit a parlar de nosaltres? ☐ Google ☐ Xarxes socials ☐ Amic/ga ☐ Altres SI s'ha marcat "Altres" → Mostra: camp de text "Si us plau, especifiqueu"

Utilitzar per: Captura de respostes personalitzades

Patró 4: Divulgació progressiva

Estructura:

Informació bàsica: Nom, correu electrònic (sempre es mostra) Voleu proporcionar més detalls? ○ Sí ○ No SI és que sí → Mostrar: Empresa, Telèfon, Descripció del projecte, Pressupost

Utilitzar per: Informació detallada opcional

Patró 5: Càrrega de fitxers condicional

Estructura:

Teniu documents justificatius? ○ Sí ○ No SI és que sí → Mostra: Camp de càrrega de fitxers

Utilitzar per: Adjunts opcionals

Patró 6: Client vs. Client potencial

Estructura:

Ets client actual? ○ Sí ○ No SI és que sí → Mostra: ID del client, Correu electrònic del compte SI és que no → Mostra: Empresa, Com vas saber de nosaltres?

Utilitzar per: Fluxos diferents per a existents vs. nous

Creació d'un formulari dinàmic complet: exemple

Formulari de consulta de servei

Camps sempre visibles:

• Nom (requerit)
• Correu electrònic (requerit)
• Interès del servei (menú desplegable – activador)

Opcions d'interès del servei:

• disseny web
• SEO
• Màrqueting
• Consultoria
• un altre

Camps condicionals:

Disseny web IF:

• URL del lloc web actual
• Nombre de pàgines necessàries
• Preferències de disseny (menú desplegable)

SI SEO:

• URL del lloc web actual
• Paraules clau de destinació (àrea de text)
• Interval pressupostari mensual

Màrqueting SI:

• Canals de màrqueting (caselles de selecció)
• Públic objectiu
• Interval pressupostari mensual

Consultoria IF:

• Tema de consultoria
• Hora de reunió preferida

SI Altres:

• Si us plau, descriviu (àrea de text)

Sempre visible (després de condicional):

• Notes addicionals (opcional)
• Botó d'enviament

Resultat

• Els visitants de disseny web veuen 6 camps
• Els visitants de SEO veuen 6 camps
• Els visitants de màrqueting veuen 6 camps
• Els visitants que consulten veuen 5 camps
• Altres visitants veuen 4 camps

Tipus de condicions

És igual

SI [Camp] és igual a "Valor"

Cal una coincidència exacta.

No Iguals

SI [Camp] no és igual a "Valor"

Qualsevol cosa excepte aquest valor.

Conté

SI [Camp] conté "text"

El valor inclou el text en algun lloc.

Està buit

SI [Camp] està buit

No s'ha introduït cap valor.

No està buit

SI [Camp] no està buit

Qualsevol valor introduït.

Més gran que / Menor que

SI [Camp numèric] és superior a 100 SI [Camp numèric] és inferior a 50

Comparacions numèriques.

Condicions múltiples

I Lògica

Mostra el camp SI: Servei = "Empresa" I Pressupost > 10000 I Cronologia = "Aquest trimestre"

TOTES les condicions han de ser certes.

O Lògica

Mostra el camp SI: Servei = "Disseny web" O Servei = "SEO" O Servei = "Màrqueting"

Que QUALSEVOL condició sigui certa és suficient.

Combinat I/O

Mostra el camp SI: (Servei = "Disseny web" O Servei = "SEO") I Pressupost > 5000

Barreja per a una lògica complexa.

Millors pràctiques per a formularis dinàmics

1. Inici Simple

• Comença amb una o dues condicions
• Afegir complexitat gradualment
• Prova cada addició

2. Mantingueu la lògica clara

• Utilitzeu preguntes desencadenants òbvies
• Evitar dependències confuses
• Documenta la teva lògica

3. Posicionar els camps lògicament

• Els camps condicionals apareixen després del desencadenant
• Mantenir el flux natural
• Camps relacionats amb el grup

4. Gestioneu els camps obligatoris

• Els camps ocults no haurien de ser obligatoris
• Fes obligatori només quan sigui visible
• Enviament de prova amb camps obligatoris ocults

5. Proporcioneu comentaris visuals

• Animacions suaus per als camps que apareixen
• Transicions clares
• Sense canvis desagradables

6. Prova tots els camins

• Cada opció de disparador
• Cada combinació si s'utilitza I/O
• Mòbil i escriptori
• Diferents navegadors

Exemples de formularis dinàmics del món real

Exemple 1: Registre d'esdeveniments

Activador: Tipus d'assistència

• En persona → Mostrar: Restriccions dietètiques, talla de samarreta, contacte d'emergència
• Virtual → Mostra: Zona horària, Preferència de plataforma
• Híbrid → Mostra: Totes les anteriors

Exemple 2: Sol·licitud de feina

Activador: Tipus de posició

• Jornada completa → Mostra: Expectatives salarials, Data d'inici
• Jornada parcial → Mostra: Hores disponibles, Preferències d'horari
• Contracte → Mostra: Tarifa per hora, Durada del projecte

Exemple 3: Tiquet d'assistència

Activador: Categoria del problema

• Tècnic → Mostra: Navegador, sistema operatiu, missatge d'error, càrrega de captures de pantalla
• Facturació → Mostra: Número de comanda, Número de factura
• Compte → Mostra: Nom d'usuari, Correu electrònic del compte
• Sol·licitud de funció → Mostra: Descripció de la funció, Cas d'ús

Exemple 4: Sol·licitud de pressupost

Activador: Tipus de projecte

• Nou lloc web → Mostra: Sector, Nombre de pàgines, Característiques necessàries
• Redisseny → Mostra: URL actual, Què conservar, Què canviar
• Manteniment → Mostra: URL actual, Tasques necessàries, Freqüència

Exemple 5: Formulari de comentaris

Activador: Índex de satisfacció

• 1-3 (Baix) → Mostra: Àrea de text "Què ha anat malament?"
• 4-5 (Alt) → Mostra: Àrea de text "Què hem fet bé?"

Resolució de problemes de formularis dinàmics

Camp no mostrat

• Comprovar que la condició està configurada correctament
• Verifica que el valor del camp de desencadenament coincideixi exactament
• Comprova si hi ha errors tipogràfics en els valors de condició
• Confirma que l'acció és "Mostra" i no "Amaga"

Camp que no s'amaga

• Verifica l'estat per defecte (hauria de començar ocult)
• Comprovar la lògica de la condició
• Esborreu la memòria cau del navegador

Camp obligatori de bloqueig d'enviament

• Els camps ocults no haurien de ser obligatoris
• Només cal definir-ho quan sigui visible
• Comproveu la configuració condicional requerida

La lògica no funciona al mòbil

• Prova en un dispositiu real
• Comprovar els errors de JavaScript
• Verifica el comportament responsiu

Les dades no es guarden correctament

• Verificar la gestió de dades de camps ocults
• Comprova si s'han d'esborrar els valors ocults
• Enviament de prova per a cada ruta

Tècniques avançades de forma dinàmica

Condicions encadenades

El camp A activa el camp B, que activa el camp C:

Tipus de servei → SI "Empresa" → Mostra: Mida de l'empresa → SI "1000+" → Mostra: Casella de selecció Gestor de comptes dedicat

Seccions condicionals

Mostra/amaga grups de camps junts:

SI "Cal enviament" = Sí → Mostra tota la secció d'adreça d'enviament (5 camps)

Enrutament condicional del correu electrònic

Diferents destinataris segons les seleccions:

SI Departament = "Vendes" → Enviar correu electrònic a [protegit per correu electrònic]
SI Departament = "Suport" → Correu electrònic a [protegit per correu electrònic]

Missatges de confirmació condicionals

Diferents missatges d'agraïment:

SI Tipus de consulta = "Vendes" → Mostra: "El nostre equip de vendes es posarà en contacte amb vostè en un termini de 24 hores" SI Tipus de consulta = "Suport" → Mostra: "Tiquet creat. Consulteu el correu electrònic per obtenir el número de tiquet"

Preguntes freqüents

Quantes condicions puc tenir?

Tècnicament il·limitat, però cal mantenir-ho manejable. De 5 a 10 condicions ben planificades funcionen bé. Més de 15-20 condicions normalment vol dir que el formulari s'ha de dividir.

Els camps ocults encara envien dades?

Depèn de la implementació. Normalment, els camps ocults no s'envien (dades més netes). Alguns sistemes envien valors buits. Proveu la vostra configuració específica.

Puc utilitzar condicions al botó d'enviament?

Generalment, mantingueu el botó d'enviament sempre visible. Amagar-lo confon els usuaris. En comptes d'això, utilitzeu camps obligatoris condicionals per controlar el flux.

La lògica condicional alentirà el meu formulari?

Les implementacions modernes tenen un impacte insignificant en el rendiment. Només una lògica extremadament complexa amb molts camps pot causar lleugers retards.

Puc fer la prova sense enviar-la?

Feu servir el mode de previsualització per provar la visibilitat. Per a proves completes, inclòs l'enviament de dades, feu servir enviaments de prova que podeu suprimir.

resum

Creació de formularis dinàmics amb lògica condicional:

1. Planifica la teva lògica – Desencadenants, condicions i objectius del mapa
2. Formulari base de construcció – Tots els camps, correctament organitzats
3. Afegeix camps de desencadenant – Menús desplegables, botons de ràdio, caselles de selecció
4. Establir condicions – Enllaça els activadors als camps de destinació
5. Configura mostrar/ocultar – Defineix què apareix quan
6. Requisits de gestió – Només cal quan és visible
7. Prova a fons – Cada camí, cada dispositiu

Conclusió

Els formularis dinàmics amb lògica condicional creen experiències personalitzades que els formularis estàtics no poden igualar. Els usuaris només veuen preguntes rellevants, els formularis semblen més curts i recopileu millors dades. Comenceu amb condicions simples (seguiments de Sí/No i ramificació de categories) i després aneu augmentant la complexitat segons calgui. La clau és fer que la lògica sigui invisible per als usuaris i, alhora, oferir exactament els camps adequats per a la seva situació.

Creador de formularis automàtics El complement Conditional Logic facilita la creació de formularis dinàmics. Configureu regles de mostrar/ocultar amb una interfície visual, utilitzeu la lògica I/O per a condicions complexes i creeu formularis que s'adaptin a cada usuari.

A punt per crear formularis dinàmics? Descarrega el creador de formularis automàtic i començar a crear formularis que responguin intel·ligentment a les entrades de l'usuari.