El placeholder, los campos de selección y Contact Form 7

¿Qué es un placeholder?

Para los que aún no lo tengan claro el atributo placeholder o marcador de posición se incluyó en HTML5 para añadir información adicional a la que ya proporciona la propia etiqueta (label) de los campos de texto (input) y áreas de texto (textarea) de los formularios, por ejemplo el código HTML:

Genera este resultado:

En este simple ejemplo se puede apreciar claramente la diferencia entre una etiqueta y un marcador de posición.

Digamos que el placeholder es ese texto que aparece de forma predeterminada antes de comenzar a escribir en el campo y que desaparece automáticamente en el momento que introduces cualquier carácter en él.

¿Y qué pasa con los campos de selección?

Resulta que los campos select o de selección no poseen el atributo placeholder en las especificaciones de HTML5 pero se puede emular utilizando la primera opción del campo. Para lograrlo se utiliza un código HTML como este:

Lo que genera este resultado:

Como puedes ver aunque no es un placeholder puro y duro va a realizar la misma función.

Vamos a darle un poco de estilo al placeholder

Para hacerlo se puede utilizar código CSS3 empleando el pseudo elemento ::placeholder para los campos de texto y áreas de texto, mientras que para los campos select o de selección, dado que no existe el atributo, no podemos utilizar el pseudo elemento nativo de CSS3 por lo que la solución más común pasa por combinar un poco de JavaScript junto con CSS para personalizar el estilo del falso placeholder de un campo de selección, aunque existen soluciones que utilizan HTML y CSS puro  para lograr el mismo efecto.

Como hemos dicho en el caso de los campos de texto y áreas de texto resulta extraordinariamente sencillo utilizando un poco de CSS3, tal y como podemos ver en este ejemplo:

Lo que genera este resultado:

En el caso de los campos de selección la solución más común para por utilizar una combinación de código JavaScript, en este caso concreto sobre la biblioteca jQuery, con CSS, como por ejemplo:

Como también hemos indicado existen soluciones con HTML y CSS puro para personalizar el estilo del falso placeholder de un campo de selección, como esta que publica Markus Oberlehner, por poner sólo uno de los muchos ejemplos que vais a encontrar si hacéis alguna búsqueda en Internet. El problema es que ninguna de estas soluciones estándar nos van a ser útiles con el plugin para WordPress Contact Form 7 ya que no es posible personalizar al 100% el código HTML generado por el plugin.

Os recordamos que para conseguir un campo de selección con un pseudo-marcador de posición en Contact Form 7 se debe utilizar un shortcode de este estilo: [select* prueba first_as_label "Esto es un pseudo-marcador de posición" "Y esto es una opción de selección"]

¿Y qué pasa con los campos de selección en Contact Form 7?

Por lo que hemos explicado hasta ahora tenemos que descartar una solución 100% estándar con código HTML y CSS puro con los falsos placeholder de los campos de selección en Contact Form 7 y tenemos que utilizar código JavaScript junto con código CSS para conseguir controlar al 100% el efecto deseado.

El pequeño script que os proponemos es muy parecido al anterior pero está convenientemente personalizado para controlar el evento wpcf7mailsent que genera el plugin para WordPress Contact Form 7 al enviar un formulario para devolver al pseudo-marcador de posición su apariencia inicial. El código necesario para darle estilo al falso placeholder de los campos de selección en el plugin Contact Form 7 es:


Gracias a este pequeño script te asegurarás de que el color del campo de selección sea el adecuado en todo momento y de que recupere su apariencia inicial al enviarlo.

Esperamos, como siempre, que este pequeño tutorial os sea de ayuda y os resulte útil tanto en proyectos actuales y como en futuros. También quedamos a la espera de vuestros comentarios y aportaciones para mejorar el tutorial.

2018-04-17T14:26:06+00:00 17 de abril de 2018|Categorías: Art Project Group|Etiquetas: , , , , , , |Sin comentarios

Deja tu comentario