¡Atención!

Este artículo contiene código CSS y está destinado a desarrolladores. Ofrecemos este código como cortesía, pero no proporcionamos soporte para personalizaciones de código o desarrollo de terceros.

Para obtener ayuda adicional, consulta el tutorial de WPBeginner sobre cómo agregar CSS personalizado.

Descartar

Cambiar el texto clave en Formularios Conversacionales

Actualizado:
Ver Markdown

¿Estás usando el complemento Formularios Conversacionales y quieres cambiar el texto clave que ves en los campos de entrada de selección? Por defecto, el complemento añadirá Clave A, Clave B, Clave C, etc., para los campos de entrada de opción múltiple al ver el formulario en modo conversacional. Sin embargo, puedes cambiar este texto con CSS personalizado.

Por defecto, los campos de casilla de verificación y opción múltiple mostrarán Clave y luego una letra para cada opción en tu formulario conversacional

En este tutorial, compartiremos el fragmento de CSS que cambiará el texto Clave por algo diferente.

Creación de tu formulario

Para empezar, crearemos un nuevo formulario Conversacional y le añadiremos nuestros campos. Esto incluirá al menos un campo de Casillas de verificación y un campo de Opción múltiple (radio).

crea el formulario y añade tus campos, incluyendo al menos un campo de casilla de verificación y un campo de opción múltiple

¿Te preguntas cuál es la diferencia entre los campos de Casillas de verificación y Opción múltiple?

Las casillas de verificación permiten al usuario elegir elementos de un número fijo de alternativas. En contraste, los botones de radio (campo Opción múltiple) permiten al usuario elegir solo un elemento de una lista de varias alternativas predefinidas. Si lo deseas, puedes limitar el número de opciones que los usuarios eligen en el campo Casillas de verificación.

Añadir CSS para cambiar el texto clave

Para este tutorial, no queremos mostrar la palabra ‘Clave’ en nuestro formulario. Queremos cambiar este texto por ‘Elemento’.

Vamos a colocar nuestro CSS dentro de lo que se llama una consulta de medios. Esta es solo una forma de indicar al CSS que no debe aplicarse a menos que el ancho mínimo del dispositivo sea el que hemos especificado en nuestro CSS. Para obtener más información sobre las consultas de medios, consulta la guía del desarrollador de Mozilla sobre qué es una consulta de medios y cómo usarla.

Ahora, es el momento de añadir el CSS a tu sitio para que podamos cambiar este texto. Simplemente copia y pega el CSS a continuación en tu sitio. Si necesitas ayuda para añadir CSS a tu sitio, revisa este tutorial.

#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item) label:before {
    counter-increment: wpforms-radio;
    content: counter(wpforms-radio, upper-alpha);
    left: 10px;
}
 
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before, 
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before {
      content: counter(wpforms-radio, upper-alpha);
    content: "Item " counter(wpforms-radio, upper-alpha);
  }

El CSS cambiará la palabra Clave por Elemento en todos los campos de formulario de Casillas de verificación y Opción múltiple, incluidos los campos de pago como los campos de Elementos de Casilla de verificación y Elementos Múltiples. Simplemente reemplaza la palabra Elemento con lo que quieras mostrar en tus formularios.

Nota: Al usar este CSS, este texto no será traducible ya que se añade a través de CSS. Si tienes un sitio multilingüe, este tutorial no es recomendable.

Después de añadir el CSS, puedes ver el cambio en el texto clave

Preguntas frecuentes

Estas son respuestas a algunas de las preguntas más frecuentes que vemos sobre la personalización de la vista previa del complemento Formularios Conversacionales.

¿Cómo puedo eliminar el texto por completo?

Para eliminar el texto por completo, añade este CSS a tu sitio. Para obtener ayuda para añadir CSS a tu sitio, consulta este tutorial.

#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before {
  content:none;
}
 
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label {
  padding: 9px 9px 9px 9px;
}

¡Eso es todo! Has cambiado con éxito el texto clave en Formularios Conversacionales.

A continuación, ¿te gustaría incluir tu propia hoja de estilos dedicada para Formularios Conversacionales? Echa un vistazo a nuestro tutorial sobre cómo poner en cola una hoja de estilos para Formularios Conversacionales.

Etiquetado:
Aún atascado? ¿Cómo podemos ayudar?
Última actualización el 09 de dic. de 2024