KI-Zusammenfassung
Fragen Sie sich, wie Sie die Schaltfläche „Senden“ aus Berechnungsformularen entfernen können, um die Benutzererfahrung zu verbessern?
Indem Sie die Schaltfläche „Senden“ aus von WPForms erstellten Berechnungsformularen entfernen, können Sie Ihren Besuchern sofortige Berechnungen anbieten.
In diesem Leitfaden lernen Sie die einfachen Schritte, um Ihre Formulare für nahtlose Echtzeitberechnungen zu ändern, ohne eine Formularübermittlungsaktion zu benötigen.
So entfernen Sie die Schaltfläche „Senden“ aus Berechnungsformularen
Das Entfernen der Schaltfläche "Senden" aus Berechnungsformularen mit WPForms ist unglaublich einfach. Alles, was Sie tun müssen, ist, die folgenden einfachen Schritte zu befolgen:
In diesem Artikel
Die Voraussetzungen
Bevor wir mit den Schritten zum Deaktivieren der Schaltfläche "Senden" fortfahren, stellen wir sicher, dass wir einige wichtige Schritte abgeschlossen haben.
Wenn Sie diese Schritte bereits abgeschlossen haben, springen Sie gerne zum Abschnitt Entfernen der Schaltfläche "Senden".
1. Eine WPForms Pro-Lizenz besitzen
WPForms ist ein seriöser Formularersteller und Rechner-Plugin, das es Benutzern ermöglicht, eine breite Palette von Formularen zu erstellen, einschließlich eines Datumsdifferenzrechners.
Es ist wichtig, dass Sie die neueste Version von WPForms installiert haben, zusammen mit Zugriff auf die Pro-Lizenz.
Die Pro-Version bietet Ihnen Zugriff auf Premium-Integrationen, Addons und viele wertvolle Funktionen wie bedingte Logik, Formularübermittlungsberichte usw.
2. Das Calculations Addon verwenden
Um benutzerdefinierte Rechner in WordPress zu erstellen, wissen Sie wahrscheinlich bereits, dass Sie das WPForms Calculations Addon installiert haben müssen.
Sie können dieses Addon verwenden, um logische Operatoren und Wenn-Dann-Anweisungen einzufügen, um personalisierte Angebote zu erstellen oder intelligente Rechner zu erstellen.
Es ermöglicht Ihnen sogar, integrierte mathematische Funktionen zu nutzen, um Zahlen zu runden, Zeitbereiche zu berechnen, Durchschnittswerte zu ermitteln und mehr.
3. Eine Rechner-Formularvorlage auswählen
Schließlich benötigen Sie ein fertiges Formular. Wenn Sie eines erstellen müssen, bietet WPForms über 2.100 vordefinierte Vorlagen, die die Formularerstellung zum Kinderspiel machen.
Dazu gehören professionell gestaltete Rechner-Formularvorlagen, die an eine Vielzahl von Anwendungsfällen und Branchen angepasst werden können, wie zum Beispiel:
- Hypothekenrechner-Formularvorlage – perfekt für Immobilienagenturen, da sie potenziellen Käufern ermöglicht, Hypotheken und ihre monatlichen Zahlungen mühelos zu berechnen.
- Versandkostenrechner-Formularvorlage – hilft E-Commerce-Websites, Zeit und Mühe zu sparen, indem sie einen einfachen Versandrechner für Kunden bereitstellt.
- BMI-Rechner-Formularvorlage – ideal für Websites, die sich mit körperlicher Fitness oder Gesundheit befassen und Benutzern bei der Bewertung ihres aktuellen Gesundheitszustands helfen.
- ROI-Rechner-Formularvorlage – unterstützt Unternehmen und Vermarkter bei der effizienten Bewertung der Rentabilität ihrer Kampagnen oder Projekte.
Das Beste daran: Sie können das Calculations Addon verwenden, um benutzerdefinierte Rechner ohne HTML, JavaScript oder komplexe Programmierkenntnisse zu erstellen.
Entfernen der Schaltfläche "Senden"
Sobald diese Voraussetzungen erfüllt sind, können Sie Ihr Formular anpassen, um die Sende-Schaltfläche für eine bessere Benutzererfahrung zu entfernen.
1. Gehen Sie zur WPForms Snippet-Bibliothek
Gehen Sie in Ihrem WordPress-Dashboard einfach zu WPForms » Tools. Navigieren Sie dann zur Registerkarte Code-Snippets.
Dies zeigt eine Popup-Meldung an, die besagt: „Bitte installieren Sie WPCode, um die WPForms-Snippet-Bibliothek zu verwenden.“
2. WPCode installieren + aktivieren
Alles, was Sie jetzt tun müssen, ist, auf die Schaltfläche WPCode installieren + aktivieren zu klicken. Das Plugin wird nun einige Sekunden zur Installation benötigen.
Sobald das WPCode-Plugin installiert ist, können Sie auf die vollständige Liste der WPForms-Snippets zugreifen.
3. Das Snippet "Schaltfläche "Senden" ausblenden" verwenden
Suchen Sie nun nach dem Snippet zum Ausblenden der Sende-Schaltfläche, indem Sie seinen Namen in das Feld Snippets durchsuchen eingeben. Klicken Sie dann auf die Schaltfläche Snippet installieren.
Hier ist der Code-Snippet, den wir importieren werden:
Dies leitet Sie zur Vorschauseite des WPCode-Snippets weiter, wo Sie sehen können, wie der Code automatisch integriert wird.
Jetzt müssen Sie nur noch den Snippet-Code aktivieren. Bewegen Sie dazu den Schalter von Inaktiv auf Aktiv.
Der nächste Schritt zur Aktivierung des Code-Snippets für die gesamte Website ist das Klicken auf die Schaltfläche Aktualisieren, direkt neben der Option Aktiv.
Wenn Sie diesem Ansatz folgen, müssen Sie das Snippet nur einmal über die WPForms-Snippet-Bibliothek hinzufügen.
Dann muss für jedes Formular, auf dem der Benutzer dieses Snippet verwenden möchte, der Name der CSS-Klasse der Sende-Schaltfläche im Builder hinzugefügt werden.
4. CSS-Klasse für die Schaltfläche "Senden" hinzufügen
Jetzt müssen Sie nur noch die CSS-Klasse im Formular-Builder des Rechners hinzufügen, von dem Sie die Sende-Schaltfläche entfernen möchten.
Öffnen Sie dazu Ihr Rechner-Formular und navigieren Sie zur Registerkarte Allgemein, scrollen Sie dann nach unten zur Registerkarte Erweitert.
Fügen Sie anschließend die wpf-calc-form CSS in die CSS-Klasse der Sende-Schaltfläche ein, um das Code-Snippet zu aktivieren.
Sie können Ihr Formular jetzt in der Vorschau anzeigen, um zu sehen, dass die Sende-Schaltfläche Ihres Rechners erfolgreich entfernt wurde!
Weitere Fragen zu Rechner-Formularen
Rechner-Formulare sind ein beliebtes Thema bei unseren Lesern. Hier sind Antworten auf einige häufig gestellte Fragen dazu.
Um die Sende-Schaltfläche in einem Formular zu deaktivieren, insbesondere wenn Sie WPForms Pro verwenden, können Sie benutzerdefiniertes CSS anwenden. Gehen Sie zu WPForms » Tools. Navigieren Sie dann zur Registerkarte Code-Snippets, um auf die WPForms-Snippet-Bibliothek zuzugreifen, die eine Lösung zum Deaktivieren der Sende-Schaltfläche in einem Formular enthält.
Ja, ein Formular kann ohne Sende-Schaltfläche funktionieren. Dies ist üblich bei Formularen, die automatisch gesendet werden oder alternative Methoden zur Datenerfassung verwenden. Mit WPForms Pro können Sie solche Formulare erstellen, indem Sie sie mit CSS anpassen, um die Sende-Schaltfläche auszublenden, und die WPCode-Integration nutzen, um den erforderlichen Code nahtlos hinzuzufügen.
Als Nächstes: Erfahren Sie, wie Sie einen benutzerdefinierten Online-Rechner erstellen
Das Hinzufügen eines Rechners zu Ihrer Website kann das Engagement steigern, indem Besucher dazu ermutigt werden, zu bleiben und ihre Probleme gelöst zu bekommen. Schauen Sie sich diese Anleitung an, wie Sie einen benutzerdefinierten Rechner in WordPress erstellen, für die individuellen Bedürfnisse Ihrer Website.
Einen benutzerdefinierten Online-Rechner erstellen
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.
Dieser CSS-Code verhindert nicht, dass das Formular gesendet wird, wenn die Eingabetaste in einem der Textfelder eines Berechnungsformulars verwendet wird.
Hallo Dean,
Sie haben Recht – dieser CSS-Schnipsel blendet nur die Schaltfläche „Senden“ aus, verhindert aber nicht, dass das Formular gesendet wird, wenn die Eingabetaste in einem Textfeld gedrückt wird.
Wenn Sie auch die Eingabetaste deaktivieren möchten, empfehlen wir die Verwendung des Code-Schnipsels in unserer Entwicklerdokumentation hier: Verhindern, dass die Eingabetaste das Formular sendet.
Ich hoffe, das hilft!