Resumen de IA
¿Le gustaría enviar los valores de los campos de sus casillas de verificación con el complemento Webhooks de WPForms? Por defecto, se enviaría la etiqueta del campo, 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 a crear variables a las que asignaremos nuestros campos del formulario para que nuestros datos del formulario se publiquen en Slack a través de nuestro webhook, de modo que podamos proporcionar un formulario de solicitud de funciones en línea en nuestro sitio y que esos datos se publiquen en Slack cada vez que nuestros visitantes completen el formulario.
Envío de valores de campo
Actualmente, la única forma de enviar varios campos de formulario de WPForms a Slack a través de un webhook es utilizando el Flujo de trabajo de Slack. Para obtener más información sobre los flujos de trabajo de Slack, consulte esta documentación.
Si solo desea enviar 1 valor a Slack a través de un webhook, consulte esta documentación.
Comenzaremos creando primero un flujo de trabajo en Slack para poder crear las variables que utilizaremos más adelante al configurar el webhook dentro del constructor de formularios.
1) Añadir un nuevo flujo de trabajo en Slack
Primero, deberá iniciar sesión en su Slack a través del navegador web. Una vez que haya iniciado sesión, haga clic en la flecha junto al nombre de la empresa y, en Herramientas, seleccione Constructor de flujos de trabajo.
A continuación, haga clic en el botón Crear en la esquina superior derecha de la página, asigne un nombre a su flujo de trabajo y, a continuación, haga clic en Siguiente.
2) Selección del tipo de flujo de trabajo
La siguiente pantalla que verá es donde seleccionará el tipo de flujo de trabajo que desea crear. Dado que vamos a utilizar el complemento Webhooks de WPForms, haremos clic en el botón Seleccionar junto a Webhook.
3) Creación de las variables para el flujo de trabajo
La siguiente pantalla es donde vamos a crear las variables que publicaremos. Para el propósito de este tutorial, sabemos que vamos a crear un formulario con los campos de formulario Nombre, Correo electrónico, Casilla de verificación (para nuestra lista de productos) y Texto de párrafo (para nuestros comentarios). Por lo tanto, vamos a crear variables que funcionará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 Clave de variable será nombre y nuestro Tipo de datos será Texto.
Haga clic en Hecho cuando haya terminado de añadir la variable y repita este paso para cada variable que desee añadir a este flujo de trabajo haciendo clic en el enlace Añadir variable hasta que haya terminado de añadir todas las variables.
Repetiremos este paso para los campos de formulario Correo electrónico, Casilla de verificación y Texto de párrafo.
Ahora que hemos agregado todas nuestras variables, haga clic en el bot ilde{A³}n Siguiente para finalizar la creaci ilde{A³}n del flujo de trabajo.
4) A tildeadir los pasos al flujo de trabajo
Ahora es el momento de a tildeadir los pasos que tomar ilde{A¡} nuestro nuevo flujo de trabajo.
A continuaci ilde{A³}n, haga clic en el bot ilde{A³}n A tildeadir junto a Enviar un mensaje. Aqu ilde{A} puede elegir publicar en un canal o persona en particular en Slack.
La siguiente pantalla que ver ilde{A¡} le pedir ilde{A¡} que seleccione de un men ilde{Aº} desplegable a qui ilde{A³}n desea enviar el mensaje. Luego podr ilde{A¡} crear el mensaje que se enviar ilde{A¡}.
El mensaje en s ilde{A} mismo aceptar ilde{A¡} el texto escrito que introduzca, as ilde{A} como las variables que a tildeadi ilde{A³} en el ilde{Aº}ltimo paso. Para nuestro mensaje, comenzaremos con lo que es este mensaje: “Env ilde{A}o de formulario entrante para una nueva funci ilde{A³}n”.
Luego comenzaremos a construir el texto y las variables juntos en una nueva l ilde{A}nea para cada uno. Una vez que haya escrito De, haga clic en el enlace Insertar variable y seleccione la variable nombre. Repita este paso para cada una de las variables que haya a tildeadido y haga clic en Guardar para guardar los cambios.
La ventana emergente se cerrar ilde{A¡} y solo necesitar ilde{A¡} hacer clic en el bot ilde{A³}n Publicar para publicar el flujo de trabajo. Una vez que haya publicado su flujo de trabajo, puede hacer clic en el bot ilde{A³}n Copiar junto a la URL que se crea para el webhook. Usaremos esta URL en un paso posterior.
Creación del formulario
Antes de poder enviar los valores de nuestros campos a trav ilde{A³}s del webhook, necesitamos crear nuestro formulario. Nuestro formulario contendr ilde{A¡} los campos de formulario Nombre, Correo electr ilde{A³}nico, Casilla de verificaci ilde{A³}n (para una lista de nuestros productos) y Texto de p ilde{A¡}rrafo (para nuestros comentarios).
Si necesita ayuda para crear un formulario, consulte esta documentaci ilde{A³}n.
A tildeadir el fragmento de c ilde{A³}digo
Ahora es el momento de a tildeadir el fragmento de c ilde{A³}digo que crear ilde{A¡} y enviar ilde{A¡} valores de campo con webhooks desde nuestro campo de formulario Casilla de verificaci ilde{A³}n.
Simplemente copie y pegue este fragmento de c ilde{A³}digo en su sitio. Si necesita ayuda para a tildeadir fragmentos de c ilde{A³}digo a su sitio, consulte este tutorial.
Primero, a tildeadiremos el fragmento que nos permite a tildeadir valores de campo para campos de men ilde{Aº} desplegable, casillas de verificaci ilde{A³}n y selecci ilde{A³}n m ilde{Aº}ltiple de este 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' );
A continuaci ilde{A³}n, vamos a a tildeadir un fragmento que nos permite 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);
Recuerde actualizar el ID del 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 habilitar la visualizaci ilde{A³}n de los valores
Una vez que haya a tildeadido su fragmento de c ilde{A³}digo, simplemente edite su formulario y haga clic en el campo Casilla de verificaci ilde{A³}n para poder rellenar los valores de su campo. Esto es lo que se enviar ilde{A¡} a Slack a trav ilde{A³}s del webhook en lugar de la etiqueta.
Ahora necesitar ilde{A¡} editar su formulario y seleccionar el campo de formulario Casilla de verificaci ilde{A³}n. En las Opciones avanzadas, haga clic en la casilla de verificaci ilde{A³}n para Mostrar valores.
Una vez que haya hecho esto, podr ilde{A¡} a tildeadir sus valores al campo.
Mapeo 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 creador de formularios haz clic en la pestaña Ajustes. Luego haz clic en Webhooks.
Desde el menú desplegable Webhooks, cambia este ajuste a Activado.
La URL de Webhooks es la URL que copiaste en el Paso 4 anterior. El Método de Solicitud será Post y el Formato de Solicitud será JSON.
Puedes dejar la sección Secreto y Encabezados de Solicitud en blanco. No necesitaremos modificar estos ajustes.
En el Cuerpo de la Solicitud, aquí es donde mapearemos nuestras variables del Paso 3 a nuestros campos del formulario.
Ahora, cuando se complete el formulario, no solo un Slackbot enviará un mensaje a la persona o canal que configuraste 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 eso es todo! ¿Te gustaría también añadir confeti animado a tu mensaje de confirmación tras el envío exitoso del formulario? Echa un vistazo a nuestro tutorial sobre Cómo añadir animación de confeti al mensaje de confirmación.