KI-Zusammenfassung
Möchten Sie das Aussehen Ihrer Formular-Buttons ändern?
WPForms ermöglicht es Ihnen, Button-Stile mit den integrierten Styling-Optionen im Block-Editor oder über CSS anzupassen.
Formular-Button-Stile jetzt anpassen!
In diesem Artikel zeigen wir Ihnen, wie Sie Button-Stile mit beiden Methoden anpassen. Sehen Sie, welche für Sie am besten funktioniert!
In diesem Artikel
Anpassen von Button-Stilen in WPForms mit CSS
Bevor wir beginnen, müssen Sie das WPForms-Plugin auf Ihrer Website installieren und aktivieren. Außerdem müssen Sie mindestens ein Formular erstellen. Sehen Sie sich unser Tutorial zum Erstellen eines einfachen Kontaktformulars an, um loszulegen.
Option 1: Seiteweite Anpassung (CSS)
Das Anpassen der Button-Stile Ihrer Formular-Buttons ist ziemlich einfach, sobald Sie den gewünschten CSS-Code haben. Wenn Sie möchten, können Sie einfach eines der untenstehenden Beispiele kopieren und einfügen oder sie sogar kombinieren.
Der Code-Schnipsel muss in Ihren Abschnitt Zusätzliches CSS im Bereich Anpassen eingefügt werden. Dies geschieht durch Navigieren zu Darstellung » Anpassen » Zusätzliches CSS. Klicken Sie dann einfach auf Speichern & Veröffentlichen, und Sie sind fertig.
Eine noch einfachere Methode ist die Verwendung eines Plugins wie WPCode, mit dem Sie verschiedene Arten von Code-Schnipseln zu Ihrer Website hinzufügen können. In diesem Fall müssen Sie nur den CSS-Code für den Button-Stil einfügen, indem Sie auf die Schaltfläche Snippet verwenden klicken.
Schauen wir uns nun ein paar verschiedene Möglichkeiten an, Ihre Formular-Buttons mit CSS zu gestalten.
Erstellen eines Buttons mit transparentem Hintergrund
Möchten Sie einen transparenten Hintergrund für Ihren WPForms-Button erstellen? Transparente Hintergrund-Buttons, auch bekannt als Ghost-Buttons, sind ein beliebter Webdesign-Trend.
Sie werden normalerweise in Formularen und Call-to-Actions verwendet, die über breiten Hintergrundbildern platziert werden. Sehen Sie sich einige Beispiele für transparente Buttons auf verschiedenen Websites an.
Beispiel #1: Transparenter Formular-Button
Beispiel #2: Transparenter Call-to-Action-Button
Um einen Button mit transparentem Hintergrund zu erstellen, müssen Sie nur den folgenden Code-Schnipsel in Ihren Abschnitt Zusätzliches CSS kopieren.
div.wpforms-container-full .wpforms-form button[type=submit] {
color: #0099CC; /* Text color */
background-color: transparent; /* Remove background color */
border: 2px solid #0099CC; /* Border thickness, line style, and color */
border-radius: 5px; /* Adds curve to border corners */
text-transform: uppercase; /* Make letters uppercase */
}
So wird der Button aussehen:
Erstellen eines Buttons mit Farbverlauf
Im Gegensatz zu Ghost-Buttons ist die Verwendung eines Farbverlauf-Buttons kein neuer Trend. Wenn diese mehrfarbigen Farbverlauf-Buttons jedoch am besten zu Ihrer Website passen, können Sie dieser Anleitung folgen.
Da dies mit CSS erfolgt, können Sie ihn problemlos vergrößern oder verkleinern, ohne Auflösungsverluste. Wenn Sie ein Werkzeug zum Erstellen von CSS für Farbverläufe suchen, können Sie den Gradient Editor von ColorZilla verwenden.
Im untenstehenden CSS haben wir browser-spezifische Stile verwendet, um sicherzustellen, dass der Farbverlauf in möglichst vielen verschiedenen Browsern angezeigt wird.
div.wpforms-container-full .wpforms-form button[type=submit] {
border-radius: 30px; /* Curve of border corners */
text-transform: uppercase; /* Make letters uppercase */
color: white; /* Text color */
background: #0099cc; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* Standard syntax */
}
So wird der Button aussehen:
Erstellen eines Buttons mit abgerundeten Ecken
Möchten Sie die Blicke der Benutzer auf die Handlungsaufforderungen lenken? Laut einigen Recherchen verbessern abgerundete Ecken die Informationsverarbeitung und ziehen unsere Augen zum Zentrum des Elements.
Wenn Sie die Aufmerksamkeit der Benutzer auf sich ziehen möchten, sollten Sie Ihre Formular-Konversionsraten testen, indem Sie eine Schaltfläche mit abgerundeten Ecken für Ihr WordPress-Formular erstellen.
div.wpforms-container-full .wpforms-form button[type=submit] {
background-color: #0099CC; /* Blue background color */
border-radius: 30px; /* Curve of border corners */
text-transform: uppercase; /* Make letters uppercase */
color: white; /* Text color */
}
So wird der Button aussehen:
So ersetzen Sie Ihre Schaltfläche durch ein Bild
Die Verwendung einer grafischen Schaltfläche ist wahrscheinlich der einfachste Weg, die Schaltfläche Ihres Formulars anzupassen.
Sie können leicht mehrere grafische Schaltflächen zum Herunterladen und Verwenden auf Stockfoto-Websites finden. Dann können Sie die Schaltfläche Ihres Formulars durch eine grafische Schaltfläche ersetzen.
Stellen Sie sicher, dass Sie die Schaltflächengrafik in den Medien-Uploader hochladen, indem Sie zu Medien » Neu hinzufügen gehen. Ersetzen Sie dann die unten stehende URL durch Ihre Bild-URL:
http://yoursite.com/your-image.jpg
div.wpforms-container-full .wpforms-form button[type=submit] {
background-image: url(http://yoursite.com/your-image.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: transparent; /* Hide the 'submit' text */
border: none; /* Remove the border */
}
So erstellen Sie eine mehrzeilige Schaltfläche
Bevor Ihre Benutzer ihr Formular absenden, werden sie viele Fragen im Kopf haben. Um die Konversionen zu steigern, können Sie diese Fragen mit dem entsprechenden Text in oder um Ihre Schaltfläche beantworten.
Betrachten Sie beim Erstellen einer Schaltfläche für Ihr Formular diese durch die Augen Ihrer Besucher. Es hilft Ihnen, den entsprechenden Text für Ihre Schaltfläche zu schreiben, der auf die Konversion ausgerichtet ist.
In den meisten Fällen müssen Sie, um all diese Details in Ihre Schaltfläche aufzunehmen, eine mehrzeilige Schaltfläche erstellen. Hier erfahren Sie, wie Sie eine mehrzeilige Formularschaltfläche in WPForms erstellen.
div.wpforms-container-full .wpforms-form button[type=submit]:after {
content: 'Second line text'; /* Text for second line of button */
display: block; /* Puts this text on its own line */
font-size: 10px;
margin-top: 5px; /* Add distance from first line of text */
font-weight: normal; /* Remove bold style */
}
So wird der Button aussehen:
Option 2: Individuelle Anpassung eines Button-Stils
Was ist, wenn Sie möchten, dass Ihr neuer Stil nur für ein einzelnes WPForms-Formular verwendet wird, aber nicht für jedes Formular auf Ihrer Website?
Wenn Sie den Schaltflächenstil eines einzelnen Formulars mit CSS ändern möchten, müssen Sie die eindeutige ID Ihres Formulars finden.
Öffnen Sie zuerst eine Seite mit dem Formular, das Sie ändern möchten. Bewegen Sie Ihre Maus zu einem beliebigen Feld im Formular, Rechtsklick » Element untersuchen.
Der Browserbildschirm wird geteilt, und Sie sehen den Quellcode der Seite. Im Quellcode müssen Sie die Startzeile des Formularcodes finden.
Wie Sie in der obigen Bildschirmaufnahme sehen können, beginnt der Code unseres Kontaktformulars mit der Zeile:
div class="wpforms-container wpforms-container-full" id="wpforms-14"
Wir werden diese ID in unserem CSS verwenden, um unser Kontaktformular zu gestalten. Wir werden .wpforms in unserem ersten CSS-Snippet durch #wpforms-14 ersetzen.
Das Attribut id ist ein eindeutiger Bezeichner, der von WPForms für dieses spezielle Formular generiert wird, sodass der Stil nirgendwo anders angewendet wird.
Zum Beispiel können Sie einfach den folgenden Ausschnitt am Anfang des ersten Code-Ausschnitts einfügen.
div#wpforms-14 {background-color: transparent; !important}
Für eine direktere Methode, Ihre Formular-ID zu finden, gehen Sie einfach zu Alle Formulare und suchen Sie die Spalte Shortcode. Dort finden Sie die Formular-ID im Handumdrehen.
Formular-Button-Stile jetzt anpassen!
Anpassen von Button-Stilen ohne CSS
Bevor Sie CSS hinzufügen, überlegen Sie, ob die integrierten Stilsteuerungen in WPForms Ihnen helfen, den gewünschten Schaltflächenstil einfacher zu erreichen.
Dieser Beitrag über das Styling von Kontaktformularen in WordPress erklärt mehr über die No-Code-Formular-Styling-Optionen von WPForms im WordPress-Blockeditor.
Der Vorgang ist einfach. Öffnen Sie ein Formular und klicken Sie im Blockeditor auf das Formular, um zusätzliche Styling-Optionen für den WPForms-Block zu öffnen.
Styling-Optionen für den WPForms-Block
Sie können das Farbschema, Formularfelder, Beschriftungen, Schaltflächen sowie die Container- und Hintergrundstile ändern, ohne CSS in den WPForms-Blockeinstellungen schreiben zu müssen.
Zugriff auf die Button-Stil-Einstellungen
Unter Schaltflächenstile können Sie die Größe, Farbe, den Rahmen, die Rahmengröße, den Radius und den Stil Ihrer Schaltflächen ändern. Hier sind die Optionen, aus denen Sie wählen können.
- Größe: Diese Option gibt der Schaltfläche ihre Größe an. Sie können zwischen Klein, Mittel und Groß wählen.
- Rahmen: Mit dieser Einstellung können Sie Ihren Schaltflächen einen Rahmen geben, der entweder durchgezogen, gestrichelt oder gepunktet ist.
- Rahmengröße: Dies gibt Ihren Schaltflächen an, wie dick ihre Ränder sein sollen. Sie können eine andere Einheit wählen, falls Pixel (px) nicht das sind, was Sie für Ihr Design benötigen.
- Radius: Sie können ändern, wie rund die Ecken Ihrer Schaltflächen sind, um sie weicher oder schärfer aussehen zu lassen. Während Pixel (px) die Standardeinheit sind, können Sie diese an Ihre Designanforderungen anpassen.
Sie können auch die Hintergrund- und Textfarben Ihrer Schaltfläche im Farben-Panel unten ändern.
Formular-Button-Stile jetzt anpassen!
FAQs zum Anpassen von Schaltflächenstilen mit CSS
Das Anpassen von Schaltflächenstilen ist ein beliebtes Thema, das unsere Leser interessiert. Hier sind Antworten auf einige häufig gestellte Fragen dazu:
Wie ändere ich das Styling einer Schaltfläche in CSS?
Um das Aussehen einer Schaltfläche mit CSS zu ändern, können Sie benutzerdefinierte Stile für Eigenschaften wie Hintergrundfarbe, Rahmen, Schriftgröße, Innenabstand und mehr angeben. In WordPress können Sie Ihre CSS-Stile unter Zusätzliches CSS im Customizer einfügen.
Wie kann ich ein Formular mit benutzerdefinierten Schaltflächen erstellen?
Um ein Formular mit benutzerdefinierten Schaltflächen zu erstellen, sollten Sie ein WordPress-Plugin wie WPForms in Betracht ziehen. Es bietet Drag-and-Drop-Tools, um die Formularerstellung zu vereinfachen.
Für benutzerdefinierte Schaltflächenstile gehen Sie zum Abschnitt Zusätzliches CSS in WordPress und geben Sie Ihren CSS-Code ein, wobei Sie die spezifischen Klassenamen der Formulare oder Schaltflächen von WPForms ansprechen.
Wie passe ich meine Sende-Schaltfläche an?
Um Ihre Sende-Schaltfläche in WPForms anzupassen, bearbeiten Sie das Formular, wählen Sie „Sende-Schaltfläche“ und ändern Sie direkt die Textbeschriftung. Verwenden Sie den Block-Editor oder Zusätzliches CSS, um die Stile der Schaltfläche mit benutzerdefinierten Farben, Schriftarten und Größen weiter anzupassen.
Als Nächstes: Erfahren Sie, wie Sie Ihre Anmeldeseite in WordPress anpassen
Jetzt, da Sie wissen, wie Sie Kontaktformulare mit CSS gestalten können, möchten Sie vielleicht einen Blick darauf werfen, wie Sie eine benutzerdefinierte Anmeldeseite für Ihre Website erstellen. Wir haben auch einige Plugin-Übersichten zusammengestellt, die Ihnen helfen, die besten Plugins für das Wachstum Ihrer Website auszuwählen:
- Beste SEO-Plugins
- Beste Social-Media-Plugins
- Beste Backup-Plugins
- Beste E-Mail-Protokoll-Plugins
- Beste TikTok-Plugins
- Beste SMTP-Plugins
Erstellen Sie jetzt Ihr WordPress-Formular
Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formular-Builder-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.
Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.
Wie kann ich eine Mengenfunktion in ein einfaches WP-Formular einfügen?
Ich habe eine Reihe von Shop-Artikeln, die mit einer Checkbox ausgewählt werden können. Ich muss in der Lage sein, jemandem zu erlauben, Mengen von jedem Artikel auszuwählen und diese dann per E-Mail zu übermitteln.
Artikel und Kosten sind in einem Feld. Ich muss nur einen +/- Button neben jedem Artikel hinzufügen können.
Irgendwelche Ideen, wie ich das einfach machen kann?
Danke
Hallo Paul,
Wir haben noch nicht die Möglichkeit, Artikelmengen auf diese Weise einzubeziehen, aber wir haben es auf dem Radar, es später hinzuzufügen!
Wenn Sie bereit sind, eine modifizierte Alternative in Betracht zu ziehen, können Sie das Dropdown-Menü-Feld verwenden, um das zu tun, wonach Sie fragen, auf eine etwas andere Weise – die einfachste Demonstration davon ist, sich das kurze Video hier anzusehen: https://cl.ly/3Y2f3o3q1C0M. Grundsätzlich erstellen Sie für jedes Produkt ein Dropdown-Menü-Feld und füllen die Dropdown-Optionen mit verschiedenen Mengen und den zugehörigen Preisen. Dies ermöglicht es Ihnen, sowohl mehrere Produkte als auch verschiedene Mengen jedes dieser Produkte anzubieten.
Es tut mir leid, dass wir nicht ganz das anbieten können, was Sie suchen, aber ich hoffe, das hilft!
Wenn Sie weitere Fragen dazu haben, können Sie uns gerne im Support kontaktieren 🙂
Das sind alles tolle Beispiele. Aber wie deaktiviert man den Schatten beim Hover? Ich möchte nur einen Button, der reiner Text in fetten Großbuchstaben ist und „SUBMIT“ sagt. Der Text sollte beim Hover und Aktivieren grau werden. Kein Rand, Hintergrund, Schatten…
Hallo Gary,
Unser Submit-Button enthält standardmäßig keinen Schatten. Wenn Sie also einen sehen, wird dieser wahrscheinlich von Ihrem Theme hinzugefügt. Da alle Themes dies etwas anders machen, müssten wir ein eingebettetes Formular sehen, um Ihnen bei der Entfernung zu helfen.
Um all diese anderen Stile zu entfernen, benötigen Sie ein paar zusätzliche Zeilen CSS. Wir haben hier ein Tutorial speziell zur Anpassung des Submit-Buttons, einschließlich Hover-Stilen. Die dort gezeigten Beispiele sollten Sie durch alles führen, was Sie benötigen, um den von Ihnen beschriebenen benutzerdefinierten Look zu erstellen.
Ich hoffe, das hilft! Wenn Sie Fragen haben, lassen Sie es uns bitte wissen! Wir unterstützen alle kostenpflichtigen Lizenzen in unserem privaten Support-Kanal und WPForms Lite in unserem Forum 🙂
Ich habe versucht, den Code für den transparenten Button-Stil in mein Genesis Child Theme zu kopieren und einzufügen, aber er hatte keinerlei Auswirkung auf das Aussehen der Buttons. Warum ist das Ihrer Meinung nach so?
Ich habe die Anweisungen befolgt – Darstellung > Anpassen > Zusätzliches CSS > Speichern.
Danke!
Hallo Toni,
Das ist eine tolle Frage, und die Antwort kann von Website zu Website stark variieren (sogar innerhalb desselben Themes). Ich würde vorschlagen, mit unserem Tutorial Fehlerbehebung bei nicht funktionierendem CSS zu beginnen, das alle häufigsten Probleme und deren Behebung durchgeht.
Wenn Sie das ausprobiert haben und immer noch nicht weiterkommen, können Sie uns gerne im Support kontaktieren, damit wir Ihnen bei der weiteren Fehlerbehebung helfen können 🙂
Ich kann nicht verstehen, warum das nicht funktioniert. Ich habe den Code in den anpassbaren CSS-Bereich eingegeben, aber der Button blieb gleich.
Ich möchte ihn transparent machen, wie im ersten transparenten Beispiel oben, aber es wird einfach nicht übernommen.
Ich hoffe auch, das eigentliche Formular weiter nach unten auf der Seite zu verschieben, aber das scheint auch nicht zu funktionieren.
Hallo Jeremy,
Entschuldigung für die Mühe! Einige Themes erschweren das Anwenden von benutzerdefiniertem CSS, obwohl das Hinzufügen von
!importantnormalerweise hilft. Hier ist ein einfaches Beispiel, wie Sie dies hinzufügen können:div.wpforms-container-full .wpforms-form button[type=submit] { background-color: transparent !important; }Wir haben noch viele weitere Tipps, wie CSS funktioniert, in diesem CSS-Fehlerbehebungs-Tutorial.
Wenn Sie diese Fehlerbehebungsideen ausprobieren und immer noch Probleme auftreten, lassen Sie es uns bitte wissen! Wir bieten Support für unsere zahlenden Lizenznutzer hier und für unsere Lite-Nutzer hier.
Ich hoffe, das hilft! 🙂
Ich wollte nur Danke sagen, dass Sie diesen Beitrag erstellt haben… Tolle Arbeit, das hat mir sehr geholfen!
Nancy,
Ich freue mich sehr zu sehen, dass Sie den Beitrag hilfreich finden 🙂
Hallo,
Wie kann ich die Höhe des Sende-Buttons ändern? Seine Höhe ist größer als die anderer Buttons in WordPress und ich weiß nicht, welches CSS ich verwenden soll.
Danke im Voraus.
Hallo Lewis,
Der einfachste Weg, die Höhe des Sende-Buttons anzupassen, ist die Anpassung des Innenabstands (Padding) (Abstand zwischen Button-Text und Rand). Hier ist das CSS, das Sie dafür benötigen:
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit] { padding-top: 10px; padding-bottom: 10px; }Diese sind derzeit auf die Standardwerte (10 Pixel oben und unten) eingestellt, aber Sie können diese auf beliebige Zahlen ändern. Um den Text vertikal zentriert zu halten, stellen Sie einfach sicher, dass der obere und untere Innenabstand den gleichen Wert haben.
Und falls es hilft, finden Sie unser vollständiges Tutorial zur Anpassung des Sende-Buttons hier.
Ich hoffe, das hilft! 🙂
Hallo,
Wie kann ich die Größe der Kontrollkästchen ändern, um sie kleiner zu machen?
Danke im Voraus.
Hallo Lewis,
Ich entschuldige mich, aber Kontrollkästchen werden tatsächlich vom Browser generiert, daher können wir ihre Größe nicht anpassen. Während einige Themes umfangreiche Code-Modifikationen zur Gestaltung von Kontrollkästchen auf benutzerdefinierte Weise anbieten, neigen diese dazu, Probleme zu verursachen (Konflikte mit einigen Browsern, manchmal sogar Funktionsstörungen usw.), weshalb sie im Allgemeinen vermieden werden.
Hallo @ JESS, ich habe festgestellt, dass Sie hier der Rockstar sind. Ich habe derzeit ein Problem mit meinem Sende-Button. Sobald Sie mit der Maus über den Sende-Button fahren, breitet sich die Hover-Farbe über den Sende-Button hinaus aus, und das ist sehr hässlich und unprofessionell. Wie kann ich das beheben? Ich vermute, es nimmt die Farbe von meinem Theme an, aber ich weiß nicht, wie ich sie ausschalten kann. Hier ist der Link zum besseren Verständnis. Fahren Sie einfach mit der Maus über den Sende-Button und sehen Sie den hässlichen Effekt. [URL entfernt]
Hallo Emmanuel,
Wir helfen Ihnen gerne weiter! Wenn Sie Zeit haben, schreiben Sie uns bitte eine Nachricht im Support, damit wir Ihnen helfen können.
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support. Bitte senden Sie ein Support-Ticket.
Andernfalls bieten wir eingeschränkten kostenlosen Support im WPForms Lite WordPress.org Supportforum.
Danke 🙂
Gibt es Pläne, ein Add-on-Paket mit verschiedenen Submit-Button-Stilen zu erstellen?
Hallo Alex — Wir haben derzeit keine Pläne dafür, aber ich habe die Idee auf unserer Wunschliste vermerkt. Danke für den Vorschlag! :)
Hallo
Ich frage mich nur, wie wir dies zu allen Formularfeldern hinzufügen können? Ich habe mein Formular über einem Bild und möchte einen weißen Rand um weiße Schrift mit transparentem Hintergrund haben. Danke
Hallo Jennifer,
Sicher, die obigen Beispiele sind speziell für Schaltflächen, aber wir haben auch Tutorials, die Ihnen helfen, Ihre gesamten Formulare zu gestalten! Ich würde vorschlagen, mit unserem Leitfaden für Anfänger zu beginnen (der das Hinzufügen eines Rahmens usw. abdeckt). Wenn Sie dann etwas zusätzliche Inspiration wünschen, können Sie sich unsere zusätzlichen Stilideen (CSS enthalten) ansehen.
Ich hoffe, das hilft! 🙂
Hallo
Ist es möglich, die Submit-Schaltfläche auszublenden? Ich habe verschiedene CSS ausprobiert, aber es funktioniert nicht. Ich möchte das Formular nur für Informationen verwenden, daher benötige ich die Schaltfläche nicht.
Danke
Hallo Nicole,
Wir helfen Ihnen gerne weiter! Dazu müssen Sie uns nur mit der URL Ihres Formulars kontaktieren (damit wir einen CSS-Schnipsel für Sie erstellen können).
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support. Bitte senden Sie ein Support-Ticket.
Andernfalls bieten wir eingeschränkten kostenlosen Support im WPForms Lite WordPress.org Supportforum.
Danke 🙂
Hallo, danke für den Artikel. Ich möchte die Position der Submit-Schaltfläche auf die rechte Seite ändern. Standardmäßig ist sie auf der linken Seite. Ich kann keine CSS-Beschreibung finden, wie das geht. Können Sie mir bitte helfen?
Danke.
Efkan
Hallo Efkan,
Sie können die Submit-Schaltfläche mit dem folgenden CSS-Code nach rechts verschieben:
div.wpforms-container-full .wpforms-form .wpforms-submit-container { text-align: right !important; }Falls es hilft, hier ist ein tolles Tutorial von WPBeginner, wie Sie benutzerdefiniertes CSS wie dieses zu Ihrer Website hinzufügen. 🙂
Hallo!
Vielen Dank für all diese hilfreichen Informationen. Ich habe jedoch noch eine Frage.
Ich habe die Hintergrundfarbe für die Schaltfläche „Senden“ erfolgreich geändert und auch erfolgreich eine separate Farbe für den Hover- und Fokus-Zustand hinzugefügt, sodass sich die Farbe der Schaltfläche ändert, wenn Benutzer sie mit der Tabulatortaste auswählen.
Was ich nicht herausfinden kann, ist, wie die Hover-Farbe beibehalten werden kann, sobald die Schaltfläche geklickt wurde und aktiv übermittelt wird. Sobald ein Benutzer den Cursor von der Schaltfläche wegbewegt, wird die Hover-Farbe wieder auf die ursprüngliche Farbe zurückgesetzt, was den Eindruck erwecken kann, dass die Schaltfläche überhaupt nicht geklickt wurde (obwohl der Text „wird übermittelt . . .“ lautet).
Ist das ein :active-Selektor-Problem, das ich übersehe, oder übersehe ich etwas anderes?
Ich schätze jede Hilfe, die Sie anbieten können.
Hallo Joe,
Wir müssen uns möglicherweise den Code selbst ansehen. Wenn Sie also Zeit haben, kontaktieren Sie bitte unser Support-Team, und wir werden uns das genauer ansehen und Sie durchführen. 🙂
Ich möchte die Hintergrundfarbe der Validierungsnachrichten ändern. Empfehlungen?
Hallo Janine,
Sie können den folgenden Code-Schnipsel verwenden, um die Hintergrundfarbe zu ändern:
div.wpforms-container-full .wpforms-form label.wpforms-error { background-color: #FFFFFF !important; }Und falls es hilft, hier ist ein tolles Tutorial von WPBeginner, wie Sie benutzerdefiniertes CSS wie dieses zu Ihrer Website hinzufügen.
Ich hoffe, das hilft! 🙂
Danke, Daisy
Ich habe diesen Code ausprobiert, um die Hintergrundfarbe der Validierungsnachricht zu ändern, und er hat nichts geändert. Sie wird weiterhin in der hellgrünen Farbe angezeigt, mit der sie ursprünglich geliefert wurde.
Irgendwelche Vorschläge?
Hallo Janine,
Wenn Sie ein Caching-Plugin auf Ihrer Website installiert haben (oder wenn Ihr Hoster Caching betreibt), sollten Sie dieses zuerst löschen/leeren und den Code erneut versuchen. Wenn das Problem weiterhin besteht und Sie eine kostenpflichtige Lizenz haben, kontaktieren Sie bitte unser Support-Team, und sie werden sich das ansehen. 🙂
Hallo Daisy,
Ich melde mich bezüglich meiner Anfrage vor etwa 5 Beiträgen. Wie angewiesen, habe ich meine Anfrage vor etwa drei Wochen an das Support-Team gesendet, und ich habe nichts gehört.
Ich habe zwar eine Art Workaround gefunden, aber ich bin immer noch daran interessiert zu erfahren, ob es möglich ist, die Farbe des Submit-Buttons zu ändern – und geändert zu lassen –, wenn Formulare gesendet werden.
Danke für die Hilfe.
Hallo Joe,
Entschuldigen Sie die Verwirrung – es scheint, dass eines unserer Support-Teammitglieder Ihre E-Mail am 25. März beantwortet hat, aber wir sind uns nicht sicher, ob Sie sie jemals erhalten haben (sie wurde möglicherweise als Spam/Junk aussortiert, daher lohnt es sich, dort nachzusehen, nur für den Fall).
Um ihre Antwort zusammenzufassen: Leider haben wir keine Möglichkeit, das von Ihnen gewünschte zu erreichen. Das Problem ist, dass der Text „Submitting“ von JavaScript angezeigt wird und die CSS des Buttons nicht ändert – und so gibt es nichts Gutes, um es sozusagen „festzuhalten“ in Bezug auf benutzerdefiniertes CSS. Es wäre möglicherweise durch kreatives JavaScript/jQuery erreichbar, aber wir können keine Unterstützung für diesen Grad der Anpassung anbieten. Ich entschuldige mich für die Unannehmlichkeiten!
Hallo, wie kann ich den Submit-Button mit den Textfeldern für Name und E-Mail in eine Zeile bringen?
Ich habe die Textfelder für Name und E-Mail mit der Layout-Option in eine Zeile gebracht.
Hallo Mike,
Ich empfehle Ihnen auf jeden Fall, sich unseren Leitfaden anzusehen, der Ihnen zeigt, wie Sie Ihr Formular in einer einzigen Zeile anzeigen.
Ich hoffe, das hilft! 🙂
Hallo! Wie kann ich meinen Submit-Button so ändern, dass er nur eine einzige Textzeile hat?
Jetzt ist der Button wegen zwei Textzeilen riesig...
Das Kontaktformular ist als einzeiliges Formular inline erstellt.
Hallo Thomas!
Sicher, Sie können versuchen, den Submit-Button mit benutzerdefiniertem CSS anzupassen. Wir haben hier ein großartiges Tutorial, wie das geht.
Ich hoffe, das hilft!
Einen schönen Tag noch 🙂
Hallo!
Was passiert, wenn wir möchten, dass der Wpforms Submit-Button genauso aussieht wie die anderen Theme-Buttons?
Ich dachte, es würde ausreichen, die CSS-Klasse des primären Theme-Buttons in das Feld „CSS-Klasse des Submit-Buttons“ des Formular-Builders einzufügen.
Allerdings ändert sich das Aussehen des Buttons überhaupt nicht... Müssen wir den Klassennamen auf eine besondere Weise eingeben?
Hallo Juanma.
Ich entschuldige mich für etwaige Verwirrung!
Sie können dies mit benutzerdefiniertem CSS erreichen. Bitte lesen Sie diesen Artikel auf unserer Website für weitere Details.
Ich hoffe, das hilft!
Einen schönen Tag noch 🙂
Hallo Support-Team!
Welchen CSS-Code sollte ich verwenden, um die Position des Buttons zu ändern? Ich möchte zum Beispiel den Submit-Button in die Mitte des Formulars und tiefer verschieben.
Danke!
Hallo Jacqueline.
Bitte beachte, dass benutzerdefinierter Code außerhalb unseres Supportumfangs liegt. Wir können nicht bei der Anpassung oder Implementierung von benutzerdefiniertem Code helfen.
Ich habe jedoch in unserem System nachgesehen und sehe, dass wir einen Vorschlag haben, um das zu erreichen, was du suchst:
div.wpforms-container-full .wpforms-form .wpforms-submit-container { text-align: center !important; }Ich hoffe, das hilft.
Schönen Tag noch 🙂
Hallo! Wie ändere ich die Hintergrundfarbe des Buttons für die Farbe, die der Button hat, während er nach dem Absenden „sendet“? Vielen Dank!! (^_^)y
Hallo Kate – Wir helfen Ihnen gerne weiter! Wenn Sie Zeit haben, schreiben Sie uns bitte eine Nachricht im Support, damit wir Ihnen helfen können.
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support. Bitte reichen Sie daher ein Support-Ticket ein. Andernfalls bieten wir begrenzten kostenlosen Support im WPForms Lite WordPress.org Support-Forum an.
Danke 🙂
Wie kann ich die Hover-Hintergrundfarbe ändern?
Hallo Francesco – Tolle Frage!
Der einfachste Weg, die Hover-Hintergrundfarbe des Sende-Buttons anzupassen, ist das Hinzufügen des CSS-Codes, wie hier im Tutorial gezeigt.
Ich hoffe, das hilft!
Danke und schönen Tag noch 🙂
Vielleicht einfach, aber ich habe es nicht gefunden:
Bitte, wie kann ich dem „Senden“-Button eine Funktion geben, um zu einer anderen Seite weiterzuleiten (Link)? Also nicht senden, sondern weiterleiten?
Hallo Roman – Gute Frage!
Ja, Sie können zu einer anderen Seite weiterleiten, indem Sie zu Form Builder > Einstellungen > Bestätigung > den Bestätigungstyp auf „Zu URL weiterleiten“ setzen > und die Bestätigungs-Weiterleitungs-URL hinzufügen. Hier ist eine tolle Anleitung dazu.
Ich hoffe, das hilft! Danke und schönen Tag noch 🙂
Bitte helfen Sie mir. Ich habe versucht, den Sende-Button so zu ändern, dass er einen Radius von 5px hat. Ich weiß nicht, ob ich den CSS-Code falsch eingebe?
Danke!
Hallo Jillian – Wir helfen Ihnen gerne weiter 🙂
Falls es hilft, hier ist ein tolles Tutorial von WPBeginner, wie man benutzerdefiniertes CSS wie dieses zu seiner Website hinzufügt.
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support. Bitte reichen Sie daher ein Support-Ticket ein. So können wir weitere Details besprechen und dies weiter untersuchen.
Danke 🙂
Hallo,
Hier ist der Link zu meiner Website, auf der ich WPForms platziert habe.
[URL entfernt]
Ich möchte, dass die Schaltflächen „Weiter, Zurück, Senden usw.“ den gleichen Stil wie die Schaltflächen meines Themes haben.
Bitte helfen Sie
Hallo Abubakar – Danke für deine Nachricht 🙂
Sie können die Senden-Schaltflächen auf Ihrer Website anpassen, indem Sie diesen Artikel konsultieren. Außerdem haben wir eine großartige Anleitung zur Anpassung einzelner Formularfelder.
Wenn Sie Hilfe benötigen, zögern Sie bitte nicht, unseren Support zu kontaktieren.
Danke und einen schönen Tag noch 🙂
Hallo! Toller Artikel!
Wie füge ich ein Symbol beim Hovern zur Senden-Schaltfläche hinzu? Ich habe buchstäblich überall nach diesem Code gesucht und ihn nicht gefunden.
Danke!
Hallo JP – Danke für deine Nachricht!
Um das von Ihnen erwähnte zu tun, können Sie FontAwesome in Betracht ziehen, und eine Möglichkeit, Font Awesome zu Ihrer Website hinzuzufügen, ist die Verwendung des Plugins „Better Font Awesome“
Sobald Sie Font Awesome zu Ihrer Website hinzugefügt haben, benötigen wir etwas benutzerdefiniertes CSS, um der Senden-Schaltfläche ein Symbol hinzuzufügen, das ich hier eingefügt habe
Dieser Ausschnitt mit dem Code „\f1d8“ zeigt ein Papierflugzeug-Symbol, und Sie können ihn durch den Code Ihres bevorzugten Symbols ersetzen, indem Sie zur Galerie von Font Awesome gehen
Ich hoffe, das hilft! 🙂
Hallo. Ich benutze die Lite-Version. Wenn ich mit der Maus darüber fahre, bewegt sich die Schaltfläche leicht und scheint eine weiße Umrandung zu haben. Der von mir verwendete CSS-Code:
.wpforms-form button[type=submit] { border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background-color: #024488 !important; color: #fff !important; } .wpforms-form button[type=submit]:hover { background-color: #d62598 !important; }
Wie kann ich den Hover-Fokus oder die Bewegung der Schaltfläche entfernen? Danke
Hallo Kas – Der CSS-Code sieht für mich gut aus. Ich vermute, dass ein Konflikt mit den Stil-Einstellungen Ihres Themes das seltsame Verhalten bei den Hover-Stil-Einstellungen verursacht.
In diesem Fall wenden Sie sich bitte an unseren kostenlosen Support im WPForms Lite WordPress.org Supportforum.
Danke 🙂
Hallo,
Ich suche Hilfe, wie ich meinen Submit-Button in meinen Formularen zentrieren kann. Ich habe keine Möglichkeit gefunden, dies zu tun, und die normale CSS-Zentrierung funktioniert nicht.
Wie löse ich das? Danke!
Hallo Seth – Bitte verwenden Sie diesen CSS-Code, um den Submit-Button zu zentrieren.
Ich hoffe, das hilft! 🙂
Hallo
Ich habe ein Inline-Felder-Formular, aber es akzeptiert meine Padding-Einstellungen für den Submit-Button nicht, der Submit-Text ist falsch ausgerichtet.
Ich habe die obigen Optionen bereits ausprobiert:
padding-top, padding-bottom und nur padding – aber keine hat funktioniert…
Können Sie mir helfen?
Vielen Dank im Voraus!
Hallo Rodrigo – Es sieht so aus, als ob das Theme-Styling in diesem Fall mit dem Formular überschrieben wird.
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support. Bitte reichen Sie ein Support-Ticket ein. Andernfalls bieten wir begrenzten kostenlosen Support im WPForms Lite WordPress.org Supportforum.
Danke 🙂
Hallo
Absoluter Neuling in Sachen CSS, aber ich weiß, wie man kopiert und einfügt 🙂 also…
Wie kann ich einen PayPal "Buy Now"-Checkout-Button hinzufügen?
Danke für jede Hilfe. Google ist nicht nett zu mir… 😉
Darren
Hallo Robert! Ich entschuldige mich für etwaige Verwirrung. PayPal-Buttons werden speziell von PayPal bereitgestellt, mit Code, der ebenfalls von ihnen stammt. Sie können hier ihre Dokumentation einsehen: https://www.paypal.com/buttons/
Falls es Ihnen jedoch hilft: Unser Plugin hat die Möglichkeit, Zahlungen über PayPal über eines unserer Add-ons abzuwickeln. Es ist mit unserer Pro-Lizenz verfügbar, und Sie finden weitere Details hier: https://wpforms.com/addons/paypal-standard-addon/
Ich hoffe, das klärt die Sache 🙂 Wenn Sie weitere Fragen dazu haben, kontaktieren Sie uns bitte, wenn Sie ein aktives Abonnement haben. Wenn nicht, zögern Sie nicht, uns Fragen in unseren Support-Foren zu stellen.
Wie kann ich den Submit-Button blinken lassen, damit ihn die Leute bei einem langen Formular nicht übersehen?
Hallo David. Um das zu erreichen, was Sie suchen, müssten Sie Animationen und Keyframe-Stile für Ihre Schaltfläche verwenden. Dies ist jedoch nichts, womit wir von unserer Seite aus helfen können.
Für weitere Anpassungen empfehlen wir Ihnen codeable oder WPBuff.
Danke und einen schönen Tag noch!
Sehr geehrtes WP Forms-Team,
Ich möchte wissen, wie ich ein Formular in einen Elementor-Button einbetten kann.
Ich habe das WP-Formular bereits vorbereitet und versucht, die Option „Shortcode“-Einbettung im WP-Formular zu verwenden. Wenn ich jedoch den Shortcode kopiere und in die Button-URL mit Elementor einfüge, wird er zu einer leeren Seite weitergeleitet.
Können Sie mir bitte dabei helfen, ohne ein Upgrade auf einen kostenpflichtigen Plan (weder bei WP Form noch bei Elementor)?
Danke
Hallo Reni – Hier ist eine vollständige Anleitung, wie Sie WPForms auf einer Elementor-Seite einbetten.
Ich hoffe, das hilft! 🙂
Guten Tag, meine Frage ist folgende:
Wie kann ich die Felder so konfigurieren, dass anstelle eines Rechtecks, in das geschrieben wird, eine durchgehende Linie erscheint.
Danke
Hallo Marcos, damit wir Ihre Frage so gründlich wie möglich beantworten und Verwechslungen vermeiden können.
Würden Sie uns bitte kontaktieren und uns weitere Details mitteilen, damit wir Ihnen in diesem Fall weiterhelfen können?
Danke.
Können Sie den Bestätigungs-Redirect-URL-Code so ändern, dass der Link in einem neuen Fenster geöffnet wird?
Hallo Allison, um dies zu erreichen, müssen Sie benutzerdefinierten Code implementieren, und hier ist unser Entwicklerhandbuch dazu.
Da das, was Sie suchen, benutzerdefinierten Code erfordert, können wir keinen Support für die erforderliche benutzerdefinierte Entwicklung leisten. Falls es hilft, könnten Sie sich nach Dienstleistern wie Codeable oder Upwork für potenzielle Entwickleroptionen umsehen.
Danke!
Hallo, WP Forms Team! Ich liebe WP Forms und erstelle derzeit ein Smart Formular mit bedingten Logikoptionen. Das gefällt mir übrigens sehr gut. Um mein Formular perfekt zu machen, gibt es eine Möglichkeit, die gleiche bedingte Logik auf den SENDEN-BUTTON anzuwenden? Mit anderen Worten, ich möchte, dass mein SENDEN-BUTTON ausgeblendet wird, bis die entsprechenden Felder angekreuzt sind (oder die erforderlichen Felder ausgefüllt sind). Vielen Dank für jede Hilfe!
Hallo Christine,
Es tut mir leid, da wir derzeit keine integrierte Funktion haben, um den Senden-Button bedingt ein- oder auszublenden. Dies kann jedoch mit ein wenig benutzerdefiniertem Code erreicht werden, wie in diesem Entwicklerhandbuch gezeigt.
Ich hoffe, das hilft 🙂
Hallo,
Ist es möglich, dem Submit-Button ein Icon hinzuzufügen?
Vielen Dank.
Hallo Arnold – Du kannst versuchen, das folgende CSS zu verwenden, um dem Submit-Button ein Icon hinzuzufügen:
.wpforms-form button[type=submit]:after { content: "\f345"!important; vertical-align: middle!important; font-size: 1em!important; transition: all 0.5s ease!important; opacity: 1; }Hallo!
Mir ist aufgefallen, dass wpforms die Variable ‘–theme-button-padding’ ersetzt und ihre eigene setzt:
.wpforms-submit { –theme-button-padding: 5px 35px; }
Darf ich fragen, warum Sie die benutzerdefinierte Eigenschaftseinstellung des Themes hier überschreiben, anstatt die weniger spezifische Padding-Eigenschaft zu verwenden?
Danke 🙂
Hallo Team,
Ich habe ein mehrseitiges Formular und möchte gerne zwei Sätze von „Weiter & Zurück“-Buttons auf dem Formular platzieren. Einer oben und ein weiterer unten auf jeder Seite, ist das möglich?
Danke
Hallo Grant, diese Funktion haben wir derzeit nicht standardmäßig. Für eine persönliche Beratung können Sie sich bei unserem Support-Team an unsere Trusted Advisors wenden, wenn Sie eine WPForms-Lizenz haben. Bitte reichen Sie ein Support-Ticket ein und sie werden sich so schnell wie möglich bei Ihnen melden (normalerweise innerhalb von 1 Werktag). Wenn Sie unsere kostenlose Version verwenden, besuchen Sie bitte das WPForms Lite WordPress.org Supportforum und eröffnen Sie einen neuen Thread. Danke!