¿Le gustaría enviar valores de campo desde sus casillas de verificación con el complemento Webhooks de WPForms? Por defecto, la etiqueta del campo sería enviada, pero con un pequeño fragmento de PHP, puede enviar fácilmente el valor en su lugar. En este tutorial, le mostraremos cómo hacerlo.
Este tutorial va a crear un flujo de trabajo de Slack, así como la creación de variables que vamos a asignar a nuestros campos de formulario para que nuestros datos del formulario se publicará en Slack a través de nuestro webhook para que podamos ofrecer un formulario de solicitud de función en línea en nuestro sitio y tienen que los datos del puesto a Slack cada vez que el formulario es completado por nuestros visitantes.
Envío de valores de campo
Actualmente, la única forma de enviar múltiples campos de formulario desde WPForms a Slack a través de un webhook es usando el Flujo de Trabajo de Slack. Para obtener más información sobre Slack Workflows, consulte esta documentación.
Si sólo desea enviar 1 valor a Slack a través de un webhook, consulte esta documentación.
Vamos a empezar por crear un flujo de trabajo en Slack primero para que podamos crear las variables que vamos a utilizar más adelante al configurar el webhook dentro del constructor de formularios.
1)Añadir un nuevo flujo de trabajo en Slack
En primer lugar, deberá iniciar sesión en Slack a través del navegador web. Una vez que hayas iniciado sesión, haz clic en la flecha situada junto al nombre de la empresa y, en Herramientas, selecciona Workflow Builder.
A continuación, haga clic en el botón Crear situado en la esquina superior derecha de la página, asigne un nombre a su flujo de trabajo y haga clic en Siguiente.
2) Seleccionar el tipo de flujo de trabajo
La siguiente pantalla que verá es donde seleccionará qué tipo de flujo de trabajo desea crear. Como vamos a utilizar el complemento Webhooks de WPForms, haremos clic en el botón Seleccionar junto a Webhook.
3) Crear las variables para el flujo de trabajo
La siguiente pantalla es donde vamos a crear las variables que vamos a publicar. Para el propósito de este tutorial, sabemos que vamos a crear un formulario con los campos Nombre, Email, Casilla de verificación (para nuestra lista de productos) y Texto de párrafo (para nuestros comentarios). Así que vamos a crear variables que trabajarán con esos campos.
Una vez que haga clic en el enlace Añadir Variables, una nueva ventana le pedirá la Clave y el Tipo de Datos.
Nuestra primera variable Key será name y nuestro Data Type será Text.
Haga clic en Listo cuando termine de agregar la variable y repita este paso para cada variable que desee agregar a este flujo de trabajo haciendo clic en el enlace Agregar variable hasta que termine de agregar todas las variables.
Vamos a repetir este paso para los campos de formulario Email, Casilla de verificación y Texto de párrafo.
Ahora que hemos añadido todas nuestras variables, haga clic en el botón Siguiente para terminar de construir el flujo de trabajo.
4)Añadir los pasos al flujo de trabajo
Ahora es el momento de añadir los pasos que seguirá nuestro nuevo flujo de trabajo.
A continuación, haz clic en el botón Añadir situado junto a Enviar un mensaje. Aquí puedes elegir enviar un mensaje a un canal o persona concretos de Slack.
La siguiente pantalla que verás te pedirá que selecciones en un desplegable a quién quieres enviar el mensaje. A continuación, podrás crear el mensaje que se enviará.
El mensaje en sí aceptará el texto escrito que introduzca, así como las variables que ha añadido en el último paso. Para nuestro mensaje, empezaremos con lo que este mensaje es "Incoming form submission for a new feature".
Entonces empezaremos a construir el texto y las variables juntos en una nueva línea para cada uno. Una vez que hayas escrito Desde, haz clic en el enlace Insertar variable y selecciona la variable de nombre. Repite este paso para cada una de las variables que has añadido y haz clic en Guardar para guardar los cambios.
La ventana emergente se cerrará y sólo tendrá que hacer clic en el botón Publicar para publicar el flujo de trabajo. Una vez que haya publicado su flujo de trabajo puede hacer clic en el botón Copiar junto a la URL que se crea para el webhook. Utilizaremos esta URL en un paso posterior.
Creación del formulario
Antes de que podamos enviar los valores de nuestros campos a través del webhook, necesitamos crear nuestro formulario. Nuestro formulario contendrá los campos Nombre, Correo electrónico, Casilla de verificación (para una lista de nuestros productos) y un Párrafo de texto (para nuestros comentarios).
Si necesita ayuda para crear un formulario, consulte esta documentación.
Añadir el fragmento de código
Ahora es el momento de añadir el fragmento de código que creará y enviará valores de campo con webhooks desde nuestro campo de formulario Checkbox.
Sólo tienes que copiar y pegar este fragmento de código en tu sitio. Si necesitas ayuda para añadir fragmentos de código a tu sitio, consulta este tutorial.
En primer lugar, vamos a añadir el fragmento que nos permite añadir valores de campo para Dropdowns, Checkboxes y campos de opción múltiple de este tutorial.
/** * Mostrar valores en desplegables, casillas de verificación y opciones múltiples. * * @link https://wpforms.com/developers/add-field-values-for-dropdown-checkboxes-and-multiple-choice-fields/ */ add_action( 'wpforms_fields_show_options_setting', '__return_true' );
A continuación, vamos a añadir un snippet que nos permita enviar esos valores de campo con 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);
Por favor, recuerde actualizar el ID de formulario de 322 a cualquiera que sea su ID de formulario. Si necesita ayuda para encontrar su ID de formulario, consulte este tutorial.
Editar el formulario para poder mostrar los valores
Una vez que hayas añadido tu fragmento de código, simplemente edita tu formulario y haz clic en el campo Checkbox para que puedas rellenar los valores de tu campo. Esto es lo que se enviará a Slack a través del webhook en lugar de la etiqueta.
Ahora tendrás que editar tu formulario y seleccionar el campo de formulario Casilla de verificación. En las Opciones avanzadas, haga clic en la casilla de verificación Mostrar valores.
Una vez hecho esto, podrás añadir tus valores al campo.
Asignación de los campos del webhook
El paso final es mapear los campos del formulario para que coincidan con las variables que configuramos en nuestro flujo de trabajo de Slack. Para completar este paso, desde el constructor de formularios haz clic en la pestaña Configuración. A continuación, haga clic en Webhooks.
En el menú desplegable Webhooks, active esta opción.
La URL de Webhooks es la URL que copió en el Paso 4 anterior. El método de solicitud será Post y el formato de solicitud será JSON.
Puede dejar en blanco la sección Secret y Request Headers. No necesitaremos modificar estos ajustes.
En el cuerpo de la solicitud es donde asignaremos las variables del paso 3 a los campos del formulario.
Ahora, cuando se complete el formulario, Slackbot no sólo enviará un mensaje a la persona o canal que hayas configurado en tu webhook, sino que también enviará los valores de los campos a través del webhook en lugar de la etiqueta del campo.
Y ya está. ¿Le gustaría también añadir un poco de confeti animado a su mensaje de confirmación tras el envío exitoso del formulario? Eche un vistazo a nuestro tutorial sobre Cómo añadir animación de confeti al mensaje de confirmación.