Die WPForms-Senden-Schaltfläche: Best Practices zur Steigerung von Klicks

Submit-Buttons sind einer der am leichtesten zu ignorierenden Aspekte des Formulardesigns. Obwohl sie nur ein kleiner Teil der Formulare sind, der am unteren Rand versteckt ist, können Submit-Buttons dennoch einen großen Einfluss auf die allgemeine visuelle Attraktivität Ihres Formulars haben.

Nachdem ich unzählige verschiedene Arten von Lead-Formularen getestet habe, um die Konversionen zu steigern, kann ich Ihnen sagen, dass ein gut gestalteter Submit-Button den entscheidenden Unterschied machen kann, um die Aufmerksamkeit Ihrer Besucher zu gewinnen.

In diesem Artikel teile ich einige Tipps und Best Practices aus meiner Erfahrung bei der Optimierung von Lead-Formularen für Konversionen. Tauchen wir ein.

Grundlegende Tipps zur Gestaltung von Submit-Buttons in WPForms

WPForms bietet Ihnen verschiedene Möglichkeiten, den Submit-Button in Ihrem Formular zu gestalten. Ich bevorzuge die Formularstil-Optionen im WordPress Block-Editor. Es ist der einfachste Weg, so ziemlich jede Komponente Ihres Formulars anzupassen.

Die Anpassungsoptionen für den Button-Stil sind in allen Versionen von WPForms verfügbar. Ich empfehle jedoch die Verwendung von WPForms Pro, um die volle Bandbreite an Stiloptionen freizuschalten, einschließlich vorgefertigter Formularvorlagen sowie Einstellungen für Ihren Formularhintergrund und Container.

Sie finden die Einstellungen für die Stile des Submit-Buttons im rechten Bedienfeld Ihrer Formularoptionen im Block-Editor.

Diese Einstellungen ermöglichen es Ihnen, die Größe, den Rahmen und die Farben des Submit-Buttons ohne Code zu steuern.

Größe des Submit-Buttons

WPForms bietet Ihnen drei Voreinstellungen für die Button-Größe: klein, mittel und groß.

Alle 3 Optionen sind aus Designperspektive absolut brauchbar. Sie verstoßen nicht gegen Best Practices, wenn Sie eine beliebige Größe des Buttons hier wählen.

Wichtiger ist hier die Konsistenz des Designs. Wenn Sie beispielsweise kleine Feldgrößen und große Buttons verwenden, kann Ihr Formular an einigen Stellen etwas unproportional aussehen.

Für die beste Balance versuchen Sie, eine konsistente Größe für alle Elemente in Ihren Formularen zu verwenden.

Unser Leitfaden zur Formulargestaltung mit dem Block-Editor untersucht die verschiedenen Anpassungsoptionen für jede Formular-Komponente. All diese verschiedenen Aspekte ergeben zusammen das perfekte Formular-Design.

Rahmentyp

Rahmentypen sind rein eine stilistische Wahl. Wenn Sie bemerkt haben, ist es zunehmend üblich, ein randloses Design für einen sauberen und minimalistischen Stil zu verwenden.

Sie haben jedoch auch die Möglichkeit, in WPForms weniger gebräuchliche Rahmentypen zu verwenden:

• Durchgezogene Rahmen sind ziemlich beliebt und verleihen Ihren Formularen ein professionelles und raffiniertes Aussehen.
• Gestrichelte oder gepunktete Ränder sind seltener, aber sie verleihen einen Hauch spielerischer Kreativität. Verwenden Sie sie, wenn Ihr Website-Thema eher leger ist, aber seien Sie vorsichtig, sie nicht zu überstrapazieren.
• Keine Randdesigns sind elegant und modern und werden oft verwendet, um Minimalismus zu betonen oder den Button nahtlos in den Hintergrund zu integrieren. Wenn Sie auf Ränder verzichten, stellen Sie sicher, dass genügend Kontrast oder Schatten vorhanden ist, um den Button von den umgebenden Elementen abzuheben.

Rahmengröße

Sie können auch die Größe Ihres Randes anpassen. Es ist eine gute Praxis, eine Randdicke zu haben, die zur Button-Größe passt. Wenn ich eine kleine Button-Größe verwende, achte ich darauf, sie mit einem dünnen Rand von 3-4 Pixeln zu ergänzen. Dies schafft meiner Erfahrung nach den visuell ausgewogensten Look.

Für große Buttons ist eine Randbreite von 4-6 Pixeln besser geeignet. Eine gute Regel ist, dezente Ränder zu verwenden, die Struktur hinzufügen, ohne das Button-Design zu überladen.

Randradius

Die Randradius-Einstellung in WPForms gibt Ihnen die volle Kontrolle darüber, wie abgerundet Ihre Buttons aussehen sollen. Rundere Buttons passen gut zu Designs, die moderne Stile verwenden.

Tatsächlich haben einige Studien eine Korrelation zwischen runden Buttons und höheren Konversionsraten festgestellt. Es lohnt sich, mit runden Buttons zu experimentieren, wenn Sie für Konversionen optimieren.

Sie können einen Randradius von etwa 15-20 Pixeln verwenden, um den Kapsel-Button-Look zu erzielen, den viele moderne Websites heute verwenden.

Wenn Sie lieber bei einem formellen Stil bleiben möchten, können Sie den Randradius gerne auf 0 Pixel belassen, um Ihren Button quadratisch zu halten.

Wichtig ist, die Krümmung Ihres Buttons mit dem gesamten Design-Thema Ihrer Website in Einklang zu bringen.

Ich habe die Theorie, dass rundere Formen besser funktionieren, wenn sie sparsam eingesetzt werden. Auf diese Weise fallen sie eher aus den gängigen geometrischen Formen heraus, die Sie normalerweise auf anderen Teilen Ihrer Website verwenden.

Hintergrundfarbe des Buttons

In WPForms ist die Hintergrundfarbe des Buttons mit dem Farbwähler einfach auszuwählen. Die Farbwahl ist wichtig, da sie die Sichtbarkeit Ihres Buttons beeinflusst.

Wählen Sie eine Hintergrundfarbe, die sich vom Hintergrund Ihres Formulars abhebt, damit Ihr Button auf jedem Gerät gut sichtbar ist.

Ihr Branding spielt ebenfalls eine Rolle bei der Farbauswahl. Wenn Ihr Webdesign auf einer Markenfarbpalette basiert, ist es im Allgemeinen eine gute Idee, sich eng an die Farben Ihres Marken-Themas zu halten.

Vermeiden Sie auf jeden Fall übermäßig helle oder sich beißende Farben, die Benutzer unnötig ablenken könnten.

Rahmenfarbe

Der Rand ist nur ein kleiner Bruchteil des Submit-Buttons. Aber er ist ein großartiger Ort, um Akzentfarben hinzuzufügen und die visuelle Attraktivität Ihres Formulars zu steigern.

Ränder sehen am attraktivsten aus, wenn sie sich gut vom Hintergrund Ihres Buttons abheben. Dies verleiht Ihrem Design nicht nur Persönlichkeit, sondern verbessert auch die Sichtbarkeit Ihres Buttons.

Ich empfehle, dezente Töne zu verwenden, um nicht zu viel Aufmerksamkeit auf den Rand selbst zu lenken. Das Ziel ist es, den Button hervorzuheben, anstatt durch auffällige Button-Ränder Ablenkungen zu erhöhen.

Textfarbe des Buttons

Bei der Button-Textfarbe sollten Sie ein einziges Ziel verfolgen: die Lesbarkeit zu priorisieren. Der einfachste Weg, Ihren Button-Text gut lesbar zu machen, ist die Verwendung einer Textfarbe, die einen starken Kontrast zum Hintergrund des Buttons bildet.

Eine gute allgemeine Regel ist, weiße Schrift für dunklere Button-Hintergründe und schwarze oder dunkelgraue Schrift für hellere Hintergründe zu verwenden.

Während Sie bei anderen Komponenten des Submit-Buttons mit fetten und lebendigen Farben davonkommen können, ist es am besten, sich bei der Textfarbe nicht zu weit von den üblichen neutralen Farben zu entfernen, um eine gute Lesbarkeit zu gewährleisten.

Fortgeschrittene Styling-Techniken für Submit-Buttons

WPForms verlangt von Ihnen keine Code-Verwendung für die grundlegende Gestaltung Ihres Buttons. Für einige fortgeschrittene Effekte wie Farbverläufe benötigen Sie jedoch einfaches CSS.

Das ist viel einfacher, als es klingt. Zuerst benötigen Sie das WPCode-Plugin, das auf Ihrer Website installiert ist. Damit können Sie ganz einfach Code-Snippets für Änderungen an den Stilen Ihres Submit-Buttons einfügen.

WPCode installieren

Öffnen Sie Ihr WordPress-Dashboard und gehen Sie zu Plugins » Neu hinzufügen.

Auf dem Bildschirm Plugins hinzufügen verwenden Sie das Suchfeld, um nach WPCode zu suchen. Drücken Sie dann auf die Schaltfläche Jetzt installieren, um das Plugin zu Ihrer Website hinzuzufügen.

Die Schaltfläche „Jetzt installieren“ wird nach Abschluss der Installation zu „Aktivieren“ geändert. Drücken Sie auf die Schaltfläche Aktivieren und Sie können WPCode verwenden, um Code-Snippets zu Ihrer Website hinzuzufügen.

Danach fahren Sie mit der Maus über Code-Snippets im Seitenbereich Ihres WordPress-Dashboards und klicken Sie auf + Snippet hinzufügen, wenn sich das Menü erweitert.

Klicken Sie dann unter „Benutzerdefinierten Code hinzufügen (Neues Snippet)“ auf Snippet verwenden.

Sie müssen dann den Snippet-Typ auswählen. Für Stil-Anpassungen fügen Sie CSS-Benutzerdefinierte Snippets hinzu. Wählen Sie also CSS-Snippet aus den verfügbaren Optionen.

Jetzt müssen Sie nur noch Code-Snippets in das Code-Editor-Fenster kopieren und einfügen, um Stiländerungen an Ihren Formularen vorzunehmen. Ich werde Beispiele für gängige CSS-Codes teilen, die Sie zur Änderung Ihres Submit-Button-Stylings verwenden können.

Farbverläufe zum Submit-Button hinzufügen

Ein Farbverlauf ist ziemlich auffällig und deutet normalerweise auf ein hochprofessionelles Formular-Design hin. Das ist großartig, wenn Sie Ihre Professionalität und Liebe zum Detail mit Farbverläufen für Buttons vermitteln möchten.

Hier ist der Code für ein Snippet, das Sie zum Hinzufügen eines linearen Farbverlaufs zur Farbe des Submit-Buttons verwenden können:

#wpforms-8 .wpforms-submit {
  background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
}

In diesem Code bezieht sich „#wpforms-8“ auf die Formular-ID Ihres spezifischen Formulars. Das Formular, das ich bearbeite, hat die ID 8. Wenn Ihre Formular-ID anders ist, z. B. 17, können Sie die richtige Nummer zu diesem Code-Teil hinzufügen (d. h. „#wpforms-17“).

Sie können die Formular-ID Ihres Formulars finden, indem Sie auf die Nummer schauen, die in der Kurzcode eines bestimmten Formulars erwähnt wird. Dies wird in der Spalte „Shortcode“ Ihres Formulars auf dem Bildschirm „Formularübersicht“ angegeben.

Der zweite anpassbare Teil dieses Codes sind die Werte für den linearen Verlauf. Diese drei Werte in Klammern, getrennt durch Kommas, sind:

• Der Winkel des Verlaufs
• Hex-Code der ersten Farbe
• Hex-Code der zweiten Farbe

Sie können diese Werte nach Belieben ändern. Wenn Sie die genauen Hex-Codes für die benötigten Farben finden müssen, können Sie diesen HTML-Farbgenerator verwenden.

Nachdem Sie Ihren benutzerdefinierten CSS-Schnipsel erstellt haben, klicken Sie auf die Schaltfläche Snippet speichern und auf den Schalter daneben, um den Schnipsel zu speichern und zu aktivieren.

Ihr Formular hat nun Farbverläufe auf seiner Senden-Schaltfläche.

Hover-Effekte zum Submit-Button hinzufügen

Standardmäßig fügt WPForms einen Hover-Effekt zur Senden-Schaltfläche hinzu, um anzuzeigen, dass sie interaktiv ist und dem Besucher, der darauf klicken möchte, sofortiges visuelles Feedback zu geben.

Wenn Sie jedoch einen Hover-Effekt bei Verwendung eines Farbverlaufs hinzufügen möchten, können Sie diesen Code verwenden:

#wpforms-8 .wpforms-submit {
  background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
  transition: background 0.3s ease; /* Smooth transition on hover */
}

#wpforms-8 .wpforms-submit:hover {
  background: linear-gradient(45deg, #0f88d4, #066aab); /* Changes gradient on hover */
}

Dieser Code enthält auch einen Übergangseffekt, um sicherzustellen, dass die Interaktionen mit der Schaltfläche poliert wirken. Im Allgemeinen bietet ein Übergangseffekt von 0,3 s – 0,4 s den flüssigsten Effekt.

Wenn Sie nur den Standard-Hover-Effekt auf einer Schaltfläche mit Vollfarben ändern möchten, können Sie die WPForms Formularstileinstellungen im Block-Editor verwenden, um die gewünschte Grundhintergrundfarbe festzulegen.

Verwenden Sie dann diesen vereinfachten Code, um Farben beim Hovern zu ändern, indem Sie den Hex-Code Ihrer gewünschten Farbe hinzufügen:

#wpforms-8 .wpforms-submit:hover {
  background: #0f88d4; /* Solid color on hover */
  transition: background 0.3s ease; /* Smooth transition */
}

Stellen Sie sicher, dass Sie auf Snippet speichern klicken und es aktivieren, um die Hover-Effekte auf Ihrer Formular-Senden-Schaltfläche anzuwenden.

Wenn Sie nach einem einzigartigeren Hover-Effekt suchen, können Sie den Puls-Effekt mit diesem Code anwenden:

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 136, 212, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(15, 136, 212, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(15, 136, 212, 0);
  }
}

#wpforms-8 .wpforms-submit:hover {
  animation: pulse 1.5s infinite;
}

Dies fügt eine kreative Note mit einer Schaltfläche hinzu, die beim Hovern pulsiert und Klicks von Besuchern einlädt.

Optimierungstipps für den Text des Submit-Buttons

Das Styling ist ein Aspekt, der Klicks auf die Senden-Schaltfläche beeinflusst. Die zweite wichtige Komponente ist der Text der Senden-Schaltfläche. Diese wenigen Worte können der entscheidende Punkt sein, an dem Ihre Benutzer entscheiden, ob sie handeln oder abspringen.

Ein guter Schaltflächentext inspiriert zum Handeln, indem er sich auf einen bestimmten Vorteil konzentriert, den Ihr Besucher durch Klicken erwarten kann. Vermeiden Sie es, einfach nur „Senden“ zu verwenden. Verwenden Sie stattdessen eine direkte und handlungsorientierte Sprache, die auf ein Ziel hinweist.

Hier sind einige Beispiele für konversionsoptimierte Texte für Senden-Schaltflächen:

• Angebot anfordern
• Mein E-Book herunterladen
• Der Community beitreten
• Meine Reise beginnen
• Kostenlose Vorlagen erhalten
• Heute 20% sparen

Aber wie bearbeitet man den Text der Senden-Schaltfläche in WPForms? Das ist einfach. Klicken Sie im Formular-Builder auf die Schaltfläche Senden am unteren Rand des Formulars, um sofort zu Einstellungen » Allgemein zu gelangen.

Geben Sie dann einfach Ihren Text in das Feld Text der Senden-Schaltfläche ein. Sie können auch den Text bearbeiten, der während der Übermittlung des Formulars angezeigt wird, im Feld Text der Senden-Schaltfläche bei Verarbeitung.

Und das ist alles.

Jetzt, da Sie eine bessere Vorstellung von den Best Practices für Senden-Schaltflächen haben und wie Sie diese auf Ihre Formulare anwenden können, ist es an der Zeit, den Text Ihrer Schaltfläche für mehr Klicks zu optimieren.

Außerdem lesen: So zeigen Sie Ihren Formularverlauf in WordPress an

Das Erstellen effektiver Submit-Buttons für Ihre Formulare ist keine exakte Wissenschaft. Scheuen Sie sich nicht, mit verschiedenen Stilen und Button-Texten zu experimentieren und Ihre Ergebnisse zu beobachten (dies kann so einfach sein wie ein A/B-Test eines Formulars und die Messung des Unterschieds bei den Formular-Einreichungsraten).

Als Nächstes: WPForms-E-Mail-Benachrichtigungen gestalten

Das Gestalten von Formularen mit WPForms ist ein schneller und müheloser Prozess. Aber diese Anpassungsflexibilität erstreckt sich auch auf Ihre E-Mail-Benachrichtigungen. Mit kundenorientierten Benachrichtigungen haben Sie eine großartige Gelegenheit, Ihr Branding in die Benachrichtigungen zu integrieren, um ein professionelleres Erscheinungsbild zu erzielen, dem Ihre Kunden vertrauen können.

Unser Leitfaden zum Anpassen von Formular-E-Mail-Benachrichtigungen führt Sie durch den einfachsten Weg, Ihre Benachrichtigungen zu gestalten.

Erstellen Sie jetzt Ihr WordPress-Formular

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-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.