Guía completa: Cómo rellenar dinámicamente campos en formularios de gravedad

Crear formularios simples o complejos en Gravity Forms es fácil y rápido. Una de las funciones que ofrece Gravity Forms es permitirle preseleccionar o completar campos en un formulario de forma condicional. Esto es útil cuando tiene el mismo formulario en varias páginas de contacto para cada departamento y desea preseleccionar el departamento correspondiente en el formulario. O está incrustando un formulario de solicitud en las páginas de productos o servicios y desea completar automáticamente la información sobre el producto o servicio actual en cada envío.

Puede preseleccionar o completar campos dinámicamente de varias maneras, y también puede reemplazar dinámicamente las opciones posibles en un menú desplegable, un botón de radio o un grupo de casillas de verificación. El campo que rellena dinámicamente puede ser un campo visible que el usuario puede editar, o puede enrutarse a un campo oculto para que el lector de los envíos de formularios obtenga información vital.

Las cuatro formas de llenar campos dinámicamente

En esta guía, veremos cuatro formas de completar dinámicamente los campos en un formulario de Gravity Forms. ¡Tres de ellos los puedes hacer sin tocar ningún código! Pero si desea modificar dinámicamente las posibles opciones en una selección, un grupo de botones de radio o casillas de verificación, deberá escribir un código PHP. Veremos cómo hacerlo al final.

Puede completar dinámicamente los campos de la siguiente manera:

• Adición de información adicional en la URL.
• Proporcione información adicional al shortcode incrustado de Gravity Forms.
• Definición de información adicional para el bloque Gravity Forms (si está utilizando WordPress con Gutenberg).
• Uso de filtros con código PHP.

Pero primero tenemos que ver cómo activar la población dinámica de un campo.

Activación de un campo para permitir población dinámica

El primer paso, independientemente del método que utilice para completar el campo, es activarlo en el propio campo.

En la edición de formulario, expanda el campo y dentro de la pestaña "Avanzado", encontrará una casilla de verificación "Permitir que el campo se complete dinámicamente". Márquelo y aparecerá una nueva entrada de texto que le permitirá definir el nombre de su parámetro. Esto puede ser lo que quieras, pero debe ser único y sin espacios.

Guarde el formulario y estará listo para que decida qué método desea usar para completarlo.

Relleno dinámico a partir de parámetros de URL

Puede agregar parámetros GET al enlace a la página que incrusta el formulario, por ejemplo, si el enlace está dentro del texto de otra publicación o es un enlace personalizado en los menús de WordPress.

Simplemente agregue variables de consulta en pares de valores clave, con el nombre del parámetro como clave y su valor como desee que sea su valor. Es posible agregar varios pares de valores clave si desea completar varios campos en el formulario, simplemente separe cada par con "&".

Suponiendo que su formulario existe en esta página: " https://example.com/contact-me/", y su nombre de parámetro es awp_populate_me, puede completar el campo utilizando esta URL: " https://example.com/contact-me/?awp_populate_me=Hello".

Tenga en cuenta que las URL deben estar codificadas correctamente. Por ejemplo, no puede simplemente agregar espacios o caracteres especiales directamente como el valor del parámetro. Proporcionando "¡Hola mundo!" como valor sería » Hello%20world%21«. Hay muchas herramientas en línea para codificar URL para usted si desea seguir este camino.

Llenar dinámicamente desde shortcode

Todos los formularios se insertan a través de un shortcode. Puede completar dinámicamente los campos directamente dentro de este shortcode. Este método podría ser útil si está utilizando el mismo formulario en varias publicaciones (por ejemplo, registrando asistentes para varios eventos o cursos diferentes), y necesita proporcionar algo único para saber de qué evento o curso proviene el formulario…

Normalmente, cuando incrusta un formulario, da como resultado un código abreviado que se parece a esto:[gravityforms id="1" title="Contact us"]

Edite el código abreviado y agregue el conjunto de claves field_valuesa una cadena que contenga el nombre de su parámetro igual al valor deseado. Por ejemplo, establecer un parámetro awp_populate_meen ‘Hello World’ se hace así:

[gravityforms id="1" title="Contact us" field_values="awp_populate_me=Hello World"]

Si necesita completar varios campos, agregue un "&" en el medio, así:

[gravityforms id="1" title="Contact us" field_values="awp_populate_me=Hello World&awp_another_field=Hello to you too"]

Relleno dinámico desde Block en Gutenberg

Si tiene GravityForms versión 2.4.13+ y WordPress con Gutenberg (WordPress 5+), puede agregar Gravity Forms como un bloque. Dentro de este bloque, también tiene un método para completar campos.

Agregue el bloque "Formularios" en Gutenberg y elija su formulario. El bloque debería cambiar a una vista previa de formulario. En el panel lateral derecho, expanda Avanzado y encontrará un área de texto denominada "Valores de campo". En esta área de texto, puede escribir los nombres y valores de sus parámetros, tal como lo haría en el código abreviado. Por ejemplo, " awp_populate_me=Hello World!"

Llenar dinámicamente desde el código

Y finalmente, si prefiere completar sus campos usando código PHP, hay filtros para esto. Puede colocar este código en el archivo functions.php.

La forma de codificar esto depende del tipo de campo que sea; como probablemente pueda adivinar, completar (reemplazar todas las opciones) en una selección, las casillas de verificación o el grupo de radio debe manejarse de manera diferente a solo completar un solo campo de texto.

Rellenar un campo de valor único

Rellenar un campo que tiene un solo valor (esto se aplica al campo de texto, área de texto, campo de correo electrónico, campo de teléfono y similares) se realiza fácilmente filtrando gform_field_value_<parameter name>. En nuestro ejemplo:

add_filter('gform_field_value_awp_populate_me', function($value) {
    return 'Hello world!';
});

También puede utilizar este filtro para preseleccionar una opción en un campo multivalor, por ejemplo, seleccionar (desplegable), botones de opción o casillas de verificación.

Rellenar botones de selección o radio

Si simplemente está interesado en preseleccionar una opción, siga la guía anterior para completar un campo de valor único. Este código está destinado a personalizar o reemplazar las posibles opciones que obtiene en el campo.

Filtros de renderizado de formularios de Gravity Forms

El gform_pre_renderfiltro nos permite modificar el formulario justo antes de que se muestre. Pero al hacer cambios aquí, debemos asegurarnos de que nuestros cambios se apliquen en todos los casos; por lo tanto, también debemos conectarnos con gform_admin_pre_render(filtro pre_render correspondiente pero afecta la edición de administrador/formulario), gform_pre_validation(responsable de validar el formulario antes del envío) y gform_pre_submission_filter(filtro después de la validación pero antes de que se guarde la entrada). No se preocupe, usamos la misma función para todos estos filtros.

Puede filtrarlos directamente, o puede proporcionar un guión bajo y el ID del formulario después del nombre del filtro, para filtrar solo un formulario específico. Por ejemplo gform_pre_render_1, solo se ejecutaría en un formulario con el ID de formulario de 1.

Como argumento para todos estos filtros, obtiene el objeto de formulario, en el que puede obtener la ID del formulario (método alternativo para agregar la ID del formulario en el filtro) y todos sus campos. Los campos de formulario son una matriz de Fieldobjetos, pero de lo único que debemos preocuparnos es de reemplazar la choicespropiedad del campo correcto.

Cambiar las opciones

El tipo de datos con los que desea reemplazar las opciones depende completamente de usted, pero la choicespropiedad de un campo necesita una matriz que tenga los elementos ‘texto’ y ‘valor’. ['text' => 'Hello World!', 'value' => '1', 'text' => 'Second choice', 'value' => '2']por ejemplo

add_filter('gform_pre_render_1', 'awp_populate_choices');
add_filter('gform_pre_validation_1', 'awp_populate_choices');
add_filter('gform_pre_submission_filter_1', 'awp_populate_choices');
add_filter('gform_admin_pre_render_1', 'awp_populate_choices');
function awp_populate_choices($form) {
    foreach ($form['fields'] as &$field) {
        if ($field->inputName == 'awp_populate_me') {
 
            // Generate your data here. Below is just an example
            $pages = get_posts('numberposts=-1&post_status=publish&post_type=page');
 
            // Generate a nice array that Gravity Forms can understand
            $choices = [];
            foreach ($pages as $page) {
                $choices[] = ['text' => $page->post_title, 'value' => $page->ID];
            }
 
            // Set choices to field
            $field->choices = $choices;
        }
    }
    return $form;
}

El código anterior filtra solo el ID de formulario de 1. Comienza recorriendo los campos del formulario. Es importante tener en cuenta el "&" antes del elemento en el bucle, que lo pasa por referencia. Esto significa que si hacemos cambios en $field, se aplica y se guarda directamente en el archivo $form['fields'].

El segundo paso es apuntar al campo que tiene el nombre del parámetro al que queremos apuntar. Para cada campo esta es la inputNamepropiedad. Puede usar otras formas de segmentar campos, por ejemplo, su ID (id) o clase CSS (cssClass). Cuando hayamos encontrado nuestro campo, debemos generar la matriz de reemplazo para las opciones y establecer $field->choicesesto. En el ejemplo anterior, consulto todas las páginas y las recorro para generar una matriz con el formato correcto.

No olvide devolver el $formal final, ya que este es un filtro.

Vale la pena mencionar que este filtro también se aplica al formulario de edición (porque filtramos gform_admin_pre_render). Pero recuerde que ya no puede manipular las opciones en la edición de formularios; simplemente no guardará sus cambios porque este código siempre los anulará.

Llenar casillas de verificación

Lo mencionaré de nuevo; si simplemente está interesado en preseleccionar una casilla de verificación, siga la guía anterior para completar un campo de valor único. En cuanto a reemplazar todas las opciones en las casillas de verificación, el proceso es muy similar a completar los botones de selección o de opción anteriores, pero con algunas diferencias menores. Recomiendo revisar primero la explicación anterior para los botones de selección y radio.

Usas los mismos filtros y el proceso de inicio es el mismo; recorre los campos del formulario y encuentra el que desea. Sin embargo, con las casillas de verificación, debe reemplazar dos propiedades en el objeto de campo; choicesy inputs. La choicespropiedad espera la misma matriz que en los botones de selección o radio.

La inputpropiedad espera una matriz con elementos ‘ label‘ y ‘ id‘. Se labelexplica por sí mismo y debe ser idéntico a la textmatriz de opciones. El idelemento debe seguir las reglas de ID de Gravity Forms; concatenando el Id. de campo, un punto y el Id. de elección, comenzando por 1 (por ejemplo, si el Id. de campo es 2 y el Id. de elección es 3, lo correcto ides " 2.3").

add_filter('gform_pre_render_1', 'awp_populate_choices');
add_filter('gform_pre_validation_1', 'awp_populate_choices');
add_filter('gform_pre_submission_filter_1', 'awp_populate_choices');
add_filter('gform_admin_pre_render_1', 'awp_populate_choices');
function awp_populate_choices($form) {
    foreach ($form['fields'] as &$field) {
        if ($field->inputName == 'awp_populate_me') {
 
            // Generate your data here. Below is just an example
            $pages = get_posts('numberposts=-1&post_status=publish&post_type=page');
 
            // Generate nice arrays that Gravity Forms can understand
            $choices = [];
            $inputs = [];
            $input_id = 1;
            foreach ($pages as $page) {
                $choices[] = ['text' => $page->post_title, 'value' => $page->ID];
                $inputs[] = ['label' => $page->post_title, 'id' => $field->id. '.'. $input_id];
                $input_id++;
            }
 
            // Set choices to field
            $field->choices = $choices;
            $field->inputs = $inputs;
        }
    }
    return $form;
}

Dado que los ID de elección deben comenzar en 1, comenzamos una variable de contador antes del ciclo y agregamos 1 para cada elemento en el ciclo, y lo usamos junto con el ID de campo y un punto como iden una inputsmatriz.

Cuando tenemos nuestras dos matrices, las configuramos en las propiedades del campo choicesy inputs, y devolvemos la forma modificada.