Pregunta sobre Contact Form by WPForms - Drag & Drop Form Builder for WordPress de Wordpress:

Número mínimo de caracteres para un campo de texto

Un usuario preguntó 👇

¿Cómo establezco el número mínimo de caracteres para un campo de texto? Quiero que mis usuarios ingresen al menos 350 caracteres en uno de los campos de mi formulario. Encontré esta documentación pero solo describe cómo limitar el número de caracteres.

https://developers.wpforms.com/docs/limit-number-of-characters-for-a-text-field/

¿Cómo puedo establecer el número mínimo de caracteres que se deben ingresar?

Atentamente, Sadiq

(@ethanchoi)

Hace 1 año, 11 meses

Hola sadiqodunsi,

Para hacer lo que ha informado, podemos usar un fragmento de código similar:

/**
 * Require number of characters allowed for an input field
 * Apply the class "wpf-char-require" to the field to enable.
 *
 */
function wpf_dev_char_require() {
	?>
	<script type="text/javascript">
		jQuery(function($){
			$('.wpf-char-require input').attr({
			  'minlength': 350,
			}); // Require min no. of characters 350
		  	$('.wpf-char-require textarea').attr({
			  'minlength': 350,
			}); // Require min no. of characters 350
		});
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_char_require' );

Si te ayuda, mira esto guía sobre cómo agregar código personalizado así con su sitio.

También necesitarás agregar la clase wpf_dev_char_require para las áreas para las que desea un mínimo. Para hacer esto, en el generador de formularios para hacer clic en el campo Opciones de campo panel y abra el Opciones avanzadas alt. En el campo Clases CSS, agregue wpf_dev_char_require.

Espero que esto ayude 🙂

(@sadiqodunsi)

Hace 1 año, 10 meses

Hola Ethan,

Gracias por la respuesta. Agregué su código a mi functions.php y usé el wpf_dev_char_require class en el panel Opciones de campo, secciones Opciones avanzadas pero no funcionó. ¿Me pueden ayudar a revisar el código, por favor?

Tenga en cuenta que también tengo el código para limitar el número de caracteres en las funciones my.php (este código funciona). ¿Podrían ser contradictorios?

/**
 * Limit number of characters allowed for an input/textarea field
 * Apply the class "wpf-char-limit" to the field to enable.
 *
 */
function wpf_dev_char_limit() {
	?>
	<script type="text/javascript">
		jQuery(function($){
			$('.wpf-char-limit input').attr('maxlength',350); // Change number to character limit (input fields)
			$('.wpf-char-limit textarea').attr('maxlength',350); // Change number to character limit (paragraph fields)
		});
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_char_limit' );

Atentamente, Sadiq

(@ethanchoi)

Hace 1 año, 10 meses

Hola sadiqodunsi,

Pido disculpas, ya que la clase SEC parece agregarse a la Opciones para exteriores> Opciones avanzadas> Clases CSS el campo debe ser wpf-char-require en lugar.

Cuando tengas la oportunidad de probarlo, avísame cómo te va o si tienes otras preguntas.

Gracias 🙂

(@sadiqodunsi)

Hace 1 año, 10 meses

Hola Ethan,

Gracias. Eso funciono. Otra pregunta, también estoy usando el código para limitar la cantidad de caracteres permitidos. ¿Sería posible que ese campo mostrara un mensaje de error? Lo que hace actualmente es evitar que un usuario ingrese un carácter adicional sin ningún mensaje de error (lo que puede ser confuso para los usuarios). Me gustaría que el campo hiciera algo como «No puede ingresar más de 350 caracteres».

Mensaje de error de salida del código para vincular el número de caracteres.

Atentamente, Sadiq

(@sadiqodunsi)

Hace 1 año, 9 meses

Hola,

Me pregunto si te perdiste mi último mensaje ya que no recibí ninguna respuesta.

Gracias Sadiq

(@ethanchoi)

Hace 1 año, 9 meses

Hola sadiqodunsi,

Pido disculpas por olvidar tu pregunta.

Para hacer lo que ha informado, puede probar el siguiente código personalizado (esto debería reemplazar la pila de código anterior).

Para aplicar esta colección a su formulario, necesitará:

1. Agregue una clase CSS de «wpf-char-limit» al campo de texto del elemento (área de texto). 2. Agregue una descripción al campo de texto del párrafo. Por ejemplo, «* Máximo 3000 caracteres»

function wpf_char_limit_textbox() {
    ?>
    <script>
      document.addEventListener( "DOMContentLoaded", function( event ) {
        var maxLength = 3000; // set for how many characters
        var targetTextarea = document.querySelector( ".wpf-char-limit textarea" );
        var charsNotification = document.querySelector( ".wpf-char-limit .wpforms-field-description" );
        targetTextarea.setAttribute( "maxlength", maxLength );
        targetTextarea.addEventListener( "input", function() {
          var charsEntered = this.value.length;
          if( charsEntered >= maxLength ) {
            charsNotification.textContent = "*You have reached the " + maxLength + " characters limit";
          } else {
            charsNotification.textContent = "*" + ( maxLength - charsEntered )  + " characters remaining";
          }
        });
      });
    </script><?php
}
add_action( 'wpforms_wp_footer', 'wpf_char_limit_textbox' );

Donde ayuda, tenemos una guía sobre cómo agregar código personalizado así con su sitio.

Espero que esto ayude 🙂

(@sadiqodunsi)

Hace 1 año, 9 meses

Hola,

Hice exactamente lo que describiste, pero el código no me funcionó.

Sobre Sadiq

(@ethanchoi)

Hace 1 año, 9 meses

Hola sadiqodunsi,

Lamento oír eso.

Para resolver el problema, ¿podría verificar que haya agregado la clase CSS? “wpf-char-limit al Opciones avanzadas> Clases CSS opción para el campo de texto del artículo en el generador de formularios? (Así es como debería verse)

Además, verifique que haya agregado un informe al campo de texto del artículo. Como «Máx. 3000 caracteres» (esto es un ejemplo).

¡Espero que esto ayude!

(@sadiqodunsi)

Hace 1 año, 8 meses

Hola Ethan,

Este código funciona pero me di cuenta cuando estoy en una página de WPforms que no tiene el acceso directo wpf-char-limit, Obtengo este error en la consola:

Uncaught TypeError: Cannot read property 'setAttribute' of null
    at HTMLDocument.<anonymous> ((index):2228)

La consola muestra el error de esta línea: targetTextarea.setAttribute( "maxlength", maxLength );

Hágame saber qué causó el error.

(@sadiqodunsi)

Hace 1 año, 8 meses

Hola,

Me pregunto si te perdiste mi último mensaje ya que no recibí ninguna respuesta.

Gracias Sadiq

(@ethanchoi)

Hace 1 año, 8 meses

Hola sadiqodunsi,

Pido disculpas porque no podemos brindar soporte para una amplia personalización del plugin.

En caso de que desee ver opciones de desarrollo personalizadas, le recomendamos que utilice Codeable. Aquí está nuestro tutorial sobre el uso de Codeable, que proporciona más detalles sobre cómo funciona este proceso.

¿Solucionó tu problema??

1 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada.