Como Enviar Valores de Campos com Webhooks

Você gostaria de enviar valores de campos das suas caixas de seleção com o addon WPForms Webhooks? Por padrão, o rótulo do campo seria enviado, mas com um pequeno trecho de PHP, você pode facilmente enviar o valor em vez disso. Neste tutorial, mostraremos como fazer isso.

Este tutorial criará um Slack Workflow, bem como criará variáveis às quais atribuiremos nossos campos de formulário para que nossos dados de formulário sejam postados no Slack através do nosso webhook, para que possamos fornecer um formulário de solicitação de recursos online em nosso site e ter esses dados postados no Slack sempre que o formulário for preenchido por nossos visitantes.

Enviando valores de campos

Atualmente, a única maneira de enviar vários campos de formulário do WPForms para o Slack através de um webhook é usando o Slack Workflow. Para mais informações sobre Slack Workflows, consulte esta documentação.

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

1) Adicionando um novo fluxo de trabalho no Slack

Primeiro, você precisará fazer login no seu Slack através do navegador da web. Uma vez logado, 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, dê um nome ao seu fluxo de trabalho e clique em Próximo.

2) Selecionando o tipo de fluxo de trabalho

A próxima tela que você verá é onde você selecionará o tipo de fluxo de trabalho que deseja criar. Como usaremos o addon WPForms Webhooks, clicaremos no botão Selecionar ao lado de Webhook.

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

A próxima tela é onde criaremos as variáveis que postaremos. Para fins deste tutorial, sabemos que criaremos um formulário com os campos de formulário Nome, Email, Checkbox (para nossa lista de produtos) e Texto Parágrafo (para nossos comentários). Portanto, criaremos variáveis que funcionarão com esses campos.

Depois de clicar no link Adicionar Variáveis, uma nova janela solicitará a Chave e o Tipo de Dados.

Nossa primeira Chave de variável será name e nosso Tipo de Dados será Texto.

Clique em Concluído quando terminar de adicionar a variável e repita esta etapa para cada variável que deseja adicionar a este fluxo de trabalho clicando no link Adicionar variável até terminar de adicionar todas as variáveis.

Vamos repetir esta etapa para os campos de formulário Email, Checkbox e Texto de parágrafo.

Agora que adicionamos todas as nossas variáveis, clique no botão Avançar para finalizar a criação do fluxo de trabalho.

4) Adicionando as etapas ao fluxo de trabalho

Agora é hora de adicionar as etapas que nosso novo fluxo de trabalho realizará.

Em seguida, clique no botão Adicionar ao lado de Enviar uma mensagem. Aqui você pode optar por postar em um canal ou pessoa específica no Slack.

A próxima tela que você verá pedirá para selecionar em um menu suspenso para quem você deseja enviar a mensagem. Em seguida, você poderá criar a mensagem que será enviada.

A mensagem em si aceitará o texto digitado que você inserir, bem como as variáveis que você adicionou na última etapa. Para nossa mensagem, começaremos com o que esta mensagem é “Submissão de formulário recebida para um novo recurso”.

Em seguida, começaremos a construir o texto e as variáveis juntos em uma nova linha para cada um. Depois de digitar De, clique no link Inserir variável e selecione a variável nome. Repita esta etapa para cada uma das variáveis que você adicionou e clique em Salvar para salvar as alterações.

A janela pop-up será fechada e você só precisará clicar no botão Publicar para publicar o fluxo de trabalho. Depois de publicar seu fluxo de trabalho, você pode clicar no botão Copiar ao lado do URL que é criado para o webhook. Usaremos este URL em uma etapa posterior.

Criando o formulário

Antes de podermos enviar os valores de nossos campos através do webhook, precisamos criar nosso formulário. Nosso formulário conterá os campos de formulário Nome, Email, Checkbox (para uma lista de nossos produtos) e Texto de parágrafo (para nossos comentários).

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

Adicionando o trecho de código

Agora é hora de adicionar o trecho de código que criará e enviará valores de campo com webhooks de nosso campo de formulário Checkbox.

Basta copiar e colar este trecho de código em 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 Dropdown, Checkbox e Múltipla Escolha 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, adicionaremos 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);

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

Depois de adicionar seu trecho de código, basta editar seu formulário e clicar no campo Checkbox para preencher os valores do seu campo. É isso que será enviado para o Slack através do webhook em vez do rótulo.

Agora você precisará editar seu formulário e selecionar o campo de formulário Checkbox. Em Opções Avançadas, marque a caixa de seleção para Mostrar Valores.

Depois de fazer isso, você poderá adicionar seus valores ao campo.

Mapeando os campos do webhook

O passo final é mapear os campos do formulário para corresponder às variáveis que configuramos em nosso fluxo de trabalho do Slack. Para concluir esta etapa, dentro do construtor de formulários, clique na guia Configurações. Em seguida, clique em Webhooks.

No menu suspenso Webhooks, alterne esta configuração para Ativado.

A URL do Webhook é a URL que você copiou na Etapa 4 acima. O Método de Requisição será Post e o Formato da Requisição será JSON.

Você pode deixar a seção Secreto e Cabeçalhos de Requisição em branco. Não precisaremos alterar essas configurações.

No Corpo da Requisição, é aqui que mapearemos nossas variáveis da Etapa 3 para nossos campos de formulário.

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

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