KI-Zusammenfassung
Einleitung
Möchten Sie nach dem Lesen einer Haftungsausschluss- oder Nutzungsbedingungen-Erklärung eine Checkbox aktivieren? Erfahren Sie, wie Sie das Potenzial der Funktion Haftungsausschluss-/Nutzungsbedingungen-Anzeige aktivieren für Checkbox-Felder nutzen können. Diese Funktion ermöglicht es Benutzern, ihre Zustimmung zu Ihren Nutzungsbedingungen auszudrücken. Wenn Sie jedoch dieses Feld deaktivieren möchten, bis Benutzer Ihren Haftungsausschluss vollständig durchgelesen haben, ist dieses Tutorial genau das Richtige für Sie!
Erstellen des Formulars
Beginnen Sie mit der Erstellung Ihres Formulars und dem Hinzufügen Ihrer Felder. Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, lesen Sie bitte diese nützliche Anleitung.
Nutzungsbedingungen aktivieren
Nachdem Sie Ihre anderen Felder hinzugefügt haben, fügen Sie ein Checkbox-Feld hinzu und klicken Sie auf die Registerkarte Erweitert. Auf dieser Registerkarte sehen Sie die Option Haftungsausschluss-/Nutzungsbedingungen-Anzeige aktivieren. Schalten Sie diese Option ein und fügen Sie Ihren Text in das Feld Beschreibung ein.
Nach der Aktivierung klicken Sie zurück zur Registerkarte Allgemein, um Ihren Text in die Beschreibung einzufügen.
Hinzufügen des Snippets
Nun ist es an der Zeit, den Snippet auf Ihrer Website hinzuzufügen. Anleitungen, wie und wo Sie Snippets zu Ihrer Website hinzufügen können, finden Sie in diesem 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 );
Dieser Snippet betrachtet die Beschreibung des Checkbox-Feldes unter Verwendung der ID div#wpforms-3658-field_14-description. Unsere Formular-ID ist 3658 und unsere Feld-ID für das Checkbox-Feld ist 14. Anschließend werden zwei Attribute auf dieses Feld gesetzt: readonly und overflow-y, scroll. Dies tun wir, um die Scroll-Position der Beschreibung berechnen zu können, damit wir wissen, wann unsere Besucher bis zum Ende unseres Haftungsausschlusses scrollen.
Der nächste Abschnitt des Snippets fügt dem Checkbox-Feld ein Attribut disabled hinzu, unter Verwendung der Feld-ID #wpforms-3658-field_14 input.
Während der Benutzer durch den Haftungsausschluss nach unten scrollt, berechnen wir die Scroll-Position. Wenn diese 0 erreicht, entfernen wir das Attribut disabled und unsere Besucher können dann auf die Checkbox klicken, um zuzustimmen.
Wenn Ihre Besucher Ihr Formular anzeigen, können sie der Haftungsausschluss-Checkbox nicht zustimmen, bis sie bis zum Ende des Haftungsausschlusses gescrollt haben.
Und das ist alles! Möchten Sie die Anzahl der Checkbox-Auswahlen in Ihrem Formular zählen? Werfen Sie einen Blick auf unseren Artikel So zählen Sie Checkbox-Auswahlen in Ihrem Formular.
Verwandt
Aktionsreferenz: wpforms_wp_footer_end