✅ Noticias, temas, complementos de WEB y WordPress. Aquí compartimos consejos y las mejores soluciones para sitios web.

Formularios de gravedad: agregue entradas personalizadas a los campos y publicación remota después del envío

27

En este tutorial de Gravity Forms aprenderemos tres cosas:

  • Cómo agregar una entrada personalizada a cualquier tipo de campo de su elección
  • Cómo agregar configuraciones personalizadas a su formulario
  • Y finalmente, cómo publicar de forma remota los valores enviados para campos específicos después de cada envío de formulario.

Esta publicación asume que desea agregar funcionalidad a Gravity Forms para enviar una solicitud de publicación remota después de cada envío de formulario. Dentro de la publicación remota, enviará valores desde el formulario, que se pueden personalizar mediante configuraciones adicionales en el editor de formularios. Los ejemplos comunes de dónde sería útil esto son enviar, por ejemplo, el nombre y el correo electrónico a una lista de boletines de Mailchimp, o realmente cualquier otra integración de terceros.

La forma de resolver esto en la práctica es primero agregar configuraciones personalizadas a cada campo, donde el editor puede escribir nombres clave. La clave y sus valores enviados se enviarán a una URL de terceros después de cada envío de formulario. También agregaremos una configuración para que pueda elegir para cada formulario activar este tipo de envío de terceros.

Todo el código a continuación se puede colocar en el código de su tema functions.phpo complemento.

Agregar una entrada personalizada a los campos

El primer paso es agregar la entrada a los campos en el editor de campos donde puede escribir el nombre clave para este valor. Solo incluiremos y enviaremos valores donde se haya completado esta entrada.

Elegir dónde colocar su entrada

Gravity Forms ofrece ganchos que podemos usar para agregar cosas personalizadas en el editor de campo. El nombre del enlace depende de la pestaña en la que desea que aparezca su campo.

  • "Pestaña General:gform_field_standard_settings
  • Pestaña "Apariencia":gform_field_appearance_settings
  • "Lengüeta avanzada:gform_field_advanced_settings

En cada gancho tendrás dos parámetros; posición y formulario de identificación. Cada ajuste integrado de Gravity Forms tiene un número de posición fijo. Puede comparar este número para decidir con precisión dónde desea que esté su entrada o HTML personalizado. Enumerar todas las configuraciones y su posición sería demasiado largo en esta publicación. Pero Gravity Forms agrega sus configuraciones en incrementos de 5. Por ejemplo, en la pestaña General, la "Etiqueta de campo" está en la posición 0 y la "Descripción" está en la posición 10. Poner su HTML en la posición 10 hará que aparezca después de Descripción. No compares la posición con ningún número que no sea un multiplicador de 5.

Estoy agregando mi campo personalizado en la pestaña Avanzado, en la posición 50, que está justo después de la entrada "Etiqueta de campo de administrador".

La mayor parte del código anterior se explica por sí mismo. Estoy agregando HTML en el mismo formato en el que Gravity Forms esperaría que haya una configuración. Sin embargo, en la entrada en sí, debe proporcionar una onchangefunción Javascript. Simplemente le decimos que ejecute la función de GravityForms para guardar los cambios realizados en nuestra entrada. Es importante recordar la propiedad que proporcionamos en SetFieldProperty, thirdPartyInput, dentro de esta clave es donde nuestra entrada personalizada se guardará en la matriz de campos de Gravity Forms al enviar.

Adición de información sobre herramientas (opcional)

Puede hacer otra cosa opcional con su entrada; agregar información sobre herramientas. Si desea esto, agregue esta llamada de función dentro del código que acaba de agregar y proporcione una clave (única) como cadena:

Y luego agregue otra función que se conecte al filtro gform_tooltipsy agregue el contenido de la información sobre herramientas a la tecla correspondiente, así:

Agregar una información sobre herramientas es completamente opcional, pero es una buena manera de explicar a los propietarios del sitio lo que hace esta entrada. Modifique el contenido a lo que se ajuste a su funcionalidad.

Definición de qué tipos de campo agregar su entrada personalizada

Es posible que observe que su campo no aparece en ninguna pestaña Avanzado. Esto se debe a que necesitamos decirle a Gravity Forms en qué tipos de campo queremos que aparezca esta entrada. Por defecto, no aparecerá en ninguno.

La forma en que hacemos esto es en realidad con Javascript. GravityForms tiene Javascript que oculta automáticamente todas las configuraciones y luego elige mostrar las específicas según el tipo de campo. Así que nuestro campo está ahí, pero Gravity Forms simplemente lo ha escondido.

Nos enganchamos gform_editor_jsy necesitamos hacer dos cosas. Primero, decidimos en qué tipos de campo debe aparecer la entrada. Y segundo, nos aseguramos de que la entrada se complete con su valor al cargar.

Estoy agregando la entrada a los tipos de campo text, textarea, email, phoney number. Recuerde considerar cómo va a manejar los valores de los campos enviados. Si elige permitir este campo, por ejemplo, en el tipo de campo de casilla de verificación, entonces debe poder analizar y manejar los valores enviados correctamente.

Formularios de gravedad: agregue entradas personalizadas a los campos y publicación remota después del envío

Ahora, finalmente, debería poder ver su entrada personalizada en la pestaña Avanzado, si el campo es de cualquiera de los tipos provistos. También verá que se guardó correctamente y se carga con su valor guardado. Cada vez que se envíe el formulario a partir de ahora, si se completa esta entrada, la matriz del campo del formulario contendrá la propiedad thirdPartyInput.

El siguiente paso es agregar una configuración en el formulario para activar el envío a terceros. Esto es opcional pero recomendado. Queremos evitar ejecutar código innecesario o enviar algo a un tercero cuando no es nuestra intención.

Agregar una configuración personalizada a la configuración del formulario

Agregar configuraciones personalizadas a la configuración del formulario es bastante simple. Necesitamos conectarnos al filtro gform_form_settingsy agregar nuestro HTML con las entradas que desee, y luego al filtro gform_pre_form_settings_savey asegurarnos de que nuestras entradas personalizadas se guarden en el objeto de formulario.

Así es como agregaría una configuración personalizada a la configuración del formulario:

El filtro gform_form_settings espera que las claves sean una etiqueta de sección y luego una matriz para cada configuración. Añadimos solo uno con la tecla submit_3rd_party. En la entrada de la casilla de verificación, usamos el método de Gravity Forms rgar()para extraer los valores de la clave dada de una matriz (el formulario), para asegurarnos de obtener el valor guardado de nuestro campo. Modifique el HTML para que se ajuste a sus necesidades.

El campo ahora aparecerá en la parte inferior de la configuración del formulario. Pero aún no guardará los cambios, por lo que debemos corregirlo:

add_filter('gform_pre_form_settings_save', function($form) { $form['submit_3rd_party'] = rgpost('submit_3rd_party'); return $form; }, 10, 2);

Formularios de gravedad: agregue entradas personalizadas a los campos y publicación remota después del envío

Este fragmento de código utiliza otro de los métodos auxiliares de Gravity Forms, rgpost(), para extraer los valores enviados (de $_POST) y los guarda en la matriz de formulario proporcionada con nuestra clave deseada. Si agrega más configuraciones, deberá repetir esto para cada configuración.

¡Y eso es todo lo que necesitamos para agregar configuraciones de formulario personalizadas! Siempre que tenga acceso al objeto de formulario, puede verificar el valor de $form['submit_3rd_party'].

Enviar valores enviados a terceros

Un buen gancho para usar en acciones personalizadas, como realizar una solicitud y enviar datos desde un formulario enviado, es gform_after_submission. En este punto, toda la validación ha pasado y se ha creado el objeto de entrada (respuesta). Con este gancho obtenemos acceso al objeto de entrada y al objeto de formulario.

Lo que haga en esta acción depende de usted y de cómo necesita extraer los datos y cómo realiza la solicitud posterior. En cuanto a este ejemplo, estoy haciendo una solicitud de publicación simple usando la función de WordPress wp_remote_post()con una matriz de todos los campos que completaron nuestra entrada personalizada en el cuerpo.

Verá que primero verifico si el formulario tiene envíos activados. Si tiene, el código recorre todos los campos del formulario y verifica si cada campo ha agregado algo en nuestra entrada personalizada. Si la entrada no está vacía, el código también verifica si se envió algo para este campo. Puede eliminar esta verificación si está de acuerdo con enviar valores vacíos.

La parte sobre la URL y cómo se enviarán los datos es algo que obviamente deberá ajustar usted mismo. Opcionalmente, también puede hacer algo con la respuesta, por ejemplo, enviar un correo electrónico si falla o algo así. Todo depende de usted cómo quiere manejar su funcionalidad.

Fuente de grabación: awhitepixel.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More