Como Enviar Valores de Campo com Webhooks

Pretende enviar os valores dos campos das suas caixas de seleção com o complemento WPForms Webhooks? Por defeito, o rótulo do campo seria enviado, mas com um pequeno trecho de PHP, pode facilmente enviar o valor em vez disso. Neste tutorial, vamos guiá-lo através de como fazer isto.

Este tutorial vai criar um Fluxo de Trabalho do Slack, bem como criar variáveis às quais atribuiremos os nossos campos de formulário para que os nossos dados de formulário sejam enviados para o Slack através do nosso webhook, para que possamos fornecer um formulário de pedido de funcionalidades online no nosso site e ter esses dados enviados para o Slack sempre que o formulário for preenchido pelos nossos visitantes.

Envio de valores de campo

Atualmente, a única forma de enviar múltiplos campos de formulário do WPForms para o Slack através de um webhook é usando o Fluxo de Trabalho do Slack. Para mais informações sobre Fluxos de Trabalho do Slack, consulte esta documentação.

Vamos começar por criar primeiro um fluxo de trabalho no Slack para que possamos criar as variáveis que usaremos mais tarde ao configurar o webhook dentro do construtor de formulários.

1) Adicionar um novo fluxo de trabalho no Slack

Primeiro, terá de iniciar sessão no seu Slack através do navegador web. Assim que tiver iniciado sessão, clique na seta ao lado do nome da empresa e, em Ferramentas, selecione Construtor de Fluxos de Trabalho.

Em seguida, clique no botão Criar no canto superior direito da página e dê um nome ao seu fluxo de trabalho, depois clique em Seguinte.

2) Selecionar o tipo de fluxo de trabalho

O ecrã seguinte que verá é onde selecionará o tipo de fluxo de trabalho que pretende criar. Como vamos usar o complemento WPForms Webhooks, clicaremos no botão Selecionar ao lado de Webhook.

3) Criar as variáveis para o fluxo de trabalho

O ecrã seguinte é onde vamos criar as variáveis que enviaremos. Para efeitos deste tutorial, sabemos que vamos criar um formulário com os campos de formulário Nome, Email, Caixa de seleção (para a nossa lista de produtos) e Texto de Parágrafo (para os nossos comentários). Portanto, vamos criar variáveis que funcionarão com esses campos.

Depois de clicar na ligação Adicionar Variáveis, uma nova janela irá pedir-lhe a Chave e o Tipo de Dados.

A nossa primeira Chave de variável será nome e o nosso Tipo de Dados será Texto.

Clique em Concluído quando terminar de adicionar a variável e repita este passo para cada variável que pretenda adicionar a este fluxo de trabalho, clicando na ligação Adicionar Variável até terminar de adicionar todas as variáveis.

Vamos repetir este passo para os campos de formulário Email, Caixa de seleção e Texto de Parágrafo.

Agora que adicionámos todas as nossas variáveis, clique no botão Seguinte para terminar de construir o fluxo de trabalho.

4) Adicionar os passos ao fluxo de trabalho

Agora é hora de adicionar os passos que o nosso novo fluxo de trabalho irá executar.

Em seguida, clique no botão Adicionar ao lado de Enviar uma mensagem. Aqui pode escolher publicar para um canal ou pessoa específica no Slack.

O próximo ecrã que verá irá pedir-lhe para selecionar, a partir de um menu suspenso, para quem gostaria de enviar a mensagem. Depois, poderá construir a mensagem que será enviada.

A mensagem em si aceitará o texto digitado que introduzir, bem como as variáveis que adicionou no último passo. Para a nossa mensagem, começaremos com o que esta mensagem é “Submissão de formulário recebida para uma nova funcionalidade”.

Depois, começaremos a construir o texto e as variáveis juntos numa nova linha para cada um. Assim que tiver digitado De, clique na ligação Inserir Variável e selecione a variável nome. Repita este passo para cada uma das variáveis que adicionou e clique em Guardar para guardar as alterações.

A janela pop-up será fechada e terá apenas de clicar no botão Publicar para publicar o fluxo de trabalho. Assim que tiver publicado o seu fluxo de trabalho, pode clicar no botão Copiar ao lado do URL que é criado para o webhook. Usaremos este URL num passo posterior.

Criação do formulário

Antes de podermos enviar os nossos valores de campo através do webhook, precisamos de criar o nosso formulário. O nosso formulário conterá os campos de formulário Nome, Email, Caixa de seleção (para uma lista dos nossos produtos) e Texto de Parágrafo (para os nossos comentários).

Se precisar de ajuda para criar um formulário, consulte esta documentação.

Adicionar o trecho de código

Agora é hora de adicionar o trecho de código que criará e enviará valores de campo com webhooks do nosso campo de formulário Caixa de seleção.

Basta copiar e colar este trecho de código no seu site. Se precisar de ajuda para adicionar trechos de código ao seu site, consulte este tutorial.

Primeiro, adicionaremos o trecho que nos permite adicionar valores de campo para campos de Seleção, Caixas de seleção e Múltipla escolha a partir deste 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' );

Em seguida, vamos adicionar um trecho que nos permite enviar esses valores de campo com webhooks.

/**
 * 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);

Editar o formulário para permitir a exibição dos valores

Depois de adicionar o seu trecho de código, basta editar o seu formulário e clicar no campo Caixa de seleção para poder preencher os seus valores de campo. Isto é o que será enviado para o Slack através do webhook em vez do rótulo.

Agora terá de editar o seu formulário e selecionar o campo de formulário Caixa de seleção. Em Opções Avançadas, clique na caixa de seleção para Mostrar Valores.

Depois de fazer isto, poderá adicionar os seus valores ao campo.

Mapear os campos do webhook

O passo final é mapear os campos do formulário para corresponder às variáveis que configurámos no nosso fluxo de trabalho do Slack. Para completar este passo, a partir do construtor de formulários, clique no separador Definições. Em seguida, clique em Webhooks.

No menu pendente Webhooks, altere esta definição para Ativado.

O URL do Webhook é o URL que copiou no Passo 4 acima. O Método de Pedido será Post e o Formato do Pedido será JSON.

Pode deixar a secção Secreto e Cabeçalhos de Pedido em branco. Não precisaremos de alterar estas definições.

No Corpo do Pedido, é aqui que mapearemos as nossas variáveis do Passo 3 para os nossos campos de formulário.

Agora, quando o formulário for preenchido, não só um Slackbot enviará uma mensagem para a pessoa ou canal que configurou no seu webhook, mas também enviará os valores dos campos através do webhook em vez do rótulo do campo.

E é tudo! Gostaria também de adicionar confetes animados à sua mensagem de confirmação após o envio bem-sucedido do formulário? Dê uma vista de olhos ao nosso tutorial sobre Como Adicionar Animação de Confetes à Mensagem de Confirmação.