Resumen de IA
¿Quieres añadir texto de marcador de posición en WordPress?
Los marcadores de posición facilitan que tus visitantes rellenen cada campo correctamente. Esto te ayuda a obtener la información adecuada y reduce la frustración de tus visitantes.
En este artículo, te mostraremos la forma sencilla de añadir texto de marcador de posición a cualquier tipo de formulario.
Crea tu formulario de WordPress ahora
¿Qué es el texto de marcador de posición?
El texto de marcador de posición es el texto dentro de un campo de formulario que muestra al usuario qué escribir. Se introdujo en la especificación HTML5, por lo que a veces lo verás referido como el 'atributo placeholder de HTML5'.
Los marcadores de posición son útiles para cualquier campo que tenga un formato específico, como una dirección de correo electrónico. Muestra a tu visitante cómo formatear su entrada.
El texto de marcador de posición es muy importante para asegurar que cada campo sea válido. Esto significa que hay menos posibilidades de abandono del formulario porque el visitante no tendrá que volver atrás y corregir lo que escribió.
Es especialmente útil para campos como:
- URLs: Puedes añadir
https://example.comcomo texto de marcador de posición para mostrar al visitante cómo escribir correctamente la dirección de su sitio web. - Números de teléfono: Por ejemplo, si quieres obtener el código de país del usuario junto con su número normal, puedes añadir texto de marcador de posición para mostrarles cómo escribirlo.
- Nombres de usuario de redes sociales: El texto de marcador de posición puede mostrar a las personas cómo escribir correctamente su nombre de usuario. Por ejemplo, añadir
@examplecomo texto de marcador de posición para un campo de Twitter indica que quieres que escriban el@inicial.
Probablemente puedas pensar en otras formas de usar el texto de marcador de posición para ayudar a tus visitantes.
El texto de marcador de posición es un poco diferente de un valor predeterminado. Cuando el usuario empieza a escribir en un campo con un marcador de posición, el texto del marcador de posición desaparece. En cambio, un valor predeterminado se enviará junto con la entrada del formulario a menos que el usuario lo cambie.
Ahora que sabemos cómo usar el atributo placeholder de HTML5, te mostraremos la forma sencilla de añadirlo a tus formularios.
Cómo añadir texto de marcador de posición a formularios de WordPress
Te mostraremos cómo añadir fácilmente texto de marcador de posición en los pasos siguientes.
En este artículo
Empecemos instalando el mejor plugin de creación de formularios para WordPress.
1. Instala el plugin WPForms
Primero, instala y activa el plugin WPForms.
Todas las versiones de WPForms te permiten añadir marcadores de posición a los campos del formulario, incluido WPForms Lite. Ten en cuenta que la versión Pro te permite añadir campos avanzados a tus formularios, por lo que es mucho más potente que la versión gratuita.
Descarga el archivo zip desde la pestaña Descargas en tu cuenta de WPForms y súbelo a tu sitio de WordPress. Aquí tienes una guía paso a paso sobre cómo instalar un plugin de WordPress si necesitas ayuda con este paso.
2. Crea un formulario de contacto sencillo
A continuación, querrás crear un formulario de contacto sencillo. En WPForms, puedes crear e incrustar un formulario en menos de 5 minutos.
Es fácil personalizar tu formulario y añadir los campos que necesites. Incluso puedes añadir un acuerdo de GDPR fácilmente arrastrando el campo GDPR a la vista previa del formulario.
¿Necesitas más ayuda? Tenemos una guía detallada que muestra cómo crear un formulario de contacto simple en WordPress.
Cuando tu formulario esté listo, haz clic en Guardar en la parte superior del creador de formularios para guardar tu progreso hasta el momento.
3. Añade texto de marcador de posición al campo de correo electrónico
Ahora estamos listos para añadir texto de marcador de posición a tu formulario de WordPress. Te mostraremos 2 formas útiles de usar esta función para que tus formularios sean más fáciles de rellenar.
Usemos el campo de correo electrónico como primer ejemplo.
En el creador de formularios, haz clic en el campo de correo electrónico a la derecha para abrir la configuración.
Luego, en el lado izquierdo, expande el submenú Opciones avanzadas.
Verás un campo para el Texto de marcador de posición.
Escribe el texto de marcador de posición que deseas usar. A medida que escribes, verás que el mismo texto aparece en la vista previa del formulario a la derecha para que puedas ver cómo se verá en tu formulario de WordPress.
Si lo deseas, también puedes marcar la casilla Ocultar etiqueta. Esto ocultará la etiqueta encima del campo para hacer el formulario más compacto. Sin embargo, ten en cuenta que los lectores de pantalla no pueden leer el atributo de marcador de posición HTML5, por lo que es posible que desees dejar la etiqueta del campo para mejorar la accesibilidad.
Por ahora, vamos a desmarcar Ocultar etiqueta para que tengamos tanto la etiqueta como el texto de marcador de posición.
4. Añade texto de marcador de posición a un campo desplegable
Puedes usar texto de marcador de posición en cualquier campo, pero el desplegable es especialmente útil. Por defecto, una lista desplegable mostrará la primera opción de la lista, pero podemos usar un marcador de posición para evitar esto.
Si leíste nuestra comparación de WPForms Lite vs Contact Form 7, sabrás que Contact Form 7 te permite añadir una línea en blanco en la parte superior de un desplegable. Sin embargo, solo mostrará 3 guiones ( – – – ) como marcador de posición, y no puedes personalizar el texto del marcador de posición.
Así que WPForms te da más control sobre el aspecto de tus marcadores de posición.
Empecemos con un ejemplo de desplegable. Hemos añadido 3 opciones de respuesta a este desplegable.
Cuando publiquemos el formulario, la primera opción será la selección predeterminada. Tu visitante podría enviar este formulario sin hacer clic en el desplegable para cambiarlo.
Esto puede ser un problema en cualquier formulario, y particularmente en formularios de encuestas y cuestionarios. En cualquier tipo de encuesta, quieres asegurarte de que tu visitante elija conscientemente una respuesta.
Podemos resolver fácilmente este problema añadiendo un marcador de posición al campo desplegable.
En Opciones avanzadas, escribimos el texto de marcador de posición a la izquierda. El cambio se muestra instantáneamente en la vista previa de la derecha.
Ahora el formulario mostrará el marcador de posición en lugar de la primera opción.
Cuando la lista se expanda, puedes ver que el texto del marcador de posición está en gris para indicar que no es una selección válida.
Si no desea utilizar texto de marcador de posición, pero desea una línea en blanco en la parte superior del menú desplegable, puede dejar el marcador de posición en blanco. Simplemente presione espacio en el campo Texto de marcador de posición. Esto mostrará el campo desplegable como vacío hasta que el visitante realice una selección.
¡Y eso es todo! Ahora sabe cómo agregar texto de marcador de posición útil a sus formularios de WordPress.
Crea tu formulario de WordPress ahora
Siguiente paso: Estilizar su texto de marcador de posición
Por defecto, el texto de marcador de posición de su formulario de contacto de WordPress será gris. Si desea agregar algo de contraste, puede usar CSS para estilizarlo.
Consulte los fragmentos de código en nuestra documentación: cómo estilizar el texto de marcador de posición. También tenemos algunos excelentes ejemplos de páginas de contacto si desea inspiración de diseño.
¿No está seguro de cómo agregar CSS en WordPress? Lea esta guía para agregar fragmentos de código sin romper su sitio.
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
