Come inviare i valori dei campi con i webhook

Vuoi inviare i valori dei campi dalle tue caselle di controllo con il componente aggiuntivo WPForms Webhooks? Per impostazione predefinita, verrebbe inviata l'etichetta del campo, ma con un piccolo snippet PHP, puoi facilmente inviare il valore. In questo tutorial, ti spiegheremo come fare.

Questo tutorial creerà un Flusso di lavoro di Slack e creerà variabili a cui assegneremo i nostri campi modulo in modo che i dati del nostro modulo vengano inviati a Slack tramite il nostro webhook, in modo da poter fornire un modulo di richiesta funzionalità online sul nostro sito e far sì che i dati vengano inviati a Slack ogni volta che il modulo viene completato dai nostri visitatori.

Invio dei valori dei campi

Attualmente, l'unico modo per inviare più campi modulo da WPForms a Slack tramite un webhook è utilizzare il Flusso di lavoro di Slack. Per ulteriori informazioni sui flussi di lavoro di Slack, consulta questa documentazione.

Inizieremo creando prima un flusso di lavoro in Slack in modo da poter creare le variabili che utilizzeremo in seguito durante la configurazione del webhook all'interno del generatore di moduli.

1) Aggiungere un nuovo flusso di lavoro in Slack

Innanzitutto, dovrai accedere al tuo Slack tramite il browser web. Una volta effettuato l'accesso, fai clic sulla freccia accanto al nome dell'azienda e, sotto Strumenti, seleziona Generatore di flussi di lavoro.

Successivamente, fai clic sul pulsante Crea nell'angolo in alto a destra della pagina, assegna un nome al tuo flusso di lavoro, quindi fai clic su Avanti.

2) Selezione del tipo di flusso di lavoro

La schermata successiva che vedrai è dove selezionerai il tipo di flusso di lavoro che desideri creare. Poiché utilizzeremo il componente aggiuntivo WPForms Webhooks, faremo clic sul pulsante Seleziona accanto a Webhook.

3) Creazione delle variabili per il flusso di lavoro

La schermata successiva è dove creeremo le variabili che invieremo. Ai fini di questo tutorial, sappiamo che creeremo un modulo con i campi modulo Nome, Email, Casella di controllo (per il nostro elenco prodotti) e Testo paragrafo (per i nostri commenti). Quindi creeremo variabili che funzioneranno con questi campi.

Una volta fatto clic sul link Aggiungi variabili, una nuova finestra ti chiederà la Chiave e il Tipo di dati.

La nostra prima Chiave della variabile sarà nome e il nostro Tipo di dati sarà Testo.

Fai clic su Fatto al termine dell'aggiunta della variabile e ripeti questo passaggio per ogni variabile che desideri aggiungere a questo flusso di lavoro facendo clic sul link Aggiungi variabile finché non avrai finito di aggiungere tutte le variabili.

Ripeteremo questo passaggio per i campi modulo Email, Casella di controllo e Testo paragrafo.

Ora che abbiamo aggiunto tutte le nostre variabili, fai clic sul pulsante Avanti per completare la creazione del flusso di lavoro.

4) Aggiunta dei passaggi al flusso di lavoro

Ora è il momento di aggiungere i passaggi che il nostro nuovo flusso di lavoro intraprenderà.

Successivamente, fai clic sul pulsante Aggiungi accanto a Invia un messaggio. Qui puoi scegliere di pubblicare su un canale o una persona specifica in Slack.

La schermata successiva che vedrai ti chiederà di selezionare da un menu a discesa a chi desideri inviare il messaggio. Quindi potrai creare il messaggio che verrà inviato.

Il messaggio stesso accetterà il testo digitato che inserisci, nonché le variabili che hai aggiunto nel passaggio precedente. Per il nostro messaggio, inizieremo con ciò che questo messaggio è “Invio modulo in arrivo per una nuova funzionalità”.

Quindi inizieremo a combinare testo e variabili su una nuova riga per ciascuno. Una volta digitato Da, fai clic sul link Inserisci variabile e seleziona la variabile nome. Ripeti questo passaggio per ciascuna delle variabili che hai aggiunto e fai clic su Salva per salvare le modifiche.

La finestra popup verrà chiusa e dovrai solo fare clic sul pulsante Pubblica per pubblicare il flusso di lavoro. Una volta pubblicato il tuo flusso di lavoro, puoi fare clic sul pulsante Copia accanto all'URL che viene creato per il webhook. Utilizzeremo questo URL in un passaggio successivo.

Creazione del modulo

Prima di poter inviare i nostri valori di campo tramite il webhook, dobbiamo creare il nostro modulo. Il nostro modulo conterrà i campi modulo Nome, Email, Casella di controllo (per un elenco dei nostri prodotti) e Testo del paragrafo (per i nostri commenti).

Se hai bisogno di aiuto per creare un modulo, consulta questa documentazione.

Aggiunta dello snippet di codice

Ora è il momento di aggiungere lo snippet di codice che creerà e invierà i valori dei campi con i webhook dal nostro campo modulo Casella di controllo.

Copia e incolla semplicemente questo snippet di codice sul tuo sito. Se hai bisogno di aiuto per aggiungere snippet di codice al tuo sito, consulta questo tutorial.

Innanzitutto, aggiungeremo lo snippet che ci consente di aggiungere valori di campo per campi a discesa, caselle di controllo e scelta multipla da questo tutorial.

/**
 * Show values in Dropdown, checkboxes, and Multiple Choice.
 *
 * @link https://wpforms.com/developers/add-field-values-for-dropdown-checkboxes-and-multiple-choice-fields/
 */
  
add_action( 'wpforms_fields_show_options_setting', '__return_true' );

Successivamente, aggiungeremo uno snippet che ci consente di inviare tali valori di campo con i webhook.

/**
 * Send field values in Dropdown, checkboxes, and Multiple Choice through webhook.
 *
 * @link https://wpforms.com/developers/how-to-send-field-values-with-webhooks/
 */

function wpf_dev_webhooks_process_delivery_request_options($options, $webhook_data, $fields, $form_data, $entry_id) {
		
	    if ( ! wpforms_show_fields_options_setting() ) {
			return $options;
		}
	    
	    //Only run on form ID 322
		if ( empty( $form_data[ 'id' ] ) || $form_data[ 'id' ] !== '322' ) {
			return $options;
		}
	
		if (
			empty( $options[ 'body' ] ) ||
			empty( $webhook_data[ 'body' ] ) ||
			empty( $fields )
		) {
			return $options;
		}
	
		$body = ! is_array( $options[ 'body' ] ) ? json_decode( $options[ 'body' ], true ) : $options[ 'body' ];
		foreach ( $body as $param_key => $param_value ) {
			if (
				! isset( $webhook_data[ 'body' ][ $param_key ] ) ||
				empty( $fields[ $webhook_data[ 'body' ][ $param_key ] ] ) ||
				! isset( $fields[ $webhook_data[ 'body' ][ $param_key ] ][ 'value_raw' ] )
			) {
				continue;
			}
			$body[ $param_key ] = $fields[ $webhook_data['body'][ $param_key ] ]['value_raw'];
		}
	
		// Format request data.
		if (
			! empty( $options[ 'method' ] ) &&
			$options[ 'method' ] !== 'GET' &&
			$webhook_data[ 'format' ] === 'json'
		) {
			// Encode request body.
			$options[ 'body' ] = wp_json_encode( $body );
		}
	
		return $options;
	
	}

add_filter( 'wpforms_webhooks_process_delivery_request_options', 'wpf_dev_webhooks_process_delivery_request_options', 10, 5);

Modifica del modulo per abilitare la visualizzazione dei valori

Una volta aggiunto lo snippet di codice, modifica semplicemente il tuo modulo e fai clic sul campo Casella di controllo in modo da poter inserire i tuoi valori di campo. Questo è ciò che verrà inviato a Slack tramite il webhook invece dell'etichetta.

Ora dovrai modificare il tuo modulo e selezionare il campo modulo Casella di controllo. Nelle Opzioni avanzate, fai clic sulla casella di controllo per Mostra valori.

Una volta fatto ciò, potrai aggiungere i tuoi valori al campo.

Mappatura dei campi webhook

Il passaggio finale consiste nel mappare i campi del modulo per corrispondere alle variabili che abbiamo impostato nel nostro flusso di lavoro di Slack. Per completare questo passaggio, dall'interno del generatore di moduli fare clic sulla scheda Impostazioni. Quindi fare clic su Webhook.

Dal menu a discesa Webhook, impostare questa opzione su Attivato.

L'URL del Webhook è l'URL che hai copiato nel Passaggio 4 sopra. Il Metodo di Richiesta sarà Post e il Formato della Richiesta sarà JSON.

Puoi lasciare vuote le sezioni Segreto e Intestazioni di Richiesta. Non avremo bisogno di modificare queste impostazioni.

Nel Corpo della Richiesta, è qui che mapperemo le nostre variabili dal Passaggio 3 ai nostri campi del modulo.

Ora, quando il modulo viene completato, non solo uno Slackbot invierà un messaggio alla persona o al canale impostato nel tuo webhook, ma invierà anche i valori dei campi tramite il webhook invece dell'etichetta del campo.

E questo è tutto! Vuoi anche aggiungere dei coriandoli animati al tuo messaggio di conferma dopo l'invio del modulo? Dai un'occhiata al nostro tutorial su Come aggiungere animazione di coriandoli al messaggio di conferma.