Soporte » Guías – Resolución de problemas » Placeholder en campo fecha de Contact Form 7

  • Resuelto carlosmdh

    (@carlosmdh)


    Buenas a todos.

    Configurando un formulario con CF7, me he encontrado con la sorpresa que no puedo personalizar el placeholder de un campo fecha y por defecto, aparece dd/mm/aaaa en vez de Fecha de Nacimiento que es lo que deseaba poner.

    Por lo que he visto por ahí, la opción es poner ese campo como texto, pero claro, entonces la gente podrá escribir lo que desee, tanto poner como fecha 24/09/1985 como 24 de Septiembre de 1985 o incluso un ola ke ase….

    Otra opción que veo es usar la extensión Contact Form 7 Datepicker, pero también comentan que puede traer problemas con el responsive.

    Por ahora he optado por la primera opción, pero quería saber si alguien tiene otro enfoque que funcione.

    Seguimos!!!
    Feliz lunes

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • Hola Carlos, nunca se me ha dado el caso, pero mirando en la documentación de CF7 para el placeholder en https://contactform7.com/setting-placeholder-text/ veo que marca disponible el placeholder para el tipo date

    You can use the placeholder option in the following types of form tags: text, email, url, tel, textarea, number, range, date, and captchar.

    y efectivamente si ves la prueba que he realizado en https://cldemos.pilvia.site/prueba-fecha-cf7/ y miras el código del campo de fecha verás que si aparece el placeholder con su contenido… el problema es que el navegador no lo muestra, he probado con Chrome, Firefox, Opera y Edge y en ninguno muestra el placeholder sino el formato de entrada necesario, por lo que es cuestión del navegador.

    Creo que lo ideal sería usar el campo date y aplicándole una clase, darle un poco de estilo como por ejemplo https://codepen.io/carlos_longarela/pen/KXQQLx

    Intentaré probar en un rato libre crear una demo en codepen para el campo date al igual que los mostrados.

    Espero que te pueda servir de algo de ayuda.

    Iniciador del debate carlosmdh

    (@carlosmdh)

    Gracias Carlos.

    Si lo de la doc de CF7 ya lo había visto.

    Por ahora lo voy a dejar como texto, ya que el cliente solo quiere el año paara saber la edad.

    Seguimos!!!
    Feliz lunes

    Moderador LGrusin

    (@lgrusin)

    Yo no creo que sea un error, aunque le pongas el placeholder, lo suyo es filtrar el campo fecha. En todo caso ponerle el label tal como has hecho en el ejemplo de pilvia @carloslongarela para que sepan que estás pidiendo la fecha de nacimiento.

    Un saludo

    Otra idea sería poner el campo como tipo texto, con el placeholder que quieres, y con javascript cambiar al hacer focus a tipo fecha. Al salir del foco, si el campo sigue vacío, lo conviertes nuevamente a tipo texto.

    Me parece muy buena idea Carlos, habría que probarlo para ver que no hace nada raro, pero a priori parece muy buena opción.

    Además, añadiría usaría el filtro de CF7 «wpcf7_posted_data» para validar el campo fecha para el caso de que el js no funcionara y al hacer submit, el campo siguiera siendo de tipo texto.

    Iniciador del debate carlosmdh

    (@carlosmdh)

    Buenas a todos.

    Voy a cerrar el debate, creo que ya hay bastantes enfoques para que si alguien en un futuro quiere consultarlo tenga respuestas.

Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • El debate ‘Placeholder en campo fecha de Contact Form 7’ está cerrado a nuevas respuestas.