Volete inviare i valori dei campi dalle vostre caselle di controllo con l'addon WPForms Webhooks? Per impostazione predefinita, viene inviata l'etichetta del campo, ma con un piccolo snippet PHP è possibile inviare facilmente il valore. In questo tutorial vi spiegheremo come fare.
In questa esercitazione creeremo un flusso di lavoro Slack e creeremo le variabili a cui assegnare i campi del modulo, in modo che i dati del modulo vengano inviati a Slack tramite il webhook, così da poter fornire un modulo di richiesta di funzionalità online sul nostro sito e far sì che i dati vengano inviati a Slack ogni volta che il modulo viene compilato 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 Slack. Per ulteriori informazioni sui flussi di lavoro Slack, consultare questa documentazione.
Se si desidera inviare solo 1 valore a Slack tramite un webhook, consultare questa documentazione.
Inizieremo creando un flusso di lavoro in Slack, in modo da poter creare le variabili che utilizzeremo in seguito per impostare il webhook all'interno del costruttore di moduli.
1)Aggiunta di un nuovo flusso di lavoro in Slack
Per prima cosa, è necessario accedere a Slack tramite il browser web. Una volta effettuato l'accesso, fate clic sulla freccia accanto al nome dell'azienda e, alla voce Strumenti, selezionate Workflow Builder.
Successivamente, si fa clic sul pulsante Crea nell'angolo in alto a destra della pagina e si assegna un nome al flusso di lavoro, quindi si fa clic su Avanti.
2) Selezione del tipo di flusso di lavoro
Nella schermata successiva si dovrà selezionare il tipo di flusso di lavoro che si desidera creare. Poiché utilizzeremo l'addon WPForms Webhooks, faremo clic sul pulsante Seleziona accanto a Webhook.
3) Creare le variabili per il flusso di lavoro
La schermata successiva è quella in cui creeremo le variabili che pubblicheremo. Per lo scopo di questa esercitazione, sappiamo che creeremo un modulo con i campi Nome, Email, Casella di controllo (per l'elenco dei prodotti) e Testo del paragrafo (per i commenti). Quindi creeremo delle variabili che funzioneranno con questi campi.
Una volta fatto clic sul link Aggiungi variabili, una nuova finestra chiederà la chiave e il tipo di dati.
La nostra prima variabile Chiave sarà nome e il nostro Tipo di dati sarà Testo.
Fare clic su Fine al termine dell'aggiunta della variabile e ripetere questo passaggio per ogni variabile che si desidera aggiungere a questo flusso di lavoro facendo clic sul collegamento Aggiungi variabile fino a quando non si è terminato di aggiungere tutte le variabili.
Ripetiamo questo passaggio per i campi del modulo Email, Casella di controllo e Testo del paragrafo.
Ora che abbiamo aggiunto tutte le variabili, facciamo clic sul pulsante Avanti per terminare la creazione del flusso di lavoro.
4)Aggiungere le fasi al flusso di lavoro
Ora è il momento di aggiungere le fasi del nuovo flusso di lavoro.
Quindi, fate clic sul pulsante Aggiungi accanto a Invia un messaggio. Qui si può scegliere di inviare un messaggio a un canale o a una persona particolare di Slack.
La schermata successiva vi chiederà di selezionare da un menu a tendina a chi volete inviare il messaggio. Quindi si potrà costruire il messaggio da inviare.
Il messaggio stesso accetterà il testo digitato e le variabili aggiunte nell'ultimo passaggio. Per il nostro messaggio, inizieremo con il messaggio "Invio di un modulo per una nuova funzionalità".
Quindi inizieremo a costruire il testo e le variabili insieme su una nuova riga per ciascuna. Una volta digitato Da, fare clic sul collegamento Inserisci variabile e selezionare la variabile Nome. Ripetete questo passaggio per ciascuna delle variabili aggiunte e fate clic su Salva per salvare le modifiche.
La finestra popup verrà chiusa e sarà sufficiente fare clic sul pulsante Pubblica per pubblicare il flusso di lavoro. Una volta pubblicato il flusso di lavoro, si può fare clic sul pulsante Copia accanto all'URL creato per il webhook. Questo URL verrà utilizzato in una fase successiva.
Creazione del modulo
Prima di poter inviare i valori dei nostri campi attraverso il webhook, dobbiamo creare il nostro modulo. Il nostro modulo conterrà i campi Nome, Email, Casella di controllo (per l'elenco dei prodotti) e Testo del paragrafo (per i commenti).
Se avete bisogno di aiuto per creare un modulo, consultate questa documentazione.
Aggiunta dello snippet di codice
Ora è il momento di aggiungere lo snippet di codice che creerà e invierà i valori del campo con webhook dal nostro campo del modulo Checkbox.
È sufficiente copiare e incollare questo snippet di codice nel vostro sito. Se avete bisogno di aiuto per aggiungere snippet di codice al vostro sito, consultate questo tutorial.
Per prima cosa, aggiungeremo lo snippet che ci consente di aggiungere i valori dei campi per le caselle a discesa, le caselle di controllo e i campi a scelta multipla di questa guida.
/** * Mostra i valori nelle caselle a discesa, nelle caselle di controllo e nelle scelte multiple. * * @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 consentirà di inviare i valori dei campi 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);
Ricordarsi di aggiornare l'ID del modulo da 322 a qualsiasi ID del modulo. Se avete bisogno di aiuto per trovare il vostro ID modulo, consultate questa guida.
Modifica del modulo per consentire la visualizzazione dei valori
Una volta aggiunto lo snippet di codice, basta modificare il modulo e fare clic sul campo Checkbox per inserire i valori del campo. Questo è ciò che verrà inviato a Slack attraverso il webhook, invece dell'etichetta.
Ora è necessario modificare il modulo e selezionare il campo del modulo Casella di controllo. Nelle Opzioni avanzate, fare clic sulla casella di controllo Mostra valori.
Una volta fatto questo, sarà possibile aggiungere i valori al campo.
Mappatura dei campi del webhook
Il passo finale consiste nel mappare i campi del modulo in modo che corrispondano alle variabili impostate nel nostro flusso di lavoro Slack. Per completare questo passaggio, dall'interno del costruttore di moduli, fare clic sulla scheda Impostazioni. Quindi fare clic su Webhooks.
Dal menu a tendina Webhooks, impostare questa impostazione su On.
L'URL di Webhooks è l'URL copiato nel passo 4 precedente. Il metodo di richiesta sarà Post e il formato della richiesta sarà JSON.
Si può lasciare vuota la sezione Secret e Request Headers. Non sarà necessario modificare queste impostazioni.
Nel corpo della richiesta, è qui che verranno mappate le variabili del passo 3 nei campi del modulo.
Ora, quando il modulo viene completato, non solo Slackbot invierà un messaggio alla persona o al canale impostato nel webhook, ma invierà anche i valori dei campi attraverso il webhook invece dell'etichetta del campo.
E questo è tutto! Volete aggiungere anche dei coriandoli animati al messaggio di conferma dell'invio del modulo? Date un'occhiata al nostro tutorial su Come aggiungere un'animazione di coriandoli al messaggio di conferma.