Cómo deshabilitar un campo de formulario para evitar la entrada del usuario

¿Te interesa impedir que los usuarios introduzcan datos en un campo de formulario específico? Deshabilitar un campo o hacerlo solo lectura puede ser útil si quieres que los usuarios vean el valor del campo sin la opción de editarlo. En este tutorial, te guiaremos sobre cómo deshabilitar un campo de formulario, impidiendo eficazmente cualquier entrada del usuario.

Este enfoque también puede ser valioso cuando quieras incluir este valor en la etiqueta inteligente {all_fields} para correos electrónicos de notificación o dentro de una exportación CSV.

Creación de su formulario

Para empezar, crea un nuevo formulario. En este tutorial, demostraremos usando un campo de Texto de Párrafo que incluirá un mensaje con una etiqueta inteligente que representa la fecha actual como marca de tiempo para el envío del formulario.

Si necesitas ayuda con el proceso de creación del formulario, consulta este tutorial para obtener una guía paso a paso.

Después de crear tu formulario con éxito, inserta un campo de Texto de Párrafo en él. Dentro de la pestaña Avanzado del campo, incluye wpf-disable-field como Nombre de Clase CSS para habilitar la funcionalidad de deshabilitación del campo.

Deshabilitar el campo del formulario

Es hora de añadir el fragmento de código que unirá todo esto.

Si necesitas ayuda para añadir código a tu sitio, consulta este tutorial.

/**
 * Make standard form fields to make read-only
 * To apply, add CSS class 'wpf-disable-field' (no quotes) to field in form builder
 *
 * @link https://wpforms.com/developers/disable-a-form-field-to-prevent-user-input/
 */
 
function wpf_dev_disable_field() {
    <script type="text/javascript">
 
    jQuery(function($) {
 
        $( '.wpf-disable-field input, .wpf-disable-field textarea' ).attr({
             readonly: "readonly",
             tabindex: "-1"
        });
         
    });
 
    </script>
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );

El código anterior no solo deshabilitará cualquier campo del formulario con la clase CSS wpf-disable-field, sino que también omitirá estos campos mientras el usuario navega por cada campo.

Y eso es todo lo que necesitas para configurar tus campos de formulario para que sean de solo lectura. ¿Te gustaría cambiar las subetiquetas del campo Nombre? Nuestro artículo sobre Cómo Cambiar las Subetiquetas para el Campo Nombre te guiará a través de los pasos para lograr esto.

Acción de referencia

wpforms_wp_footer_end

Preguntas frecuentes

P: ¿Puedo usar esto también para otros campos?

R: ¡Absolutamente! Siempre que apliques wpf-disable-field a los campos, cubrirá a todos.

Como ejemplo, este fragmento deshabilitará un campo de formulario Desplegable.

/**
 * Make standard form fields read-only
 * To apply, add CSS class 'wpf-disable-field' (no quotes) to the field in the form builder
 *
 * @link https://wpforms.com/developers/disable-a-form-field-to-prevent-user-input/
 */
function wpf_dev_disable_field() {
    <script type="text/javascript">
      jQuery(function($) {
        $('.wpf-disable-field input, .wpf-disable-field textarea, .wpf-disable-field select').attr({
          disabled: true,
          tabindex: '-1'
        });

        $('.wpforms-form').on('wpformsBeforeFormSubmit', function(){
          $('.wpf-disable-field input, .wpf-disable-field textarea, .wpf-disable-field select')
            .removeAttr('disabled');
        });
      });
    </script>
}
add_action('wpforms_wp_footer_end', 'wpf_dev_disable_field', 30);