KI-Zusammenfassung
Möchten Sie Ihren WPForms-Feldern Material Design hinzufügen? Diese Art von Design ist eine sehr beliebte Methode, um Ihren Formularfeldern ein modernes und klares Aussehen zu verleihen. Mit einem kleinen PHP-Snippet und CSS können Sie diesen Look ganz einfach auf Ihre WPForms anwenden.
In diesem Tutorial führen wir Sie Schritt für Schritt durch, wie Sie dies erreichen.
Erstellen Ihres Formulars
Zuerst müssen Sie Ihr Formular erstellen und die gewünschten Felder hinzufügen. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte dieses Tutorial.
Für dieses Tutorial erstellen wir nur ein einfaches Feedback-Formular. Unser Beispiel enthält die Formularfelder Name, E-Mail, Betreff und Absatztext.
Es ist wichtig zu bedenken, dass sich unser Tutorial darauf konzentriert, diese Art von Design nur auf Felder anzuwenden, die eine direkte Texteingabe akzeptieren. Das Hinzufügen dieser Art von Design zu allen Formularfeldern hat möglicherweise nicht den gewünschten Effekt, den Sie sich erhoffen. Testen Sie daher zuerst Ihr Formular, um sicherzustellen, dass das Aussehen genau Ihren Vorstellungen entspricht.
Material Design – PHP-Snippet
Als Nächstes fügen wir ein kleines PHP-Snippet hinzu. Wir müssen dies tun, um das Label des Formularfelds von vor das Formularfeld nach hinten zu verschieben.
Wenn Sie Hilfe beim Hinzufügen eines Code-Snippets zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.
Dieses Snippet wird nur für die Formular-ID 697 ausgeführt. Wenn die Formular-ID übereinstimmt, entfernt unsere erste Funktion wpf_dev_display_field_before die PHP-Aktion, die das Feld-Label vor dem Formularfeld anzeigen lässt. Die nächste Funktion erzwingt dann, dass das Label nach dem Formularfeld angezeigt wird.
Material Design – CSS-Snippet
Ihr letzter Schritt ist das Hinzufügen dieses CSS zu Ihrer Website, das den Material Design-Look zu all unseren Formularfeldern hinzufügt.
Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.
Und das ist alles! Sie haben nun den Material Design-Look zu Ihren Formularfeldern hinzugefügt! Wenn Sie andere CSS-Lösungen ausprobieren möchten, werfen Sie einen Blick auf unsere gesamte Styling-Dokumentation.