KI-Zusammenfassung
Möchten Sie wissen, wie Sie Hintergrundbilder zu Ihren Formularen hinzufügen? Es ist einfach, Ihr Formular mit einem Bild oder Farbverlauf als Hintergrund mit CSS zu gestalten!
Dieses Tutorial zeigt Ihnen, wie Sie ein Hintergrundbild zu Ihrem Formular hinzufügen.
In diesem Artikel
Hinweis: Die Schritte in diesem Tutorial erfordern das Hinzufügen einer CSS-Klasse zu Ihrer Website. Wenn Sie einen einfacheren Ansatz bevorzugen, der das Hinzufügen von benutzerdefiniertem CSS nicht beinhaltet, lesen Sie unser Tutorial zum Verwenden von Formularvorlagen, um mehr zu erfahren.
1. Auswahl eines Hintergrundbildes
Sie müssen ein Bild auswählen, das als Hintergrund Ihres Formulars verwendet werden soll, um zu beginnen. Sie können jedes Bild aus Ihrer Mediathek oder von überall im Internet verwenden, auf das Ihre Website zugreifen kann.
Zu berücksichtigende Aspekte
Stellen Sie für maximale Lesbarkeit sicher, dass ein ausreichender Kontrast zwischen dem Hintergrundbild und jeglichem Text oder Feldern in Ihrem Formular besteht.
Vermeiden Sie beispielsweise hellen Text auf einem hellen Hintergrund. Verwenden Sie stattdessen dunkleren Text auf helleren Hintergründen und helleren Text auf dunklen Hintergründen.
2. Auswahl eines Formulars
Wählen Sie als Nächstes das Formular aus, das Sie anpassen möchten. Wenn Sie noch ein Formular erstellen müssen, fügen Sie ein neues hinzu, indem Sie auf WPForms » Neu hinzufügen klicken.
Sie können aus einer der vielen verfügbaren Formularvorlagen auswählen, um zu beginnen.
Wenn keine der Standardvorlagen Ihren Anforderungen entspricht, können Sie trotzdem eine ähnliche Vorlage auswählen und sie im Formular-Generator anpassen.
3. Hinzufügen eines Hintergrundbildes zu Ihrem Formular
Gehen Sie im Formular-Generator zu Einstellungen » Allgemein » Erweitert.
Geben Sie hier unter Formular-CSS-Klasse einen Klassennamen ein. Sie können Ihrer Klasse jeden Namen geben, aber wir empfehlen, wpf- als Präfix hinzuzufügen. Dies hilft, Konflikte zwischen Ihrem benutzerdefinierten CSS-Code und Themes oder Plugins auf Ihrer Website zu vermeiden.
Hinweis: Um Probleme zu vermeiden, stellen Sie sicher, dass Ihr Klassenname mit einem Buchstaben beginnt. Denken Sie auch daran, dass Klassennamen in CSS Groß- und Kleinschreibung beachten. Weitere Informationen finden Sie in unserem Einführungsleitfaden für Styling und den Tutorials zum Hinzufügen von Klassen zu WPForms.
Verwenden eines vorhandenen Bildes
Wenn Sie ein Bild aus Ihrer Mediathek verwenden möchten, benötigen Sie die vollständige Bild-URL. Um diese zu erhalten, gehen Sie zuerst zu Medien » Bibliothek im WordPress-Admin-Dashboard.
Klicken Sie hier auf das Bild, das Sie verwenden möchten.
Klicken Sie im sich öffnenden Dialogfeld auf URL in die Zwischenablage kopieren.
Dadurch wird die Bild-URL in Ihre Zwischenablage kopiert.
Hinweis: Für Bilder aus anderen Quellen im Internet kopieren Sie die URL, indem Sie mit der rechten Maustaste auf das Bild klicken und Bildadresse kopieren auswählen.
Der angezeigte Menütext kann je nach gewähltem Browser leicht variieren. Er erfüllt jedoch dieselbe Funktion wie das Klicken auf URL in die Zwischenablage kopieren in der Mediathek.
Sobald Sie dies getan haben, kehren Sie zum WordPress-Admin-Dashboard zurück und gehen Sie zu Design » Anpassen, dann wählen Sie Zusätzliches CSS.
Erstellen Sie als Nächstes eine benutzerdefinierte Klasse mit der Eigenschaft background-image und fügen Sie die zuvor kopierte URL ein.
Wir haben unten ein Beispiel für eine solche Klasse geschrieben. Denken Sie daran, /path/wpforms-backdrop.png durch die tatsächliche URL Ihres Bildes zu ersetzen.
Ihre Einstellungen sollten ungefähr so aussehen.
Wenn Sie sicher sind, dass Ihr Code korrekt ist, klicken Sie auf Veröffentlichen, um Ihre Änderungen zu speichern.
Wenn keine Fehler in Ihrem Code vorhanden sind, hat Ihr Formular jetzt ein Hintergrundbild. Hier ist ein Beispielformular, das den obigen Code verwendet:
Verwendung eines Farbverlaufs als Hintergrundbild
Mit CSS können Farbverläufe als Bilder verwendet werden, und diese Lösung funktioniert auch mit Ihren Formularen. Farbverläufe sind umfassend anpassbar und können beliebig viele Farben verwenden.
Da Farbverläufe automatisch generiert werden, benötigen Sie kein Quellbild aus Ihrer Mediathek oder von anderswo im Internet. Dies bietet den Vorteil einer erhöhten Geschwindigkeit und Einzigartigkeit. Sie müssen sich auch keine Sorgen machen, dass das Quellbild verloren geht.
Es gibt drei Arten von Farbverläufen, die in CSS verfügbar sind:
konische-Verlaufsform()linear-gradient()radiale-Verlaufsform()
Hinweis: Wenn Sie mehr über die Verwendung von Farbverläufen in CSS erfahren möchten, empfehlen wir Ihnen, diese Seite im Mozilla Developer Network zu lesen.
In diesem Beispiel zeigen wir Ihnen, wie Sie einen einfachen, linearen Farbverlauf als Hintergrund für Ihr Formular verwenden. Schreiben Sie einfach Ihre Klasse wie zuvor, aber anstatt eine URL zu verwenden, verwenden wir die CSS-Funktion linear-gradient().
Um zu sehen, wie das funktioniert, sehen Sie sich das folgende Codebeispiel an:
.wpf-custom-background {
background-image: linear-gradient(#0299ed, #FFFFFF) !important;
/*Padding isn't necessary, but highly recommended*/
padding: 15px 35px !important;
}
Dies erzeugt einen sanften Blau-zu-Weiß-Farbverlauf als Hintergrundbild für Ihr Formular:
Hinweis: Wenn Sie lieber eine codefreie Lösung zur Generierung Ihrer Farbverläufe verwenden möchten, können Sie Online-Ressourcen nutzen, wie z. B. CSS Gradient (cssgradient.io).
Häufig gestellte Fragen
Unten haben wir einige der häufigsten Fragen zum Hinzufügen eines Hintergrundbilds zu Formularen beantwortet.
Wie füge ich meinen Formularen, die das Add-on Conversational Forms verwenden, ein Hintergrundbild hinzu?
Wenn Sie ein Hintergrundbild mit der oben beschriebenen Methode hinzufügen, wird es nicht auf das Formular angewendet. Dies liegt daran, dass Konversationsformulare eine andere Styling-Option verwenden.
Um einem Formular, das das Conversational Forms Add-on verwendet, ein Hintergrundbild hinzuzufügen, müssen Sie den CSS-Selektor #wpforms-conversational-form-page verwenden. Hier ist ein Beispielcode. Stellen Sie sicher, dass Sie den Pfad in der url()-Eigenschaft durch das tatsächliche Bild ersetzen, das Sie verwenden möchten.
#wpforms-conversational-form-page {
background-image: url(/path/wpforms-backdrop.png) !important;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
}
Das ist alles! Jetzt wissen Sie, wie Sie Ihren Formularen in WPForms ein Hintergrundbild hinzufügen.
Möchten Sie als Nächstes erfahren, wie Sie Ihre Formulare ohne Code gestalten können? Sehen Sie sich unseren Leitfaden zur Anpassung von WPForms mit CSS Hero an.