Resumen de IA
Introducción
¿Le gustaría habilitar una casilla de verificación después de leer un descargo de responsabilidad o términos de servicio? Aprenda a aprovechar el potencial de la función Mostrar descargo de responsabilidad / Términos de servicio para campos de Casilla de verificación. Esta capacidad permite a los usuarios expresar su acuerdo con sus términos de servicio. Sin embargo, si está interesado en desactivar este campo hasta que los usuarios hayan leído completamente su descargo de responsabilidad, ¡este tutorial está hecho a medida para sus necesidades!
Creación del formulario
Comience creando su formulario y agregando sus campos. Si necesita ayuda para crear su formulario, revise esta útil guía.
Habilitar Términos de Servicio
Una vez que haya agregado sus otros campos, agregue un campo de Casilla de verificación y haga clic en la pestaña Avanzado. En esta pestaña, verá una opción para Mostrar descargo de responsabilidad / Términos de servicio. Active esta opción y agregue su texto en el campo Descripción.
Una vez habilitado, vuelva a la pestaña General para agregar su texto en la Descripción.
Añadir el fragmento
Ahora, es hora de agregar el fragmento a su sitio. Para obtener ayuda sobre cómo y dónde agregar fragmentos a su sitio, revise este tutorial.
/**
* Disable checkbox until terms of service has been read
*
* @link https://wpforms.com/developers/how-to-enable-a-checkbox-after-reading-disclaimer/
*/
function wpf_dev_tos_confirmation( ) {
?>
<script type="text/javascript">
jQuery(document).ready( function() {
// Set an attribute on the checkbox description to readonly
jQuery( "div#wpforms-3658-field_14-description" ).attr( "readonly","readonly" );
// Set an attribute on the checkbox description to overflow-y scroll to check the scroll position
jQuery( "div#wpforms-3658-field_14-description" ).attr( "overflow-y","scroll" );
// Set an attribute on the checkbox field to disabled
jQuery( "#wpforms-3658-field_14 input" ).attr( "disabled","true" );
// As the user scrolls through the description, envoke this function
jQuery( "div#wpforms-3658-field_14-description" ).scroll(function () {
// Evaluate the scroll position inside the checkbox description
if (jQuery(this).scrollTop() == jQuery(this)[0].scrollHeight - jQuery(this).innerHeight() || jQuery(this).scrollTop() + jQuery(this).innerHeight() >= jQuery(this)[0].scrollHeight ) {
// When user has scrolled to the bottom of the description, remove the disabled attribute
jQuery( "#wpforms-3658-field_14 input" ).removeAttr( "disabled" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_tos_confirmation', 30 );
Este fragmento examinará la descripción del campo Casilla de verificación usando el div#wpforms-3658-field_14-description. Nuestro ID de formulario es 3658 y nuestro ID de campo para el campo Casilla de verificación es 14. Luego, establecerá dos atributos en este campo: readonly y overflow-y, scroll. Hacemos esto para poder calcular la posición de desplazamiento de la descripción y así sabremos cuándo nuestros visitantes se desplazan hasta el final de nuestro descargo de responsabilidad.
La siguiente sección del fragmento agregará un atributo disabled al campo Casilla de verificación usando el ID de campo de #wpforms-3658-field_14 input.
A medida que el usuario se desplaza por el descargo de responsabilidad, calcularemos la posición del desplazamiento; cuando llegue a 0, será cuando eliminaremos el atributo disabled y nuestros visitantes podrán hacer clic en la Casilla de verificación para aceptar.
A medida que sus visitantes vean su formulario, no podrán aceptar la casilla de verificación de su descargo de responsabilidad hasta que se hayan desplazado hasta el final del descargo de responsabilidad.
¡Y eso es todo! ¿Le gustaría contar las selecciones de casillas de verificación dentro de su formulario? Eche un vistazo a nuestro artículo sobre Cómo contar las selecciones de casillas de verificación dentro de su formulario.
Relacionado
Referencia de acción: wpforms_wp_footer_end