So ändern Sie den Stil eines WordPress-Kontaktformulars

Möchten Sie den Stil Ihres WordPress-Kontaktformulars ändern? Dann ist dieser Ratgeber genau das Richtige für Sie! Sie erfahren, wie das Gestalten von WordPress-Formularen super einfach sein kann! Finde mehr heraus.

Ungefähre Lesezeit : 6 Minuten

Sie haben nur eine Chance, einen ersten Eindruck zu hinterlassen.

Und die Aufmerksamkeit Ihrer Besucher mit einer schönen Form zu gewinnen, ist eine Möglichkeit, einen hervorragenden Eindruck zu hinterlassen.

Es ist auch der perfekte Weg, um sie dazu zu bringen, Ihr Formular auszufüllen. Wie können sie es schließlich ausfüllen, wenn sie es nicht sehen?

Wenn Sie also bereit sind, mit Ihren Formularen von einfach zu schön zu werden, ist dieser Leitfaden genau das Richtige für Sie.

Wir zeigen Ihnen zwei Möglichkeiten, wie Sie den Stil Ihres WordPress-Kontaktformulars ganz einfach ändern können!

Lassen Sie uns darauf eingehen.

So ändern Sie den Stil Ihres WordPress-Kontaktformulars

Wie bereits erwähnt, gibt es zwei Möglichkeiten, den Stil Ihres Formulars anzupassen

Welche Sie wählen, hängt von Ihrem Komfortniveau beim Codieren ab. Aber wir zeigen Ihnen beide Methoden, damit Sie alle verfügbaren Optionen kennen.

Methode 1: Bearbeiten Sie den Code Ihres Formulars in WordPress

Sie wollen also kopfüber in die Codierungsgewässer eintauchen, oder?

Wir gehen davon aus, dass Sie bereits ein Formular erstellt haben und es anpassen möchten. Wenn Sie kein Formular haben, gehen Sie zu unserem Leitfaden zum Erstellen eines Formulars, um loszulegen.

Schritt 1: Rufen Sie die ID oder Klasse Ihres Formulars ab

Zunächst müssen Sie die ID oder Klasse Ihres Formulars abrufen.

Eine einfache Möglichkeit, dies zu tun, besteht darin, zu Ihrer Website zu gehen, mit der rechten Maustaste auf Ihr Formular zu klicken und auf Prüfen zu klicken. Hier sehen wir die Formular-HTML-Vorlage in Ihrem untergeordneten Design.

Die Seitenleiste der Google-Entwicklertools wird herausgeschoben, und Sie können die verschiedenen Codeabschnitte für Ihr Formular anzeigen.

Das Wichtigste ist, den Bereich zu finden, den Sie anpassen möchten, und die ID oder den Klassennamen im Auge zu behalten. Sie werden dies verwenden, um Änderungen vorzunehmen.

Wenn wir beispielsweise die Hintergrundfarbe unserer Formularvorlage „Kontakt“ ändern wollten, würden wir den äußersten Codeabschnitt finden. In diesem Fall ist es ein div mit die Klasse api-form-box .

Wir können sogar testen, wie es von dieser Konsole aus aussehen würde.

Wenn wir mit der rechten Maustaste auf das div klicken und auf Attribut hinzufügen klicken, können wir einen Hintergrundfarbstil hinzufügen.

Drücken Sie die Eingabetaste, und die Änderungen werden sofort im Fenster angezeigt.

Aber keine Sorge. Jedes Mal, wenn Sie die Seite aktualisieren, wird das Formular wieder normal.

Gehen Sie als Nächstes in Ihren WordPress-Adminbereich, um die erforderlichen CSS-Code-Änderungen vorzunehmen.

Schritt 2: Ändern Sie das CSS in Ihrem WordPress-Admin-Panel

Nachdem Sie sich nun einige Dinge notiert haben, die Sie in unserem Formular ändern möchten, gehen Sie zu Ihrem WordPress-Adminbereich, um zu beginnen.

Wählen Sie als Nächstes in Ihrer WordPress-Seitenleiste Aussehen → Anpassen → Zusätzliches CSS, um das Formular zu gestalten.

Hier können Sie die CSS-Klassen für Ihr Formular eingeben.

Zum Beispiel haben wir beschlossen, ein paar Dinge in unserem Formular zu ändern, also hier ist der Code, den wir eingegeben haben:

Um eine Klasse zu taggen, müssen Sie eine . vor dem Klassennamen. Für eine ID setzen Sie ein # .

Wenn Sie jedoch diese Methode verwenden, empfehlen wir Ihnen, mehr über CSS-Regeln zu erfahren, um Ihre Änderungen besser zu verstehen.

Für unser Beispiel würde es wie folgt aufschlüsseln:

• .api-form-box ändert die Hintergrundfarbe auf hellblau
• .frm-button-submit ändert den Hintergrund des Submit-Buttons auf gelb und den Text auf schwarz
• .frm-submit zentriert die Schaltfläche im Formular

Mit diesen Änderungen würde unser Formular wie folgt aussehen:

Von hier aus ist Ihre Macht unbegrenzt. Sie können Ihr Formular nach Belieben anpassen, wenn Sie wissen, wie man CSS verwendet.

Es gibt jedoch einige Nachteile dieser Methode.

Ein Update könnte das Design Ihres Formulars beschädigen und dazu führen, dass Sie es erneut tun. Ganz zu schweigen davon, dass es zeitaufwändig ist. Wenn Sie mehrere Kontaktformulare haben, müssen Sie den HTML-Code bearbeiten und jedem benutzerdefiniertes CSS hinzufügen.

Aber wenn Sie etwas Einfacheres und Unzerbrechliches wollen, empfehlen wir Ihnen, die folgende Methode auszuprobieren.

Methode 2: Verwenden Sie einen Formularersteller mit einem visuellen Styler

Codieren ist eine Fähigkeit, die Zeit zum Erlernen braucht.

Und vielen Menschen fehlt die Zeit zum Lernen. Wenn Sie das sind, ist ein Formularersteller die beste Option.

Und eines, das wir empfehlen, ist Formidable Forms .

Es ist das fortschrittlichste WordPress-Formularerstellungs-WordPress-Plugin, was bedeutet, dass die Formularerstellung einfach und zeitsparend ist, sodass Sie mehr Zeit für andere Bereiche Ihrer Website haben.

Unabhängig von der Art des Formulars auf Ihrer Website kann Formidable alles schnell bearbeiten.

Kein Programmieren, kein Ärger – einfach Formularerstellung.

Es stehen andere Formularersteller zur Auswahl (WPForms, Gravity Forms und mehr), aber sie bieten nicht die Styling-Fähigkeiten, die mit Formidable geliefert werden. Und das bedeutet, dass Sie mehr Einfluss darauf haben, wie Ihr Formular aussieht.

Wir empfehlen, sich auch die Premium-Pläne von Formidable anzusehen.

Obwohl sie nicht erforderlich sind, um Ihr Formular zu gestalten, erhalten Sie viele großartige Funktionen:

• Zugriff auf Formularentwurfsvorlagen
• Möglichkeit, Ihr Hintergrundbild anzupassen
• Weitere Formularvorlagen, um Ihr Formular schneller zu starten
• Und vieles mehr

Sobald Sie also Formidable installiert und aktiviert haben, können Sie loslegen.

Holen Sie sich jetzt Formidable Forms!

Es sind nur drei einfache Schritte, um Ihr Formular zu gestalten und auf Ihrer Website live zu schalten:

1. Erstellen Sie ein Formular
2. Gestalten Sie das Formular
3. Zeigen Sie das Formular an

Schritt 1: Erstellen Sie ein Formular

Um ein Formular zu gestalten, brauchen Sie ein Formular zum Gestalten, richtig?

Gehen Sie also zu Ihrem WordPress-Adminbereich und gehen Sie zu Formidable → Forms → Add New .

Sie können eine unserer vielen vorgefertigten Vorlagen (Premium-Funktion) oder ein leeres Formular auswählen, um loszulegen.

Geben Sie als Nächstes Ihrem Formular einen Namen und klicken Sie auf Erstellen .

Das Plugin führt Sie zu seinem Drag-and-Drop-Builder, wo Sie Ihr Formular einfach bearbeiten können.

Fügen Sie beliebige Formularfelder hinzu, passen Sie die Feldbeschriftungen an, ändern Sie den Eingabetyp und mehr über das Seitenleistenmenü.

Wenn Sie ein Kontaktformular erstellen, fügen Sie am besten Folgendes hinzu:

• Textfeld für den Namen des Besuchers
• E-Mail für eine Möglichkeit, sie zu kontaktieren
• Absatz für eine Nachricht, die sie hinzufügen möchten

Sobald Ihr Kontaktformular eingerichtet ist, klicken Sie auf Aktualisieren , um Ihre Änderungen zu speichern.

Dann gehen wir zur Registerkarte Stil .

Schritt 2: Gestalten Sie das Formular

Auf der Registerkarte Stil sehen Sie einige Optionen.

Sie können eine unserer vorgefertigten Designvorlagen auswählen, um Zeit zu sparen (Premium), oder mit der Gestaltung Ihrer eigenen beginnen.

Um Ihren eigenen zu entwerfen, klicken Sie auf die drei Punkte neben Formidable Style und dann auf Bearbeiten . Der Formidable-Stil ist der Standardstil in Formidable.

Dadurch gelangen Sie zu unserem Formidable Style Designer, wo Sie Ihr Formular anpassen können.

Sie können die Größe und Farbe Ihrer Beschriftungen, Eingabefelder, Schriftgröße und Hintergrundfarbe ändern und sogar ein Hintergrundbild hochladen!

Für eine Testwebsite namens Cheap n' Cheesy haben wir beispielsweise ein Formular entworfen, das das Unternehmen widerspiegelt:

Die Möglichkeiten für Sie und Ihr Kontaktformular sind endlos!

Klicken Sie also auf Aktualisieren , um Ihre Änderungen zu speichern, nachdem Sie Ihr Formular angepasst haben.

Jetzt müssen wir es nur noch angezeigt bekommen!

Schritt 3: Zeigen Sie das Formular an

Das Anzeigen Ihres Formulars ist noch einfacher als das Erstellen.

Gehen Sie zuerst zu dem Beitrag oder der Seite, auf der Sie Ihr Formular anzeigen möchten, und fügen Sie einen neuen WordPress-Block hinzu.

Suchen Sie als Nächstes nach dem Formidable Forms- Block, fügen Sie ihn hinzu und wählen Sie Ihr Formular aus dem Dropdown-Menü aus.

Aktualisieren Sie zuletzt Ihren Beitrag oder Ihre Seite, und Ihr Formular wird auf Ihrer Seite live angezeigt!

Wir haben Ihnen gesagt, dass es einfach ist, wie bei allem bei Formidable.

Holen Sie sich jetzt Formidable Forms!

Sind Sie bereit, WordPress-Kontaktformulare auf Ihrer Website zu gestalten?

Die Möglichkeit, Kontaktformulare zu gestalten, ist etwas, das Sie brauchen , nicht wollen.

Möglicherweise sehen Sie Suchen nach dem Contact Form 7-Plug-in, die deren Anpassung beinhalten. Dinge wie Contact Form 7 CSS, Texteingabe in WPCF7 oder E-Mail-Eingabe mit WPCF7.

Nichts davon ist bei diesen beiden Methoden notwendig. Und in diesem Beitrag haben Sie gelernt, wie Sie ein Kontaktformular in WordPress anpassen, damit Ihr Formular so aussieht, wie Sie es möchten. Egal, ob Sie benutzerdefiniertes HTML, CSS und mehr eingeben oder sich für Formidable Forms entscheiden. Sie werden nicht enttäuscht sein.

Warten Sie also nicht länger. Holen Sie sich Formidable Forms und beginnen Sie mit der Gestaltung Ihrer Formulare!

Und folgen Sie uns auf Facebook, Twitter und YouTube für weitere tolle Formtipps und Tricks!

Lesen Sie mehr im Formidable-Blog

• Beeindruckende Formulare 6.0! Stilvorlagen, Bestätigungsformularaktion + mehr
  Weiterlesen

  Jotform vs. Typeform vs. Formidable Forms [im Vergleich]
  Weiterlesen

  So verwenden Sie ein WordPress-Kontaktformular zur Weiterleitung nach dem Absenden
  Weiterlesen

Wussten Sie, dass Formidable Forms eines der schnellsten WordPress-Formularerstellungs-Plugins ist, die heute verfügbar sind? Wenn Sie es noch nicht verwenden, beginnen Sie mit unserem kostenlosen Plugin oder der voll ausgestatteten Pro-Version!