Gostaria de enviar valores de campo de suas caixas de seleção com o complemento 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. Neste tutorial, mostraremos a você como fazer isso.
Este tutorial criará um fluxo de trabalho do Slack, bem como variáveis às quais atribuiremos nossos campos de formulário para que os dados do formulário sejam postados no Slack por meio de nosso webhook, de modo que possamos fornecer um formulário de solicitação de recurso on-line em nosso site e ter esses dados postados no Slack sempre que o formulário for preenchido por nossos visitantes.
Envio de valores de campo
Atualmente, a única maneira de enviar vários campos de formulário do WPForms para o Slack por meio de um webhook é usando o fluxo de trabalho do Slack. Para obter mais informações sobre os fluxos de trabalho do Slack, consulte esta documentação.
Se você quiser enviar apenas um valor para o Slack por meio de um webhook, consulte esta documentação.
Vamos começar 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) Adicionar um novo fluxo de trabalho no Slack
Primeiro, você precisará fazer login no Slack pelo navegador da Web. Quando estiver conectado, clique na seta ao lado do nome da empresa e, em Ferramentas, selecione Criador de fluxo de trabalho.
Em seguida, clique no botão Create (Criar ) no canto superior direito da página, dê um nome ao seu fluxo de trabalho e clique em Next (Avançar).
2) Seleção do tipo de fluxo de trabalho
A próxima tela que você verá é a que seleciona o tipo de fluxo de trabalho que deseja 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
A próxima tela é onde criaremos as variáveis que publicaremos. Para os fins deste tutorial, sabemos que criaremos um formulário com os campos Nome, E-mail, Caixa de seleção (para nossa lista de produtos) e Texto de parágrafo (para nossos comentários). Portanto, vamos criar variáveis que funcionarão com esses campos.
Quando você clicar no link Add Variables (Adicionar variáveis ), uma nova janela solicitará a chave e o tipo de dados.
Nossa primeira variável Key (chave) será name (nome ) e nosso Data Type (tipo de dados ) será Text (texto).
Clique em Done (Concluído ) quando terminar de adicionar a variável e repita essa etapa para cada variável que deseja adicionar a esse fluxo de trabalho, clicando no link Add Variable (Adicionar variável ) até terminar de adicionar todas as variáveis.
Repetiremos essa etapa para os campos de formulário Email, Checkbox e Paragraph Text.
Agora que adicionamos todas as nossas variáveis, clique no botão Next (Avançar ) para concluir a criação do fluxo de trabalho.
4) Adicionar as etapas ao fluxo de trabalho
Agora é hora de adicionar as etapas que o nosso novo fluxo de trabalho executará.
Em seguida, clique no botão Adicionar ao lado de Enviar uma mensagem. Aqui você pode optar por postar em um determinado canal ou pessoa no Slack.
A próxima tela que você verá solicitará que você selecione, em uma lista suspensa, para quem 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 a nossa mensagem, começaremos com a mensagem "Incoming form submission for a new feature" (Envio de formulário para um novo recurso).
Em seguida, começaremos a criar o texto e as variáveis juntos em uma nova linha para cada um. Depois de digitar From, clique no link Insert Variable (Inserir variável ) e selecione o nome da variável. Repita essa etapa para cada uma das variáveis que você adicionou e clique em Save 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 o fluxo de trabalho, você pode clicar no botão Copiar ao lado do URL que é criado para o webhook. Usaremos esse URL em uma etapa posterior.
Criando o formulário
Antes de podermos enviar os valores de nossos campos por meio do webhook, precisamos criar nosso formulário. Nosso formulário conterá os campos de formulário Nome, E-mail, Caixa de seleção (para uma lista de nossos produtos) e um Texto de parágrafo (para nossos comentários).
Se precisar de ajuda para criar um formulário, consulte esta documentação.
Adição do 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 Checkbox.
Basta copiar e colar esse 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 snippet que nos permite adicionar valores de campo para campos suspensos, caixas de seleção e campos de múltipla escolha deste tutorial.
/** * Mostrar valores no menu suspenso, caixas de seleção e múltipla escolha. * * @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 snippet 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);
Lembre-se de atualizar o ID do formulário de 322 para o ID do seu formulário. Se precisar de ajuda para encontrar o ID do formulário, consulte este tutorial.
Editar o formulário para permitir a exibição dos valores
Depois de adicionar o snippet de código, basta editar o formulário e clicar no campo Caixa de seleção para poder preencher os valores do campo. Isso é o que será enviado ao Slack por meio do webhook em vez do rótulo.
Agora você precisará editar seu formulário e selecionar o campo de formulário Checkbox. Em Advanced Options (Opções avançadas), clique na caixa de seleção Show Values (Mostrar valores).
Depois de fazer isso, você poderá adicionar seus valores ao campo.
Mapeamento dos campos do webhook
A etapa final é mapear os campos do formulário para corresponder às variáveis que configuramos em nosso fluxo de trabalho do Slack. Para concluir essa etapa, no construtor de formulários, clique na guia Settings (Configurações ). Em seguida, clique em Webhooks.
No menu suspenso Webhooks, alterne essa configuração para On.
O URL do Webhooks é o URL que você copiou na Etapa 4 acima. O método de solicitação será Post e o formato da solicitação será JSON.
Você pode deixar a seção Secret e Request Headers em branco. Não precisaremos alterar essas configurações.
No Request Body, é aqui que mapearemos nossas variáveis da Etapa 3 para os campos do formulário.
Agora, quando o formulário for preenchido, o Slackbot não apenas enviará uma mensagem para a pessoa ou o canal que você configurou no webhook, mas também enviará os valores do campo por meio do webhook, em vez do rótulo do campo.
E é isso! Gostaria de adicionar também alguns 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.