Cómo añadir texto de marcador de posición a tus formularios de WordPress

¿Quieres agregar texto de marcador de posición en un formulario en WordPress? Los marcadores de posición facilitan que tus visitantes completen cada campo correctamente.

Se encuentra dentro de un campo y muestra a las personas exactamente qué escribir antes de que lo hagan, lo que reduce las conjeturas y los correos electrónicos de ida y vuelta que siguen.

En este artículo, te guiaré para agregar texto de marcador de posición a cada campo de tu formulario de contacto de WordPress utilizando la solución más sencilla disponible con WPForms.

¡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 es muy importante para asegurarse de que cada campo sea válido.

Eso 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.com como 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 @example como 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 comienza a escribir en un campo con un marcador de posición, el texto del marcador de posición desaparece. En contraste, un valor predeterminado se enviará junto con la entrada del formulario a menos que el usuario lo cambie.

Cómo añadir texto de marcador de posición a formularios de WordPress

Una vez que tu formulario exista, el texto de marcador de posición toma un par de clics por campo, y no necesitas tocar una línea de código o CSS para hacerlo. Sigue los pasos a continuación para comenzar:

Paso 1: Instalar el plugin WPForms

WPForms es un creador de formularios de arrastrar y soltar para WordPress con más de 2100 plantillas de formularios, para que puedas comenzar desde un formulario de contacto prefabricado en lugar de construir desde cero.

Cada campo que arrastras tiene su propio panel de opciones, y el texto de marcador de posición se encuentra en el mismo lugar en todos ellos. Lo que más me gusta de WPForms para este trabajo en particular es que la vista previa del marcador de posición se actualiza en vivo.

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.

Empieza Hoy Mismo con WPForms

Paso 2: Crea tu formulario de contacto

En WPForms, puedes crear e incrustar un formulario en menos de 5 minutos, gracias a su biblioteca de más de 2100 plantillas de formularios y sus avanzadas capacidades de creación de formularios con IA.

Puedes empezar yendo a WPForms » Añadir nuevo y elegir la plantilla Formulario de contacto simple o pedirle a la IA de WPForms que cree el formulario por ti.

Una vez que hayas seleccionado una plantilla o creado tu formulario usando la IA de WPForms, serás redirigido al constructor de formularios. Aquí puedes ver una lista de campos para añadir a la izquierda y una vista previa en vivo de tu formulario a la derecha.

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 constructor de formularios para guardar tu progreso hasta el momento.

Paso 3: Agrega texto de marcador de posición a un campo de texto o 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 constructor 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 placeholder de HTML5, por lo que es posible que desees dejar la etiqueta del campo en su lugar por accesibilidad.

Por ahora, desmarcaremos Ocultar etiqueta para que tengamos tanto la etiqueta como el texto del marcador de posición. Repite esto para cada campo que necesite una indicación.

Paso 4: Agrega 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 real del marcador de posición. Por lo tanto, WPForms te da más control sobre la apariencia 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.

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 del 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 quieres usar texto de marcador de posición, pero quieres una línea en blanco en la parte superior del desplegable, puedes dejar el marcador de posición en blanco.

Simplemente presiona espacio en el campo Texto de marcador. Esto mostrará el campo desplegable como vacío hasta que el visitante haga una selección.

Todos los campos de WPForms que admiten texto de marcador de posición

No todos los campos pueden contener texto de marcador, y saber cuáles pueden te ahorra buscar en configuraciones que no existen.

Para la referencia completa de cada tipo de campo, WPForms tiene documentación sobre texto de marcador que cubre los detalles.

Campo	Notas
Texto de una sola línea	Marcador estándar
Texto de párrafo	Marcador estándar
Nombre	Marcador separado por subcampo (primero, intermedio, último)
Correo electrónico	Marcador separado para el campo de confirmación
Sitio web / URL	Marcador estándar
Teléfono	Marcador estándar
Número	Marcador estándar
Desplegable	Sirve también como una forma de evitar que la primera opción sea preseleccionada
Dirección	Marcador separado por línea, ciudad, estado, código postal y país
Fecha / Hora	Marcador separado para los selectores de fecha y hora
Contraseña	Marcador separado para el campo de confirmación
Captcha personalizado	Marcador estándar

Cualquier cosa en la que el lector haga clic en lugar de escribir no tiene opción de marcador, ya que no hay un cuadro de texto vacío donde poner una pista. Esto incluye Casillas de verificación, Opción múltiple, Calificación, Firma, Carga de archivos, Deslizador numérico y Texto enriquecido.

Seis de los campos anteriores se incluyen con WPForms Lite gratuito, incluyendo Texto de línea única, Nombre, Correo electrónico, Texto de párrafo, Desplegable y Número. Teléfono, Dirección, Fecha/Hora y Captcha personalizado son campos avanzados que requieren una licencia de pago.

Migrando de Contact Form 7 a WPForms

Si llegaste aquí desde Contact Form 7, ya sabes por qué. Los marcadores allí significan abrir la pestaña Formulario y escribir un atributo placeholder en el shortcode del formulario a mano para cada campo, o marcar la casilla "usar este texto como marcador" en Valor predeterminado.

De cualquier manera, estás editando código, y cada nuevo campo significa volver a entrar en el shortcode. Los desplegables se topan con un techo más difícil, porque Contact Form 7 puede darte una primera línea en blanco pero la muestra como tres guiones sin ninguna configuración para cambiar lo que dice.

No puedes escribir "Elige un departamento" o "Selecciona tu presupuesto", y ninguna cantidad de edición de shortcode cambia eso. Nuestra comparación WPForms Lite vs Contact Form 7 repasa el resto de las diferencias si quieres la imagen completa.

Esa brecha es la razón honesta para cambiar para este trabajo en particular. El texto de marcador en WPForms es un cuadro en el que escribes, con una vista previa en vivo, en cada campo que lo admite.

Puedes importar tus formularios existentes de Contact Form 7 en lugar de reconstruirlos, lo que convierte a WPForms en una alternativa directa a Contact Form 7 si la edición de shortcodes te ha cansado.

Preguntas frecuentes sobre el texto de marcador de posición de Contact Form

El texto de marcador aparece mucho entre los usuarios de WordPress que configuran formularios de contacto. Aquí están las preguntas que surgen con más frecuencia.

¿Qué es el texto de marcador de posición?

Es el texto de pista dentro de un campo de formulario que muestra qué escribir y desaparece una vez que alguien comienza a escribir.

Proviene del atributo placeholder de HTML5, y en WPForms lo agregas desde la pestaña Avanzado de cualquier campo compatible.

¿Cuál es la diferencia entre el texto de marcador de posición y un valor predeterminado?

El texto de marcador es solo una pista visual, por lo que nunca se envía con el formulario. Un valor predeterminado es contenido real en el campo, y se envía a menos que la persona lo cambie primero.

Usa un marcador para mostrar el formato que deseas, y un valor predeterminado cuando quieras rellenar una respuesta real.

¿Pueden los lectores de pantalla leer el texto de marcador de posición?

No de forma fiable, por eso el texto de marcador de posición no debería ser la única descripción que tenga un campo.

Mantén la etiqueta del campo visible en lugar de marcar Ocultar etiqueta, y pon cualquier cosa realmente importante en la descripción del campo, donde permanece en pantalla.

¿Por qué mi lista desplegable selecciona la primera opción automáticamente?

Porque está configurado en el estilo Clásico, que siempre preselecciona la primera opción.

Añade texto de marcador de posición en la pestaña Avanzado y eso se detiene, o cambia Estilo a Moderno en la pestaña General, ya que los desplegables Modernos no preseleccionan en absoluto.

¿Puedo agregar texto de marcador de posición en Contact Form 7?

Puedes hacerlo escribiendo un atributo placeholder en el shortcode de la etiqueta del formulario o usando la casilla de verificación Valor predeterminado.

Los desplegables son el límite, porque Contact Form 7 solo ofrece una línea en blanco que se muestra como tres guiones sin forma de personalizar el texto.

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.

Crea un Mejor Formulario de Contacto Ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación 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.