Möchten Sie Felder in Ihrem Formular mit Werten aus anderen Feldern innerhalb desselben Formulars vorbefüllen? Mit JavaScript können Sie dies erreichen. In diesem Leitfaden zeigen wir Ihnen, wie Sie Ihr Formular erstellen und ein Snippet einfügen, das das Feld "Name" von Seite eins des Formulars extrahiert und das Feld "Name" auf Seite zwei desselben Formulars automatisch ausfüllt.
Erstellen des Formulars
In diesem Tutorial erstellen wir ein mehrseitiges Formular, das auf beiden Seiten des Formulars ein Feld "Name" haben wird.
Wenn Sie Hilfe bei der Erstellung eines mehrseitigen Formulars benötigen, lesen Sie bitte diese Dokumentation.
Die Name Feld Format für die Zwecke dieses Tutorials ist auf Einfach. 
Vorbefüllung der Felder
Um Felder im selben Formular vorauszufüllen, müssen wir dieses Snippet zu unserer Website hinzufügen.
Wenn Sie wissen möchten, wie und wo Sie Snippets zu Ihrer Website hinzufügen können, lesen Sie bitte dieses Tutorial.
/**
* 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 );
Das obige Snippet wird nur auf dem Formular ID 1072 ausgeführt und nimmt den Wert, der in das erste Feld Name (Feld ID 1 ) eingegeben wird, und füllt das zweite Feld Name auf Seite 2 des Formulars (Formular ID 16) vor.
Sie müssen diese IDs aktualisieren, damit sie mit Ihren eigenen IDs für Ihr Formular und Ihre Felder übereinstimmen. Wenn Sie Hilfe bei der Suche nach diesen IDs benötigen, sehen Sie sich bitte dieses Tutorial an.
Und das ist alles, was Sie brauchen! Möchten Sie mehr über die Verwendung von Abfragezeichenfolgen erfahren, um auch dies zu erreichen? Sehen Sie sich unser Tutorial über die Verwendung von Query Strings zum Vorbefüllen von Formularfeldern aus einem anderen Formular an.
Referenz Aktion
FAQ
F: Kann ich mehrere Felder in einer Funktion hinzufügen?
A: Sie können so viele Felder wie gewünscht in diese eine Funktion einfügen. Ein Beispiel wäre das Vorbefü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 );