So füllen Sie Felder im selben Formular vorab aus

Möchten Sie Formularfelder mit Werten aus anderen Feldern desselben Formulars vorab ausfüllen? Mit JavaScript können Sie dies erreichen. In dieser Anleitung führen wir Sie durch den Prozess der Erstellung Ihres Formulars und der Einbindung eines Snippets, das den Namensfeld von Seite eins des Formulars extrahiert und das Namensfeld auf Seite zwei desselben Formulars automatisch vorab ausfüllt.

Erstellung des Formulars

Für dieses Tutorial erstellen wir ein mehrseitiges Formular, das auf beiden Seiten des Formulars ein Namensfeld hat.

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

Felder vorab ausfüllen

Um Felder im selben Formular vorab auszufüllen, müssen wir diesen Codeausschnitt zu unserer Website hinzufügen.

Wenn Sie Hilfe benötigen, wie und wo Sie Codeausschnitte zu Ihrer Website hinzufügen können, sehen Sie sich dieses Tutorial an.

/**
 * Populate fields in the same form
 *
 * @link https://wpforms.com/developers/how-to-pre-populate-fields-in-the-same-form/
 */

function wpf_dev_name_change() {
    ?>
    <script>
        jQuery(function($){

			// Define form and field IDs
			var formID = 1386;
            var nameField1 = 0; // ID of the field to grab name from
            var nameField2 = 13; // ID of the field to pass value to

			// Check if form and fields exist before manipulating
			if ($('#wpforms-' + formID).length && $('#wpforms-' + formID + '-field_' + nameField1).length && $('#wpforms-' + formID + '-field_' + nameField2).length) {
				// Update value for nameField2 when nameField1 changes
				$('#wpforms-' + formID + '-field_' + nameField1).on('change', function() {
					$('#wpforms-' + formID + '-field_' + nameField2).val($(this).val());
				});
			} else {
				console.error('Form or field does not exist.');
			}

        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_name_change', 10 );

Der obige Codeausschnitt wird nur für die Formular-ID 1072 ausgeführt und nimmt den Wert aus dem ersten Namensfeld (Feld-ID 1) und füllt das zweite Namensfeld auf Seite zwei des Formulars (Formular-ID 16) vorab aus.

Sie müssen diese IDs aktualisieren, um Ihre eigenen IDs für Ihr Formular und Ihre Felder anzupassen. Wenn Sie Hilfe beim Finden dieser IDs benötigen, sehen Sie sich dieses Tutorial an.

Und das ist alles, was Sie brauchen! Möchten Sie auch mehr über die Verwendung von Query-Strings erfahren, um dies zu erreichen? Sehen Sie sich unser Tutorial an: Verwendung von Query-Strings zum Vorabfüllen von Formularfeldern aus einem anderen Formular.

Referenzaktion

wpforms_wp_footer_end

FAQ

F: Kann ich mehrere Felder in einer Funktion hinzufügen?

A: Sie können so viele Felder hinzufügen, wie Sie möchten, innerhalb dieser einen Funktion. Ein Beispiel wäre das Vorabfüllen der Felder Name, E-Mail und Telefon.

/**
 * Populate fields in the same form
 *
 * @link https://wpforms.com/developers/how-to-pre-populate-fields-in-the-same-form/
 */

function wpf_dev_name_change() {
    ?>
    <script>
        jQuery(function($){

			// Define form and field IDs
			var formID = 1072;
            var nameField1 = 1; // ID of the name field on page 1
            var nameField2 = 16; // ID of the name field on page 2
            var emailField1 = 2; // ID of the email field on page 1
            var emailField2 = 19; // ID of the email field on page 2
            var phoneField1 = 5; // ID of the phone field on page 1
            var phoneField2 = 29; // ID of the phone field on page 2
			
			// Function to set the value of a field on page 2 based on the value of a field on page 1
			function setFieldValue(field1, field2) {
				$( `#wpforms-${formID}-field_${field1}` ).on('change', function() {
					$( `#wpforms-${formID}-field_${field2}` ).val($(this).val());
				});
			}
			
			// Check if form and fields exist before manipulating
			if ($('#wpforms-' + formID).length) {
				// Set the name field from page 1 to page 2
				setFieldValue(nameField1, nameField2);
				
				// Set the email field from page 1 to page 2
				setFieldValue(emailField1, emailField2);
				
				// Set the phone field from page 1 to page 2
				setFieldValue(phoneField1, phoneField2);
			} else {
				console.error('Form does not exist.');
			}

        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_name_change', 10 );