Un tuffo nel modulo Webform per Drupal 8/9

Il modulo Webform è il generatore di moduli più potente e flessibile e il gestore di invio per Drupal. Offre ai costruttori di siti il ​​potere di creare facilmente moduli complessi all'istante. Viene fornito con un certo livello di impostazioni predefinite, che ti consente anche di personalizzarlo secondo le tue esigenze.

Dai un'occhiata a questo fantastico blog - Modulo Drupal 8 Webform - Un breve tutorial per aiutarti a iniziare con il modulo Webform nel tuo sito Drupal 8/9. Questo ti aiuterà a capire facilmente le basi.

Il modulo Webform viene fornito con molte funzionalità interessanti e vorrei menzionarne alcune qui.

Funzionalità del modulo web

1. Alterare forma ed elementi

Qualsiasi forma, elemento e le relative impostazioni possono essere modificati utilizzando i rispettivi hook. Di seguito sono riportati alcuni hook disponibili per l'uso e puoi trovarne altri nel file webform.api.php :

• Ganci di forma

hook_webform_submission_form_alter()
◦ Eseguire le modifiche prima che venga eseguito il rendering di un modulo di invio del modulo web.

• Ganci per elementi

hook_webform_element_alter()
◦ Modifica gli elementi del modulo web.

• Opzione ganci

hook_webform_options_alter()
◦ Modificare le opzioni del modulo web.

• Ganci del gestore

hook_webform_handler_invoke_alter()
◦ Agire su un gestore di moduli web quando viene invocato un metodo.

• più ganci...

◦ hook_webform_access_rules_alter() ecc..
◦ Modificare l'elenco delle regole di accesso che dovrebbero essere gestite a livello di modulo web.

2. Fonte YAML

Il modulo Webform è iniziato come modulo YAML Form, che consentiva alle persone di creare moduli scrivendo markup YAML. Ad un certo punto, il modulo YAML Form ha iniziato ad avere un'interfaccia utente ed è diventato il modulo Webform per Drupal 8.

• YAML fornisce un linguaggio di markup semplice e facile da imparare per creare e modificare in blocco gli elementi di un modulo web.
• La pagina (Visualizza) Sorgente consente agli sviluppatori di modificare l'array di rendering di un modulo web utilizzando il markup YAML. Gli sviluppatori possono utilizzare la pagina di origine (Visualizza) per codificare manualmente i moduli Web per modificare rapidamente le etichette di un modulo Web, tagliare e incollare più elementi, riordinare gli elementi e aggiungere proprietà personalizzate e markup agli elementi.
• Ecco un esempio di un modulo di contatto e il relativo codice sorgente YAML:

Un modulo di contatto con interfaccia utente drag-n-drop

Il codice sorgente YAML del modulo di contatto

3. Campi condizionali

Webform ti consente di aggiungere la logica condizionale ai tuoi elementi all'interno del tuo modulo. Consideriamo un piccolo esempio, in cui dobbiamo gestire in modo condizionale la visibilità degli elementi in base al valore di un altro elemento all'interno del form.

Ecco un modulo di esempio con campi in due fasi, FASE 1 (elemento radio) con le opzioni "E-mail" e "Numero di cellulare". FASE 2 (Fieldset) con due elementi, 'Email' e 'Numero cellulare'.

Pagina di creazione del modulo

Pagina Visualizza modulo

Nell'esempio sopra, vorrei mostrare il campo "E-mail" se l'opzione "E-mail" è stata scelta nel passaggio 1, altrimenti mostrare il campo "Numero di cellulare" se l'opzione "Numero di cellulare" è stata scelta nel passaggio 1.

Per ottenere ciò, modifica il campo "Email", fai clic sulla scheda "Condizioni", scegli "Stato" come "Visibile" e imposta "Trigger/Valore" come "PASSO 1 [Radios] il valore è email". Allo stesso modo, segui gli stessi passaggi per aggiungere la logica condizionale al campo "Numero di cellulare" e imposta "Trigger/Valore" come "PASSO 1 [Radios] il valore è numero_mobile". Ecco l'aspetto finale del Webform:

Impostazione della logica condizionale

Modulo quando si sceglie 'Email' al PASSO 1

Modulo quando si sceglie 'Numero di cellulare' al PASSO 1

4. Proprietà delle opzioni personalizzate

Webform ti consente di aggiungere proprietà di opzioni personalizzate ai tuoi elementi from.

Immagina uno scenario in cui vorresti gestire in modo condizionale le opzioni di un elemento radio in base al valore di un elemento diverso all'interno del modulo. Come lo faresti?

Bene, non ho trovato alcun modo per gestirlo tramite le impostazioni della logica condizionale dall'interfaccia utente. Ma esiste una disposizione per impostare "proprietà delle opzioni personalizzate" per il tuo elemento, in cui scrivi la logica condizionale richiesta mirando alle tue opzioni all'interno dell'elemento utilizzando il codice YAML.

Ecco un esempio, dove possiamo vedere due elementi radio e in base all'opzione che seleziono nel primo elemento, la visibilità delle opzioni all'interno del secondo elemento dovrebbe cambiare.

Pagina di creazione del modulo

Pagina Vista modulo prima di aggiungere qualsiasi proprietà delle opzioni personalizzate:

• Se si sceglie "Tipo A", dal secondo elemento dovrebbero essere visibili "Opzione 1" e "Opzione 2". Allo stesso modo, se si sceglie "Tipo B", dovrebbero essere visibili "Opzione 3" e "Opzione 4". Per ottenere ciò, modifica il secondo elemento, vai alla scheda "Avanzate", scorri verso il basso fino alle sezioni "Opzioni (proprietà personalizzate)" e scrivi la logica necessaria in YAML.

Impostazione delle proprietà delle opzioni

Modulo quando viene scelto "Tipo A"

Modulo quando si sceglie "Tipo B"

5. Gestori di posta elettronica per l'invio di moduli web

• Gestori di posta elettronica

I gestori di posta elettronica inviano l'invio di un modulo web tramite posta elettronica. Per aggiungere gestori di posta elettronica al tuo modulo web, vai su "Impostazioni" e quindi sulla scheda "Email/Gestori". Quindi, fai clic sul pulsante "Aggiungi e-mail / Aggiungi gestore".

Aggiungi gestore di posta elettronica

• Come mostrato nell'immagine sottostante, nella scheda "Generale", aggiungi il "Titolo" e imposta i dettagli "Invia a" e "Invia da". Aggiungere il messaggio "Oggetto" e "Corpo" come richiesto e salvare il modulo di configurazione.

E questo è tutto. Il tuo gestore viene licenziato ogni volta che il modulo viene inviato.

• Puoi anche impostare gestori di posta elettronica condizionali sul tuo modulo web, ad esempio attivare gestori di posta elettronica diversi in base al valore di determinati elementi all'interno del modulo.
• Ad esempio, consideriamo un elemento 'Select' con valori 'Tipo 1' e 'Tipo 2'. Se l'utente invia "Tipo 1", attiva il gestore "Email - Tipo 1" che ha impostato l'indirizzo "A" su " [email protected] ". Se l'utente invia "Tipo 2", attiva il gestore "Email - Tipo 2" che ha impostato l'indirizzo "A" su " [email protected] ".
• Per aggiungere la logica condizionale al tuo gestore di posta elettronica, crea un gestore e chiamalo "Email - Tipo 1". Imposta l'indirizzo "A" su " [email protected] ", passa alla scheda "Condizioni", scegli "Stato" come "Visibile" e imposta "Trigger/Valore" come "Seleziona tipo [Seleziona] il valore è tipo_1".
• Allo stesso modo, crea il secondo gestore e chiamalo "Email - Tipo 2". Imposta l'indirizzo "A" su " [email protected] ", passa alla scheda "Condizioni", scegli "Stato" come "Visibile" e imposta "Trigger/Valore" come "Seleziona tipo [Seleziona] il valore è di tipo_2".

• Gestori di posta programmati

  • Estende il gestore e-mail del modulo Webform per consentire la pianificazione delle e-mail. Per utilizzare questa funzione, abilita il sottomodulo "Gestore di posta elettronica pianificato Webform".
  • Per programmare l'invio di un'e-mail di invio del modulo, fare clic sul pulsante "Aggiungi gestore". Seleziona qui il gestore "E-mail pianificata".

C'è solo un'impostazione di configurazione extra nel gestore "Email pianificata" rispetto al normale "Gestore email". E questo è aggiungere la data dell'e-mail di pianificazione nella scheda Impostazioni generali.

Gestore email programmato

Imposta la data per attivare il tuo gestore e quando verrà eseguito il prossimo cron, la tua email verrà inviata!

Trovare aiuto

Esistono diversi modi per chiedere aiuto con il modulo modulo web. Ecco un elenco di alcune fonti:

• Documentazione, ricettario e screencast
  • https://www.drupal.org/docs/8/modules/webform
• Coda problemi modulo web
  • https://www.drupal.org/project/issues/webform
• Risposte Drupal
  • http://drupal.stackexchange.com
• Canale lento
  • Puoi sempre inviare le tue domande relative al modulo Webform nel canale #webform all'interno dell'area di lavoro slack di Drupal. Chiunque dalla comunità, anche il manutentore del modulo stesso, è sempre in giro e è così gentile da guidarti con i tuoi problemi.

Un ENORME ringraziamento a Jacob Rockowitz per il suo incessante supporto verso il modulo Drupal 8/9 Webform. Webform non sarebbe stato quello che è ora senza di lui.