Cómo Agregar Texto de Marcador de Posición en Formas de Gravedad

Si aún no lo sabes, Gravity Forms es el plugin de formulario de contacto de WordPress más amigable para principiantes que existe. Lo usamos en nuestro sitio de Galería de WordPress, en el sitio de Cupones de WordPress, y en casi todos los clientes nuevos también. Recientemente, mientras trabajábamos en el sitio de un cliente, tuvimos que ajustar el estilo de la forma para que coincidiera con el diseño que nos obligaba a poner un marcador de posición de texto en Gravity Forms. Desafortunada y sorprendentemente, esta característica no está incorporada en Formas de Gravedad (Todavía). Aunque tienen la opción de añadir texto de marcador de posición en los campos desplegables y en el campo de entrada: categoría, no hay opción de añadir marcador de posición en los campos de entrada y en los campos de área de texto. Esto se convirtió en un gran problema para nosotros. Buscamos en el área de soporte de formularios de Gravedad donde la única solución disponible era un hack que ni siquiera funcionaba correctamente. Aunque nos permitió poner texto en los marcadores de posición, tenía problemas importantes. Si el usuario pulsa enviar sin rellenar el campo, el formulario validará los errores en lugar de devolverlos. Después de una buena búsqueda, terminamos encontrando la solución. En este artículo, le mostraremos cómo agregar texto de marcador de posición en formas de gravedad usando los filtros jQuery y Gravity Form.

Así que probablemente se esté preguntando por qué demonios necesitamos texto de marcador de posición cuando las etiquetas están ahí? Bueno, en el diseño en el que estábamos trabajando, no podíamos usar etiquetas con fines de estilismo.

Todo lo que teníamos que hacer era añadir una función usando los filtros de Gravity Forms y usar jQuery para producir el texto.

Código final

El código final está abajo. Puede simplemente copiar y pegar esto en su archivo functions.php y tenerlo funcionando. Pero si quieres leer más sobre la función y cómo funciona, entonces sigue leyendo el artículo. También continúe leyendo para ver cómo agregar texto de marcador de posición en los campos desplegables.

1234567891011121314141516171718192021222324252627282930313233343536373839404142434445445464748495051525454555656575859606162636465666768697070717273747576

  • >(?)/label>size=»35″ onkeyup=»SetFieldProperty(‘placeholder’, this.value);»> </ i> </ i&gt.php}}/* Ahora ejecutamos algunos tecnicismos javascript para que el campo se cargue correctamente */add_action(«gform_editor_js», «my_gform_editor_js»);function my_gform_editor_js(){?para inicializar la casilla de verificaciónjQuery(document).bind(«gform_load_field_settings», function(event, field, form){jQuery(«#field_placeholder»).val(field[«placeholder»]);});jQuery(function(){_;).attr(‘placeholder’,’);<php}}?>});<php}?>?php}?>Así que lo primero que tuvimos que hacer fue añadir un valor de marcador de posición en los campos Gravity Forms en el panel de administración. Para ello, debe abrir el archivo functions.php de su tema y pegar el siguiente código:

    123456789101112131414151617181920212223242526272829303132333435363738394041<?php/* Añade un campo personalizado al editor de campos (Ver captura de pantalla del editor) */add_action(«gform_field_standard_settings», «my_standard_settings», 10, 2);function my_standard_settings($position, $form_id){// Crear ajustes en la posición 25 (justo después de la etiqueta de campo) si($position ==25){?etiqueta for=»field_placeholder»>Placeholder Text<!– Tooltip para ayudar a los usuarios a entender lo que hace este campo — </ i> </ i&gt.php}}/* Ahora ejecutamos algunos tecnicismos javascript para que el campo se cargue correctamente */add_action(«gform_editor_js», «my_gform_editor_js»);function my_gform_editor_js(){?para inicializar la casilla de verificaciónjQuery(document).bind(«gform_load_field_settings», function(event, field, form){jQuery(«#field_placeholder»).val(field[«placeholder»]);});/script><?php}}.

    Esta pequeña función agregará un campo de texto de marcador de posición en el backend de Gravity Forms. A continuación se muestra un ejemplo de captura de pantalla:

    Ahora que hemos añadido el campo en el panel de administración, puedes seguir adelante y rellenarlo con el texto que quieras. El siguiente paso es mostrar el texto en el formulario real. Para ello, utilizaremos jQuery. Lo que tienes que hacer es pegar el siguiente código en el archivo functions.php de tu tema justo después del código anterior:

    1234567891010111213141415161718192021222324252627<div

     

Valora el post

Deja un comentario