So erlauben Sie den Datumsauswähler für Konversationsformulare

Einleitung

Möchten Sie den Datumsauswähler für Konversationsformulare zulassen? Standardmäßig zeigen die Konversationsformulare nur ein Datumsfeld an, das die manuelle Eingabe des Datums im Zahlenformat akzeptiert.

Wenn Sie einen kleinen PHP-Snippet hinzufügen, können Sie das Datumsauswähler-Popup in einem Konversationsformular anzeigen lassen, und in diesem Tutorial führen wir Sie Schritt für Schritt durch.

Erstellung des Formulars

Zuerst erstellen wir unser Formular und fügen unser Datumsauswähler-Feld sowie die anderen Felder hinzu, die wir in unserem Formular haben möchten.

Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, sehen Sie bitte diese Dokumentation.

Konversationsformulare aktivieren

Klicken Sie während der Bearbeitung des Formulars auf Einstellungen. Navigieren Sie dann zur Registerkarte Konversationsformulare und aktivieren Sie das Kontrollkästchen, um Konversationsformularmodus aktivieren.

Wenn Sie Hilfe bei der Verwendung des Konversationsformulare-Addons benötigen, lesen Sie bitte diese Dokumentation.

Stellen Sie sicher, dass Sie auf dieser Registerkarte alle anderen notwendigen Änderungen vornehmen, die Sie für Ihr Formular wünschen, und klicken Sie dann auf Speichern.

Hinzufügen des Snippets für das Datumsauswähler-Popup

Jetzt ist es an der Zeit, den Code-Snippet hinzuzufügen, der es dem Datumsauswähler ermöglicht, in Ihrem Formular zu erscheinen.

Kopieren und fügen Sie diesen Snippet einfach auf Ihre Website ein. Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, sehen Sie bitte dieses Tutorial.

/**
 * Load Flatpicker script and stylesheet on Conversational Forms
 *
 * @link https://wpforms.com/developers/how-to-allow-the-date-picker-inside-conversational-forms/
 */
 
function wpf_dev_enqueue_scripts() {
      
        // Load the javascript file for flatpickr
    wp_enqueue_script(
        'wpforms-flatpickr',
        WPFORMS_PLUGIN_URL . 'assets/lib/flatpickr/flatpickr.min.js',
        array( 'jquery' ),
        '4.6.9',
        true
    );
     
        // Load the stylesheet for flatpickr
    wp_enqueue_style(
        'wpforms-flatpickr',
        WPFORMS_PLUGIN_URL . 'assets/lib/flatpickr/flatpickr.min.css',
        array(),
        '4.6.9'
    );
     
}
add_action( 'wpforms_wp_footer', 'wpf_dev_enqueue_scripts', 100 );


/**
 * Scroll to next input when selecting date
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
 */
 
function wpf_cf_datepicker_scroll( $forms ) {
	
	foreach ( $forms as $form ) {
		// Only run if conversational form
        if ( ! empty( $form[ 'settings' ][ 'conversational_forms_enable' ] ) ) {
            ?>
            <script type="text/javascript">
				window.wpforms_datepicker = {
					disableMobile: true,
					// Skip to next input when date is selected, except when it is date / time format
					onValueUpdate: function(selectedDates, dateStr, instance) {
						if ( ! jQuery(instance.input).parents( '.wpforms-field-row-block' ).length ) {
							window.WPFormsConversationalForms.scroll.next();	
						}
					},
				}
			</script>
            <?php
        }
    }
}
add_action( 'wpforms_wp_footer_end', 'wpf_cf_datepicker_scroll', 10 );

Dieser Snippet durchsucht die WPForms-Dateiverzeichnisse, um die JavaScript-Dateien (für die Funktionalität) sowie die CSS-Dateien (für das Styling) zu finden und zu laden, die benötigt werden, um das Popup für den Datumsauswähler beim Anzeigen Ihres Formulars bereitzustellen.

Wenn Ihre Besucher das Formular besuchen, sehen sie nun das Datumsauswähler-Popup.

Und das ist alles, was Sie benötigen, um einen Datumsauswähler für Konversationsformulare zu ermöglichen. Möchten Sie Ihre eigene Stylesheet für Konversationsformulare verwenden? Schauen Sie sich unser Tutorial an So binden Sie eine Stylesheet für Konversationsformulare ein.

Verwandt

Aktionsreferenz: wpforms_wp_footer