{"id":233412,"date":"2023-02-13T11:28:00","date_gmt":"2023-02-13T08:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233412"},"modified":"2022-11-10T23:33:11","modified_gmt":"2022-11-10T20:33:11","slug":"guia-completa-como-rellenar-dinamicamente-campos-en-formularios-de-gravedad","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/guia-completa-como-rellenar-dinamicamente-campos-en-formularios-de-gravedad\/","title":{"rendered":"Gu\u00eda completa: C\u00f3mo rellenar din\u00e1micamente campos en formularios de gravedad"},"content":{"rendered":"\n<p>Crear formularios simples o complejos en <a href=\"https:\/\/www.gravityforms.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gravity Forms<\/a> es f\u00e1cil y r\u00e1pido. Una de las funciones que ofrece Gravity Forms es permitirle preseleccionar o completar campos en un formulario de forma condicional. Esto es \u00fatil cuando tiene el mismo formulario en varias p\u00e1ginas de contacto para cada departamento y desea preseleccionar el departamento correspondiente en el formulario. O est\u00e1 incrustando un formulario de solicitud en las p\u00e1ginas de productos o servicios y desea completar autom\u00e1ticamente la informaci\u00f3n sobre el producto o servicio actual en cada env\u00edo.<\/p>\n<p>Puede preseleccionar o completar campos din\u00e1micamente de varias maneras, y tambi\u00e9n puede reemplazar din\u00e1micamente las opciones posibles en un men\u00fa desplegable, un bot\u00f3n de radio o un grupo de casillas de verificaci\u00f3n. El campo que rellena din\u00e1micamente puede ser un campo visible que el usuario puede editar, o puede enrutarse a un campo oculto para que el lector de los env\u00edos de formularios obtenga informaci\u00f3n vital.<\/p>\n<h2>Las cuatro formas de llenar campos din\u00e1micamente<\/h2>\n<p>En esta gu\u00eda, veremos cuatro formas de completar din\u00e1micamente los campos en un formulario de Gravity Forms. \u00a1Tres de ellos los puedes hacer sin tocar ning\u00fan c\u00f3digo! Pero si desea modificar din\u00e1micamente las posibles opciones en una selecci\u00f3n, un grupo de botones de radio o casillas de verificaci\u00f3n, deber\u00e1 escribir un c\u00f3digo PHP. Veremos c\u00f3mo hacerlo al final.<\/p>\n<p>Puede completar din\u00e1micamente los campos de la siguiente manera:<\/p>\n<ul>\n<li>Adici\u00f3n de informaci\u00f3n adicional en la URL.<\/li>\n<li>Proporcione informaci\u00f3n adicional al shortcode incrustado de Gravity Forms.<\/li>\n<li>Definici\u00f3n de informaci\u00f3n adicional para el bloque Gravity Forms (si est\u00e1 utilizando WordPress con Gutenberg).<\/li>\n<li>Uso de filtros con c\u00f3digo PHP.<\/li>\n<\/ul>\n<p>Pero primero tenemos que ver c\u00f3mo activar la poblaci\u00f3n din\u00e1mica de un campo.<\/p>\n<h2>Activaci\u00f3n de un campo para permitir poblaci\u00f3n din\u00e1mica<\/h2>\n<p>El primer paso, independientemente del m\u00e9todo que utilice para completar el campo, es activarlo en el propio campo.<\/p>\n<p>En la edici\u00f3n de formulario, expanda el campo y dentro de la pesta\u00f1a &quot;Avanzado&quot;, encontrar\u00e1 una casilla de verificaci\u00f3n &quot;Permitir que el campo se complete din\u00e1micamente&quot;. M\u00e1rquelo y aparecer\u00e1 una nueva entrada de texto que le permitir\u00e1 definir el nombre de su par\u00e1metro. Esto puede ser lo que quieras, pero debe ser \u00fanico y sin espacios.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153486-61e50e767c316.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153486-61e50e767c316.png\" alt=\"Gu\u00eda completa: C\u00f3mo rellenar din\u00e1micamente campos en formularios de gravedad\" ><\/a><\/p>\n<p>Guarde el formulario y estar\u00e1 listo para que decida qu\u00e9 m\u00e9todo desea usar para completarlo.<\/p>\n<h2>Relleno din\u00e1mico a partir de par\u00e1metros de URL<\/h2>\n<p>Puede agregar par\u00e1metros GET al enlace a la p\u00e1gina que incrusta el formulario, por ejemplo, si el enlace est\u00e1 dentro del texto de otra publicaci\u00f3n o es un enlace personalizado en los men\u00fas de WordPress.<\/p>\n<p>Simplemente agregue variables de consulta en pares de valores clave, con el nombre del par\u00e1metro 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 &quot;&#038;&quot;.<\/p>\n<p>Suponiendo que su formulario existe en esta p\u00e1gina: &quot; <code>https:\/\/example.com\/contact-me\/<\/code>&quot;, y su nombre de par\u00e1metro es <code>awp_populate_me<\/code>, puede completar el campo utilizando esta URL: &quot; <code>https:\/\/example.com\/contact-me\/?awp_populate_me=Hello<\/code>&quot;.<\/p>\n<p>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\u00e1metro. Proporcionando &quot;\u00a1Hola mundo!&quot; como valor ser\u00eda \u00bb <code>Hello%20world%21<\/code>\u00ab. Hay muchas herramientas en l\u00ednea para codificar URL para usted si desea seguir este camino.<\/p>\n<h2>Llenar din\u00e1micamente desde shortcode<\/h2>\n<p>Todos los formularios se insertan a trav\u00e9s de un shortcode. Puede completar din\u00e1micamente los campos directamente dentro de este shortcode. Este m\u00e9todo podr\u00eda ser \u00fatil si est\u00e1 utilizando el mismo formulario en varias publicaciones (por ejemplo, registrando asistentes para varios eventos o cursos diferentes), y necesita proporcionar algo \u00fanico para saber de qu\u00e9 evento o curso proviene el formulario&#8230;<\/p>\n<p>Normalmente, cuando incrusta un formulario, da como resultado un c\u00f3digo abreviado que se parece a esto:<code>[gravityforms id=\"1\" title=\"Contact us\"]<\/code><\/p>\n<p>Edite el c\u00f3digo abreviado y agregue el conjunto de claves <code>field_values<\/code>a una cadena que contenga el nombre de su par\u00e1metro igual al valor deseado. Por ejemplo, establecer un par\u00e1metro <code>awp_populate_me<\/code>en &#8216;Hello World&#8217; se hace as\u00ed:<\/p>\n<pre><code>[gravityforms id=\"1\" title=\"Contact us\" field_values=\"awp_populate_me=Hello World\"]<\/code><\/pre>\n<p>Si necesita completar varios campos, agregue un &quot;&#038;&quot; en el medio, as\u00ed:<\/p>\n<pre><code>[gravityforms id=\"1\" title=\"Contact us\" field_values=\"awp_populate_me=Hello World&amp;awp_another_field=Hello to you too\"]<\/code><\/pre>\n<h2>Relleno din\u00e1mico desde Block en Gutenberg<\/h2>\n<p>Si tiene GravityForms versi\u00f3n 2.4.13+ y WordPress con Gutenberg (WordPress 5+), puede agregar Gravity Forms como un bloque. Dentro de este bloque, tambi\u00e9n tiene un m\u00e9todo para completar campos.<\/p>\n<p>Agregue el bloque &quot;Formularios&quot; en Gutenberg y elija su formulario. El bloque deber\u00eda cambiar a una vista previa de formulario. En el panel lateral derecho, expanda Avanzado y encontrar\u00e1 un \u00e1rea de texto denominada &quot;Valores de campo&quot;. En esta \u00e1rea de texto, puede escribir los nombres y valores de sus par\u00e1metros, tal como lo har\u00eda en el c\u00f3digo abreviado. Por ejemplo, &quot; <code>awp_populate_me=Hello World!<\/code>&quot;<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153486-61e50e777b45f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153486-61e50e777b45f.png\" alt=\"Gu\u00eda completa: C\u00f3mo rellenar din\u00e1micamente campos en formularios de gravedad\" ><\/a><\/p>\n<h2>Llenar din\u00e1micamente desde el c\u00f3digo<\/h2>\n<p>Y finalmente, si prefiere completar sus campos usando c\u00f3digo PHP, hay filtros para esto. Puede colocar este c\u00f3digo en el archivo <code>functions.php<\/code>.<\/p>\n<p>La forma de codificar esto depende del tipo de campo que sea; como probablemente pueda adivinar, completar (reemplazar todas las opciones) en una selecci\u00f3n, las casillas de verificaci\u00f3n o el grupo de radio debe manejarse de manera diferente a solo completar un solo campo de texto.<\/p>\n<h3>Rellenar un campo de valor \u00fanico<\/h3>\n<p>Rellenar un campo que tiene un solo valor (esto se aplica al campo de texto, \u00e1rea de texto, campo de correo electr\u00f3nico, campo de tel\u00e9fono y similares) se realiza f\u00e1cilmente filtrando <code>gform_field_value_&lt;parameter name&gt;<\/code>. En nuestro ejemplo:<\/p>\n<pre><code>add_filter('gform_field_value_awp_populate_me', function($value) {\n    return 'Hello world!';\n});<\/code><\/pre>\n<p>Tambi\u00e9n puede utilizar este filtro para preseleccionar una opci\u00f3n en un campo multivalor, por ejemplo, seleccionar (desplegable), botones de opci\u00f3n o casillas de verificaci\u00f3n.<\/p>\n<h3>Rellenar botones de selecci\u00f3n o radio<\/h3>\n<p>Si simplemente est\u00e1 interesado en preseleccionar una opci\u00f3n, siga la gu\u00eda anterior para completar un campo de valor \u00fanico. Este c\u00f3digo est\u00e1 destinado a personalizar o reemplazar las posibles opciones que obtiene en el campo.<\/p>\n<h4>Filtros de renderizado de formularios de Gravity Forms<\/h4>\n<p>El <code>gform_pre_render<\/code>filtro nos permite modificar el formulario justo antes de que se muestre. Pero al hacer cambios aqu\u00ed, debemos asegurarnos de que nuestros cambios se apliquen en todos los casos; por lo tanto, tambi\u00e9n debemos conectarnos con <code>gform_admin_pre_render<\/code>(filtro pre_render correspondiente pero afecta la edici\u00f3n de administrador\/formulario), <code>gform_pre_validation<\/code>(responsable de validar el formulario antes del env\u00edo) y <code>gform_pre_submission_filter<\/code>(filtro despu\u00e9s de la validaci\u00f3n pero antes de que se guarde la entrada). No se preocupe, usamos la misma funci\u00f3n para todos estos filtros.<\/p>\n<p>Puede filtrarlos directamente, o puede proporcionar un gui\u00f3n bajo y el ID del formulario despu\u00e9s del nombre del filtro, para filtrar solo un formulario espec\u00edfico. Por ejemplo <code>gform_pre_render_1<\/code>, solo se ejecutar\u00eda en un formulario con el ID de formulario de 1.<\/p>\n<p>Como argumento para todos estos filtros, obtiene el objeto de formulario, en el que puede obtener la ID del formulario (m\u00e9todo alternativo para agregar la ID del formulario en el filtro) y todos sus campos. Los campos de formulario son una matriz de <code>Field<\/code>objetos, pero de lo \u00fanico que debemos preocuparnos es de reemplazar la <code>choices<\/code>propiedad del campo correcto.<\/p>\n<h4>Cambiar las opciones<\/h4>\n<p>El tipo de datos con los que desea reemplazar las opciones depende completamente de usted, pero la <code>choices<\/code>propiedad de un campo necesita una matriz que tenga los elementos &#8216;texto&#8217; y &#8216;valor&#8217;. <code>['text' =&gt; 'Hello World!', 'value' =&gt; '1', 'text' =&gt; 'Second choice', 'value' =&gt; '2']<\/code>por ejemplo<\/p>\n<pre><code>add_filter('gform_pre_render_1', 'awp_populate_choices');\nadd_filter('gform_pre_validation_1', 'awp_populate_choices');\nadd_filter('gform_pre_submission_filter_1', 'awp_populate_choices');\nadd_filter('gform_admin_pre_render_1', 'awp_populate_choices');\nfunction awp_populate_choices($form) {\n    foreach ($form['fields'] as &amp;$field) {\n        if ($field-&gt;inputName == 'awp_populate_me') {\n\u00a0\n            \/\/ Generate your data here. Below is just an example\n            $pages = get_posts('numberposts=-1&amp;post_status=publish&amp;post_type=page');\n\u00a0\n            \/\/ Generate a nice array that Gravity Forms can understand\n            $choices = [];\n            foreach ($pages as $page) {\n                $choices[] = ['text' =&gt; $page-&gt;post_title, 'value' =&gt; $page-&gt;ID];\n            }\n\u00a0\n            \/\/ Set choices to field\n            $field-&gt;choices = $choices;\n        }\n    }\n    return $form;\n}<\/code><\/pre>\n<p>El c\u00f3digo anterior filtra solo el ID de formulario de 1. Comienza recorriendo los campos del formulario. Es importante tener en cuenta el &quot;&#038;&quot; antes del elemento en el bucle, que lo pasa por referencia. Esto significa que si hacemos cambios en <code>$field<\/code>, se aplica y se guarda directamente en el archivo <code>$form['fields']<\/code>.<\/p>\n<p>El segundo paso es apuntar al campo que tiene el nombre del par\u00e1metro al que queremos apuntar. Para cada campo esta es la <code>inputName<\/code>propiedad. Puede usar otras formas de segmentar campos, por ejemplo, su ID (<code>id<\/code>) o clase CSS (<code>cssClass<\/code>). Cuando hayamos encontrado nuestro campo, debemos generar la matriz de reemplazo para las opciones y establecer <code>$field-&gt;choices<\/code>esto. En el ejemplo anterior, consulto todas las p\u00e1ginas y las recorro para generar una matriz con el formato correcto.<\/p>\n<p>No olvide devolver el <code>$form<\/code>al final, ya que este es un filtro.<\/p>\n<p>Vale la pena mencionar que este filtro tambi\u00e9n se aplica al formulario de edici\u00f3n (porque filtramos <code>gform_admin_pre_render<\/code>). Pero recuerde que ya no puede manipular las opciones en la edici\u00f3n de formularios; simplemente no guardar\u00e1 sus cambios porque este c\u00f3digo siempre los anular\u00e1.<\/p>\n<h3>Llenar casillas de verificaci\u00f3n<\/h3>\n<p>Lo mencionar\u00e9 de nuevo; si simplemente est\u00e1 interesado en preseleccionar una casilla de verificaci\u00f3n, siga la gu\u00eda anterior para completar un campo de valor \u00fanico. En cuanto a reemplazar todas las opciones en las casillas de verificaci\u00f3n, el proceso es muy similar a completar los botones de selecci\u00f3n o de opci\u00f3n anteriores, pero con algunas diferencias menores. Recomiendo revisar primero la explicaci\u00f3n anterior para los botones de selecci\u00f3n y radio.<\/p>\n<p>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\u00f3n, debe reemplazar dos propiedades en el objeto de campo; <code>choices<\/code>y <code>inputs<\/code>. La <code>choices<\/code>propiedad espera la misma matriz que en los botones de selecci\u00f3n o radio.<\/p>\n<p>La <code>input<\/code>propiedad espera una matriz con elementos &#8216; <code>label<\/code>&#8216; y &#8216; <code>id<\/code>&#8216;. Se <code>label<\/code>explica por s\u00ed mismo y debe ser id\u00e9ntico a la <code>text<\/code>matriz de opciones. El <code>id<\/code>elemento debe seguir las reglas de ID de Gravity Forms; concatenando el Id. de campo, un punto y el Id. de elecci\u00f3n, comenzando por 1 (por ejemplo, si el Id. de campo es 2 y el Id. de elecci\u00f3n es 3, lo correcto <code>id<\/code>es &quot; <code>2.3<\/code>&quot;).<\/p>\n<pre><code>add_filter('gform_pre_render_1', 'awp_populate_choices');\nadd_filter('gform_pre_validation_1', 'awp_populate_choices');\nadd_filter('gform_pre_submission_filter_1', 'awp_populate_choices');\nadd_filter('gform_admin_pre_render_1', 'awp_populate_choices');\nfunction awp_populate_choices($form) {\n    foreach ($form['fields'] as &amp;$field) {\n        if ($field-&gt;inputName == 'awp_populate_me') {\n\u00a0\n            \/\/ Generate your data here. Below is just an example\n            $pages = get_posts('numberposts=-1&amp;post_status=publish&amp;post_type=page');\n\u00a0\n            \/\/ Generate nice arrays that Gravity Forms can understand\n            $choices = [];\n            $inputs = [];\n            $input_id = 1;\n            foreach ($pages as $page) {\n                $choices[] = ['text' =&gt; $page-&gt;post_title, 'value' =&gt; $page-&gt;ID];\n                $inputs[] = ['label' =&gt; $page-&gt;post_title, 'id' =&gt; $field-&gt;id. '.'. $input_id];\n                $input_id++;\n            }\n\u00a0\n            \/\/ Set choices to field\n            $field-&gt;choices = $choices;\n            $field-&gt;inputs = $inputs;\n        }\n    }\n    return $form;\n}<\/code><\/pre>\n<p>Dado que los ID de elecci\u00f3n 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 <code>id<\/code>en una <code>inputs<\/code>matriz.<\/p>\n<p>Cuando tenemos nuestras dos matrices, las configuramos en las propiedades del campo <code>choices<\/code>y <code>inputs<\/code>, y devolvemos la forma modificada.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una gu\u00eda completa sobre c\u00f3mo preseleccionar o precompletar campos en un formulario de Gravity Forms, y reemplazar las opciones en un men\u00fa desplegable, bot\u00f3n de radio o casillas de verificaci\u00f3n.<\/p>\n","protected":false},"author":1,"featured_media":153487,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,892,810,716,716,831,1110,800,800,810,831,840,840,861,861],"tags":[1172],"class_list":{"0":"post-233412","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-codigo","9":"category-complementos","10":"category-desarrollador","12":"category-guia-para-principiantes","13":"category-n-a","14":"category-php-2","18":"category-tutoriales","20":"category-wordpress-2","22":"tag-affiai-es"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233412"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233412\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/153487"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}