Cómo agregar texto sustituyente a sus formularios de WordPress

¿Quieres agregar forma de texto sustituyente en WordPress? Los sustituyentes facilitan la finalización correcta de cada campo por parte de sus visitantes. Esto le ayuda a obtener la información correcta y reducir la frustración de sus visitantes en este artículo, le mostraremos la manera fácil de agregar texto sustituyente a cualquier tipo de forma. Crea tu forma de WordPress ahora ¿Cuál es el texto sustituyente? El texto sustituyente es el texto de un formulario que muestra al usuario para ingresar. Se ha introducido en la especificación HTML5, por lo que a veces lo verá llamado “atributo sustituyente html5”.
Los sustituyentes son útiles para cualquier campo que tenga un formato particular, como una dirección de correo electrónico. Muestra al visitante cómo formatear su entrada.
WPFORMS es el mejor complemento de WordPress Form Builder. ¡Tómelo gratis!

El texto sustituyente es muy importante para garantizar que cada campo sea válido. Esto significa que hay menos posibilidades de abandono, porque el visitante no tendrá que regresar y corregir lo que escribió. Es especialmente útil para áreas como:
Direcciones de URL: puede agregar https://example.com como un texto sustituto para mostrar al visitante cómo ingresar correctamente la dirección del sitio web
Números de teléfono: por ejemplo, si desea reunir el código de país del usuario con su número habitual, puede agregar texto sustituyente para mostrarles cómo ingresarlo.
Nombre de usuario para redes sociales: el texto sustituyente puede mostrar a las personas cómo corregir su nombre de usuario correctamente. Por ejemplo, agregar @example como un texto sustituyente para un campo de Twitter muestra que desea escribir @
Probablemente pueda pensar en otras formas de usar el texto sustituyente para ayudar a sus visitantes. La parte superior sustituyente es ligeramente diferente del valor predeterminado. Cuando el usuario comienza a escribir un campo con un sustituyente, el texto sustituto desaparece. En contraste, se enviará un valor implícito junto con la entrada del formulario, a menos que el usuario lo cambie. Ahora sabemos cómo usar el atributo sustituyente HTML5, le mostraremos la manera fácil de agregarlo a sus formularios. Cómo agregar texto sustituyente en formularios de WordPress, le mostraremos cómo agregar fácilmente texto sustituyente a los pasos a continuación.
Instale el complemento WPForms
Hacer un formulario de contacto simple
Agregar texto sustituyente al campo de correo electrónico
Agregar texto sustituyente a un campo desplegable
Comencemos instalando el mejor complemento de WordPress.
1. Instale primero el complemento WPFFORMS, instale y active el complemento WPFORMS. Todas las versiones de WPFORMS le permiten agregar sustituyentes a los campos de formulario, incluido WPFFORMS LITE. Tenga en cuenta que la versión Pro le permite agregar campos avanzados a sus formularios, por lo que es mucho más fuerte que la versión gratuita. Descargue el archivo zip desde la pestaña Descargas desde su cuenta WPForms y cárguelo a su sitio de WordPress. Aquí hay una guía paso por paso sobre cómo instalar un complemento de WordPress si necesita ayuda con este paso. 2. Haga un formulario de contacto simple, entonces, querrá crear un formulario de contacto simple. En WPFORMS, puede crear e incorporar un formulario en menos de 5 minutos.
Es fácil personalizar su formulario y agregar cualquier campo que necesite. Incluso puede agregar fácilmente un acuerdo GDPR extrayendo el campo GDPR sobre la vista previa del formulario. ¿Necesita más ayuda? Tenemos una guía detallada que muestra cómo crear un formulario de contacto simple en WordPress. Cuando su formulario esté listo, haga clic en Salvación en la parte superior del constructor de formulación para guardar su progreso hasta ahora. 3. Agregue texto sustituyente al campo de correo electrónico Ahora estamos listos para agregar html5 text sustituyente a su formulario de WordPress. Le mostraremos 2 formas útiles de usar esta función para completar sus formularios más fácilmente.

Usemos el campo de correo electrónico como primer ejemplo. En el generador de formulación, haga clic en el campo de correo electrónico derecho para abrir la configuración.

Luego, en el lado izquierdo, extienda las opciones avanzadas de submenús. Verá un campo para el texto sustituto.
Ingrese el texto sustituyente que desea usar. Como escribe, verá el mismo texto que aparece en la vista previa de la forma correcta, para que pueda ver cómo se verá en su forma de WordPress.

Si lo desea, también puede hacer clic en el cuadro de selección de etiquetas. Esto ocultará la etiqueta sobre el campo para que la forma sea más compacta. Sin embargo, tenga en cuenta que los lectores de pantalla no pueden leer el atributo de sustituto HTML5, por lo que es posible que desee dejar la etiqueta de campo en su lugar para la accesibilidad.


Por el momento, haremos que la etiqueta se esconda, para que tengamos la etiqueta y el texto sustituyente. 4. Agregue un texto sustituto en un campo desplegable Puede usar texto sustituyente en cualquier campo, pero el menú desplegable es particularmente útil. Por defecto, una lista vertical será predeterminada en la primera opción en la lista, pero podemos usar un sustituto para evitar esto. Si lee nuestra comparación entre WPForms Lite y el Formulario de contacto 7, sabrá que el Formulario de contacto 7 le permite agregar una línea vacía en la parte superior de una lista de caída. Sin embargo, mostrará solo 3 guiones ( – – -) como sustituto y no puede personalizar el texto real del sustituyente. Comencemos con un ejemplo propenso. Agregué 3 opciones de respuesta a este menú de caída.

Cuando publicamos el formulario, la primera opción será la selección predeterminada. Su visitante podría enviar este formulario sin hacer clic en el menú Drop -down para cambiarlo.

Esto puede ser un problema en cualquier forma, especialmente en forma de investigación y cuestionarios. En cualquier tipo de encuesta, debe asegurarse de que su visitante haya elegido conscientemente una respuesta. Podemos resolver fácilmente este problema agregando un sustituyente al campo de caída.
Bajo opciones avanzadas, introdujimos el texto sustituyente desde la izquierda. El cambio se muestra instantáneamente en la vista previa correcta.

Ahora el formulario mostrará el sustituto en lugar de la primera opción.

Cuando se extiende la lista, puede ver que el texto sustituyente está en gris para mostrar que no es una selección válida.
Si no desea usar un texto sustituyente, pero desea una línea vacía en la parte superior de la lista de caída, puede dejar el espacio vacío. Simplemente presione el espacio en el campo de texto sustituyente. Esto mostrará el campo Drop -down como vacío hasta que el visitante haga una selección. ¡Y eso es! Ahora sabe cómo agregar texto sustituyente útil a sus formularios de WordPress. Viene su formulario de WordPress ahora el siguiente paso: estilizar el texto sustituyente de forma predeterminada, el texto sustituto 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 sustituyente. También tenemos algunos maravillosos ejemplos de páginas de contacto, si desea una inspiración para el diseño. ¿No está seguro de cómo agregar CSS a WordPress? Lea esta guía para agregar fragmentos de código sin romper su sitio. ¿Estás listo para construir tu formulario? Comience hoy con el complemento de WordPress más simple para el generador de formulación. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo le ha ayudado, síganos en Facebook y Twitter para obtener más tutoriales y guías gratuitos de WordPress.