¿Le interesa impedir que los usuarios introduzcan datos en un campo específico de un formulario? Deshabilitar un campo o hacerlo de sólo lectura puede ser útil si desea que los usuarios vean el valor del campo sin la opción de editarlo. En este tutorial, le guiaremos sobre cómo deshabilitar un campo de formulario, impidiendo eficazmente cualquier entrada de usuario.
Este enfoque también puede ser valioso cuando desee 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 del formulario
Para empezar, cree un nuevo formulario. En este tutorial, demostraremos el uso de 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 necesita ayuda con el proceso de creación de formularios, consulte este tutorial para obtener orientación paso a paso.
Después de crear correctamente su formulario, inserte un Texto del párrafo en él. Dentro del campo Avanzado incluya wpf-disable-field como el Nombre de clase CSS para activar la función de desactivación del campo.
Si utiliza más de una clase CSS para un campo de formulario, asegúrese de poner un espacio entre cada nombre de clase.
Desactivar el campo de formulario
Ahora es el momento de añadir el fragmento de código que lo unirá todo.
Si necesita ayuda para añadir código a su sitio, consulte 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>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );
El código anterior no sólo desactivará cualquier campo de formulario en cualquier formulario con la clase CSS de wpf-disable-field, sino que también saltará sobre estos campos cuando el usuario pase por cada campo.
La mejor forma de evitar la introducción de datos en otros campos, como los desplegables, las casillas de verificación o los campos de selección múltiple, sería proporcionar al usuario una única opción.
Y eso es todo lo que necesita para configurar sus campos de formulario para que sean de sólo lectura. ¿Desea cambiar las subetiquetas del campo Nombre? Nuestro artículo sobre Cómo cambiar las subetiquetas del campo Nombre le guiará a través de los pasos para lograrlo.
Acción de referencia
PREGUNTAS FRECUENTES
P: ¿Puedo utilizarlo también para otros campos?
A: Por supuesto. Siempre que coloque el wpf-disable-field a los campos, cubrirá todos.
Como ejemplo, este fragmento desactivará un campo de formulario desplegable.
/**
* 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, .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>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );