Möchten Sie benutzerdefinierte HTML-Code-Snippets in Ihre WordPress-Kontaktformulare einbetten? Das Hinzufügen von benutzerdefiniertem HTML zu Ihrem Formular ist eine großartige Möglichkeit, kreativ zu werden und Ihre Formulare zu verbessern.
Die besten WordPress-Formular-Plugins ermöglichen es Ihnen, Formulare ohne Code zu erstellen und gleichzeitig Ihr eigenes benutzerdefiniertes HTML zu Ihren Formularen hinzuzufügen, um sie noch fortschrittlicher zu machen.
In diesem Tutorial zeigen wir Ihnen, wie Sie mit WPForms benutzerdefiniertes HTML zu Ihren WordPress-Formularen hinzufügen können.
Warum benutzerdefiniertes HTML zu Ihrem Kontaktformular hinzufügen?
Sie fragen sich vielleicht, warum Sie HTML zu Ihren WordPress-Formularen hinzufügen sollten.
In vielen Fällen möchte ein fortgeschrittener Benutzer oder Webentwickler die Funktionalität eines Formulars erweitern. Einer der Hauptvorteile des Hinzufügens von benutzerdefiniertem HTML zu Ihrem Formular ist, dass es Ihnen hilft, Ihr Formular vom Rest des Inhalts abzuheben.
Im folgenden Beispiel können Sie sehen, wie einfach es ist, einen Link zu einer Datenschutzrichtlinie in einen Text auf Ihrem Kontaktformular einzufügen.
Die Besucher werden also etwa so etwas sehen:
Außerdem können Sie Ihrem Formular mithilfe von benutzerdefiniertem HTML-Code ein Bild hinzufügen, um das Formular optisch ansprechender zu gestalten oder um Produkte und benutzerdefinierte Produktoptionen zu präsentieren.
Wenn Sie diese zusätzlichen Funktionen zu Ihren Formularen hinzufügen, können Sie das Formular auf der Seite hervorheben und so die Aufmerksamkeit Ihrer Besucher wecken. Dies kann dazu beitragen, sie zum Absenden Ihres Formulars zu ermutigen.
Durch das Hinzufügen von benutzerdefiniertem HTML zu Ihrem Formular ergeben sich zahlreiche Möglichkeiten zur Verbesserung Ihres WordPress-Formulars. Einige dieser Ideen sind:
- Betten Sie ein YouTube-Video ein: Sie können Ihr Formular noch ansprechender gestalten, indem Sie ein YouTube- oder Vimeo-Video in Ihr Formular einbetten.
- Google Maps einbetten: Auf Ihrer Kontaktseite können Sie den Standort Ihres Unternehmens anzeigen, indem Sie Google Maps in Ihr Kontaktformular einbetten.
- Ein exklusives Angebot mit bedingter Logik anzeigen: Wenn Sie ein Bestellformular erstellen, können Sie einen HTML-Block mit einem exklusiven Angebot anzeigen, wenn ein Benutzer eine bestimmte Option in Ihrem Formular auswählt. Diese intelligente bedingte Logik eignet sich hervorragend für Upsells und um Ihr Formular kurz zu halten.
- Zeigen Sie Ihre Datenschutzrichtlinie an: Fügen Sie einen Text mit einem Link zu Ihrer Datenschutzrichtlinie direkt in Ihr Formular ein.
Hinzufügen von benutzerdefiniertem HTML-Code zu Ihrem WordPress-Kontaktformular
Wenn Sie es vorziehen, das Tutorial zu lesen, befolgen Sie diese Anweisungen, um in Ihren Formularen einen Platz für Ihren benutzerdefinierten HTML-Code zu schaffen.
Schritt 1: WPForms installieren
Das erste, was Sie tun müssen, um loszulegen, ist das WPForms-Plugin zu installieren und zu aktivieren. Es ist ein einfach zu bedienender Formularersteller, mit dem Sie von einfachen Formularen bis hin zu fortgeschrittenen Formularen alles erstellen können. Es ist eines der besten WordPress-Plugins, die es gibt.
Wenn Sie neu im Herunterladen von Plugins sind, finden Sie hier eine Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Außerdem müssen Sie ein Formular erstellen lassen. Lassen Sie uns fortfahren und das als nächstes tun.
Schritt 2: Ein Formular erstellen
Der nächste Schritt besteht darin, Ihr erstes Formular zu erstellen. Sie können ein beliebiges Formular wählen, dem Sie einen benutzerdefinierten HTML-Code hinzufügen möchten, aber für dieses Beispiel werden wir ein einfaches Kontaktformular mit der WPForms-Herausforderung erstellen.
Sehr gut. Als Nächstes fügen wir das Feld hinzu, das benutzerdefiniertes HTML akzeptiert.
Schritt 2: Fügen Sie einen HTML-Block zu Ihrem Formular hinzu
Nun müssen Sie ein HTML-Feld zu Ihrem Formular hinzufügen. Sie finden es unter der Registerkarte Felder und dann Fancy Fields.
Ziehen Sie dann einfach das Feld aus dem linken Bereich in das Formular auf der rechten Seite.
Es ist wirklich so einfach, ein benutzerdefiniertes HTML-Feld zu Ihrem WordPress-Kontaktformular mit WPForms hinzuzufügen.
Schritt 3: Fügen Sie Ihr eigenes HTML ein
Nun, da Ihr benutzerdefiniertes HTML-Feld in Ihrem Kontaktformular enthalten ist, können Sie Ihr benutzerdefiniertes HTML-Code-Snippet hinzufügen.
Gehen Sie zu Ihrem Formular auf der rechten Seite und klicken Sie auf das HTML/Code-Blockfeld, das Sie gerade hinzugefügt haben.
Gehen Sie dann zum linken Bedienfeld, wo Sie unter Feldoptionen das Feld HTML-Code sehen .
Hier können Sie Ihr eigenes HTML-Code-Snippet einfügen.
Fügen Sie also Ihr benutzerdefiniertes HTML in dieses Feld ein. Sie können jede Art von benutzerdefiniertem HTML-Code-Schnipsel in Ihr Formular einfügen.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Speichern in der oberen rechten Ecke.
Jetzt können wir das Formular auf Ihrer Website einrichten!
Schritt 4: Fügen Sie Ihr benutzerdefiniertes HTML-Kontaktformular zu Ihrer WordPress-Website hinzu
Nachdem Sie also Ihr Kontaktformular mit einem benutzerdefinierten HTML-Feld mit dem WPForms-Plugin erstellt haben, möchten Sie es zu Ihrer Website hinzufügen.
Klicken Sie zunächst auf die Schaltfläche Einbetten im Formularersteller.
Wenn nun die Meldung In eine Seite einbetten erscheint, klicken Sie auf die Schaltfläche Neue Seite erstellen .
Als nächstes wird WPForms Sie bitten, Ihre Seite zu benennen. In unserem Beispiel fügen wir dieses benutzerdefinierte HTML-Kontaktformular zu einer Kontaktseite hinzu, also nennen wir es Contact Us.
Geben Sie den Titel der gewünschten Seite in das Feld ein und klicken Sie auf Los geht's!
Jetzt sehen Sie die brandneue Seite mit Ihrem benutzerdefinierten HTML-Kontaktformular. Sie können nun auf die Schaltfläche Veröffentlichen in der oberen rechten Ecke der Seite klicken.
Und dann werfen Sie einen Blick auf Ihr neues Formular. Sie sollten es in Aktion sehen können.
Sie haben es geschafft. Sie haben die Einrichtung eines WordPress-Kontaktformulars mit einem benutzerdefinierten HTML-Feld abgeschlossen.
Abschließende Überlegungen zu benutzerdefinierten HTML-Formularen
Gute Arbeit. Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, zu lernen, wie Sie das benutzerdefinierte HTML-Feld in Ihren Kontaktformularen in WordPress einrichten.
Nachdem Sie nun benutzerdefinierten HTML-Code zu Ihrem Formular hinzugefügt haben, sollten Sie einen Blick auf unseren Leitfaden zur Gestaltung von Kontaktformularen in WordPress werfen, um sicherzustellen, dass Ihr benutzerdefinierter Code so aussieht, wie Sie es wünschen.
Worauf warten Sie also noch? Starten Sie noch heute mit dem leistungsstärksten WordPress-Formular-Plugin und beginnen Sie mit der einfachen Erstellung schöner, individueller Formulare für die Website Ihres kleinen Unternehmens.
Und wenn Ihnen dieser Artikel gefällt, dann folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials.
