¿Cómo agregar un placeholder para un menú desplegable en Contact Form 7?

Question

¿Cómo agregar un placeholder para un menú desplegable en Contact Form 7?

6 ene 2016, 06:51:09

Vistas: 186K

Votos: 25

Intenté agregar un placeholder similar al dado para ContactNumber en mi menú desplegable Outlet pero no aparece.

Código-

<div class="form-group form-icon-group">
    <i class="fa fa-phone" > </i> [tel* ContactNumber /8 class:form-control placeholder "Número de Contacto *"]
</div>
<div class="form-group form-icon-group">
<i class="fa fa-food" > </i> [select Outlet id:outlet class:form-control "-- Seleccionar Sucursal--" "Pasir Ris" "Thomson"]
</div>

Intenté agregar first_as_label "¿Sucursal preferida?" así que esto se muestra como valores normales del menú desplegable.

El resto de los campos sí muestran el placeholder, ¿hay alguna otra forma de dar un placeholder al menú desplegable?

Sanjuktha sandesh

353

plugin formulario de contacto 7

Comentarios

Puedes utilizar la opción de marcador de posición (placeholder) en los siguientes tipos de etiquetas de formulario: texto, correo electrónico, URL, teléfono, área de texto, número, rango, fecha y captchar. cf7 placeholder

Reigel Gallarde

6 ene 2016 07:39:54

¿así que para los menús desplegables no tenemos otra opción?

Sanjuktha sandesh

6 ene 2016 07:47:25

Todas las respuestas a la pregunta

Contrario a lo que sugiere la respuesta aceptada, en realidad es posible y está integrado en Contact Form 7. Aquí está la lista de opciones que admite [select]. Básicamente, definirías la primera opción como el marcador de posición usando first_as_label:

[select* Test first_as_label "Marcador" "Opción 1" "Opción 2"]

Aunque no se verá tradicionalmente como un marcador de posición, si es requerido el usuario no podrá seleccionar el marcador y enviar el formulario - esto fuerza al usuario a seleccionar cualquiera de las otras opciones.

Howdy_McGee

20.8K

6 ene 2016 17:36:18

Comentarios

Gracias por la ayuda. Ya probé first_as_label pero como dijiste no se veía similar a otros valores de marcador de posición.

Sanjuktha sandesh

7 ene 2016 02:54:59

Esta es una solución decente. Y funciona correctamente - el formulario no se envía si intentas usar la primera opción. Para formatear la primera opción, solo apunta al cuadro de selección (ej. .wpcf7 select[name="menu-70"] { color:#aaa; }. Luego puedes hacer las opciones más oscuras apuntando a las opciones (ej. .wpcf7 select[name="menu-70"] option { color:#333; }. La primera opción se resalta al enfocarse, así que a menos que quieras cambiar esta parte, la solución funciona genial.

Rob Myrick

16 sept 2016 20:05:53

No estoy completamente seguro de por qué alguien querría que una opción de selección se vea como un marcador de posición a menos que me esté perdiendo algo. Un simple "--Seleccione una opción--" es lo que la mayoría de la gente espera ver. ¡Muchas gracias por evitarme revisar la documentación yo mismo!

Rick Calder

21 sept 2018 22:40:31

Ahora esta opción no funciona en Mac. El estilo se aplica desde el select. Las opciones son solo una representación del contenido. El texto. No son el elemento con estilo.

neoswf

21 ene 2022 01:14:47

¡Esta debería ser la respuesta aceptada! ¡Genial!

markzzz

4 abr 2023 15:02:20

Comentarios

Esta respuesta realmente debería eliminarse, aceptada o no, es incorrecta, y no es que sea una respuesta muy antigua, se proporcionó el mismo día que la correcta.

Rick Calder

21 sept 2018 22:42:42

Reigel Gallarde 889 · Accepted Answer · 2016-01-06T08:18:55Z

Para responder a la pregunta: esto no es posible.

Hasta donde sé (en términos de HTML), no hay forma de añadir un placeholder a las etiquetas select.

Muchos desarrolladores que conozco suelen usar la combinación disabled selected para la opción...

<select>
    <option value="" disabled selected>Selecciona tu opción</option>
    <option value="ydasdas">ydasdas</option>
    <option value="dasda">dasda</option>
    <option value="ydagfdsdas">ydagfdsdas</option>
    <option value="ewefsdf">ewefsdf</option>
</select>

demo

He revisado el código fuente de CF7 (versión 4.3.1), y no hay una forma sencilla de lograr este formato HTML.

Puedes optar por el camino difícil eliminando la acción wpcf7_add_shortcode_select en wpcf7_init y añadiendo la tuya en su lugar.

Reigel Gallarde

889

6 ene 2016 08:18:55