Anpassen des Adressfelds

Möchten Sie das Layout des Feldes Adresse in Ihrem Formular anpassen? Wir haben das perfekte Tutorial für Sie! Mit ein wenig PHP und etwas CSS erstellen wir ein benutzerdefiniertes Adressschema, das das Feld Bundesland/Kanton aus unserem Formular weglässt, und mit CSS platzieren wir das Feld PLZ/Postleitzahl direkt neben dem Feld Stadt in unserem Formular.

Anpassen des Layouts des Adressfeldes

In diesem Tutorial beginnen wir mit der Erstellung eines benutzerdefinierten Adressschemas, wie in diesem Tutorial beschrieben, das nur die folgenden Felder enthält.

• Adresszeile 1
• Adresszeile 2
• Stadt
• Postleitzahl (für unser PLZ-Feld)

Standardmäßig wird das Formularfeld Postleitzahl/PLZ immer als letztes Feld im Adressbereich des Formulars angezeigt.

/**
 * WPForms Add new address field scheme (Custom)
 *
 * @link   https://wpforms.com/developers/create-additional-schemes-for-the-address-field/
 */
 
function wpf_dev_new_address_scheme( $schemes ) {
 
    $schemes[ 'custom' ] = array(
        'label' => 'Custom',
        'address1_label' => 'Address Line 1',
        'address2_label' => 'Address Line 2',
        'city_label' => 'City',
        'postal_label' => 'Code Postal',
    );
 
    return $schemes;
 
}
 
add_filter( 'wpforms_address_schemes', 'wpf_dev_new_address_scheme', 10, 1);

Erstellung des Formulars

Nachdem nun das benutzerdefinierte Adressschema mit unserem Snippet erstellt wurde, ist es an der Zeit, unser Formular zu erstellen. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte diese Hilfedokumentation.

Unser Formular erfasst nur einige grundlegende Informationen, darunter ein Feld Adresse.

Auswahl des Adressschemas

Nachdem Sie Ihre Adresse hinzugefügt haben, wählen Sie das neue Adressschema aus dem Dropdown-Menü auf der Registerkarte Allgemein aus, das wir im Snippet erstellt haben.

Hinzufügen des CSS

Nun ist es an der Zeit, das CSS zu unserer Website hinzuzufügen, das das Feld Postleitzahl in dieselbe Zeile wie das Feld Stadt zieht.

Wenn Sie Hilfe beim Hinzufügen Ihres CSS benötigen, lesen Sie bitte diesen Artikel.

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) {
    float: left;
    max-width: 50%;
    width: 50%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) {
    float: left;
    max-width: 50%;
    width: 50%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half.wpforms-first {
    padding-right: 1%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half, 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half {
    max-width: 100%;
    width: 100%;
}

Es ist wichtig zu beachten, dass wir nur die Formular-ID 2453 und die Feld-ID 9 ansprechen. Sie müssen diese IDs an Ihre eigenen anpassen. Hilfe beim Finden Ihrer IDs finden Sie in unserer hilfreichen Dokumentation.

Möchten Sie den Stil des Feldes Abschnittstrenner mit CSS anpassen? Lesen Sie diesen Artikel über Anpassen des WPForms-Abschnittstrenners mit CSS.

Referenzfilter

wpforms_address_schemes

FAQ

F: Wie kann ich die Position von Stadt und Postleitzahl ändern?

A: Um Ihr Feld Postleitzahl vor das Feld Stadt zu setzen, verwenden Sie stattdessen dieses CSS.

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) {
    float: right;
    max-width: 50%;
    width: 50%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) {
    float: left;
    max-width: 50%;
    width: 50%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half.wpforms-first {
    padding-right: 1%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half, 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half {
    max-width: 100%;
    width: 100%;
}

F: Wie zeige ich nur das Feld für die Postleitzahl an?

A: Wenn Sie nur ein Feld für die Postleitzahl haben möchten, könnten Sie alle anderen Felder mit CSS ausblenden. Wenn Sie jedoch nur die Postleitzahl erfassen möchten, wäre die einfachste Lösung, Ihrem Formular ein Feld Zahlen hinzuzufügen, um diese Informationen zu sammeln.

F: Kann ich die anderen Felder komplett neu organisieren?

A: Absolut, da es jedoch so viele verschiedene Variationen für ein Adressfeld geben kann, werden wir nicht jedes spezifische Szenario abdecken. Aber Sie können sich gerne an unseren WPForms VIP Circle wenden, um spezifische Hilfe zu erhalten.