14. Geburtstagssale 33 % Rabatt + 1 GRATIS MONAT LIMITIERTES ANGEBOT Jetzt Angebot sichern
33 % Rabatt + 1 GRATIS MONAT Jetzt Angebot sichern
Sprache:

Kostenloser Kontaktformular-Generator

Lernen Sie, wie Sie kostenlos ein Online-Kontaktformular auf Ihrer Website hinzufügen, um Prozesse zu optimieren. Mit einem Kontaktformular-Generator können Sie Formulare mit relevanten Feldern erstellen und sie einfach mit Diensten zur Erfassung von Einsendungen verbinden.
Sehen Sie, was ChatGPT denkt Öffnen Sie den Live-Widget-Editor
Free Contact Form Generator

Kontaktformular-Generator: Schnelleinführung

SEO-Best-Praktiken. ChatGPT kann darauf trainiert werden, mit SEO im Blick zu schreiben – z. B. relevante Keywords natürlich zu integrieren, Lesbarkeit sicherzustellen und ansprechende Meta-Beschreibungen zu erstellen.

Mit dem Widget von Elfsight lässt sich ganz einfach ein Formular erstellen, das nicht nur anpassbar ist, sondern auch Daten sammelt und direkt an deine bevorzugte Plattform sendet. So einfach ist die Einrichtung:

  1. Vorlage auswählen
  2. Passe die Felder deines Formulars an
  3. Design anpassen
  4. Verbinden Sie die benötigten Integrationen
  5. Kopieren Sie den Widget-Code und fügen Sie ihn auf Ihrer Website ein.

Es ist schnell, nahtlos und effektiv.

Erstellen Sie im Editor Ihr eigenes Kontaktformular ⇩

Anwendungsfälle für Kontaktformulare

Das Einbetten eines Kontaktformulars auf Ihrer Website eröffnet viele Möglichkeiten, nützliche Informationen zu sammeln und Ihr Geschäft zu verbessern. Hier sind fünf wesentliche Anwendungsfälle, die ein Kontaktformular zu einem unverzichtbaren Werkzeug für jeden Website-Besitzer machen:

Ausführliche Anleitung zur Erstellung eines Kontaktformulars

Ob Ihre Situation auf der Liste steht oder Sie eine eigene Idee für die Einbettung des Kontaktformulars auf Ihrer Website haben – es ist an der Zeit zu sehen, wie Sie es in wenigen Minuten mit unserem Kontaktformular-Builder erstellen können. Bereit loszulegen?

  1. Mit einer passenden Vorlage starten. Der Editor bietet Ihnen mehrere Optionen, um Ihr Widget zu starten. Sie sind vorkonfiguriert für die gängigsten Fälle, und Sie können später alles vollständig neu ordnen.
  2. Definieren Sie, wie das Formular aussehen wird. Wählen Sie ein geeignetes Layout für Ihr vertikales oder horizontales Formular. Denken Sie daran, wie es für Website-Besucher am überzeugendsten wirkt.
  3. Formular anpassen. Die „Darstellung“-Registerkarte dient dazu, Ihr Formular ganz individuell zu gestalten: Schriftarten, Farben, Formen und Rahmen Ihrer Felder sowie anderer Elemente ändern.

Das Widget ist fast fertig. Es fehlt jedoch noch ein wichtiges Detail, damit es wirklich nützlich wird.

Wie sammelt man Einsendungen mit meinem Kontaktformular?

Easily connect customer feedback with essential services

Jetzt können Sie Ihr Widget fertigstellen und auf der Website veröffentlichen, um zu sehen, wie alles funktioniert. Der nächste Abschnitt erläutert, wie man ein Kontaktformular in HTML einbettet und auf vielen beliebten Website-Plattformen verwendet.

Wie fügt man ein Kontaktformular in eine Website ein?

Es ist sehr einfach, das Formular-Widget zu jeder Website hinzuzufügen. Wir werfen einen Blick auf einige Anleitungen, die den Prozess für die beliebtesten CMS-Plattformen abdecken.

Kontaktformular zur HTML-Website hinzufügen

Sehen Sie sich dieses Video an, um zu erfahren, wie Sie das Kontaktformular-Widget schnell in jede HTML-basierte Website einbetten. Es ist hilfreich, den Prozess in Aktion zu sehen, bevor Sie loslegen. Falls Sie es bevorzugen, folgen Sie alternativ auch den untenstehenden, klar verständlichen Schritten.

  1. Gehen Sie zum Backend Ihrer Website. Stellen Sie sicher, dass Sie den HTML-Code in Ihrem Admin-Bereich bearbeiten können, um das Widget nahtlos zu integrieren.
  2. Fügen Sie den Elfsight-Code in den HTML-Code Ihrer Website ein. Wählen Sie den Ort, an dem Ihr Formular erscheinen soll, um Ihre Geschäftsziele zu erreichen.
  3. Speichern Sie die Änderungen auf Ihrer Website. Prüfen Sie, ob alles wie geplant funktioniert und auf der Seite konsistent aussieht.

Kontaktformular in HTML erstellen→

Kontaktformular zu Ihrer WordPress-Website hinzufügen.

Sie können Ihr No-Code-Widget schnell in Ihre Website einbetten, indem Sie den bereitgestellten Code in einen Block einfügen. So erscheint Ihr Formular genau an der Stelle, an der Sie es benötigen.

  1. Melden Sie sich bei Ihrem WordPress-Konto an. Sie müssen im Admin-Bereich arbeiten, um Änderungen am HTML-Code vorzunehmen.
  2. Gehen Sie zu „Seiten“ und wählen Sie die gewünschte Seite aus. Berücksichtigen Sie Ihre Geschäftsziele und Ihre Gründe für das Einbetten des Plugins in einen bestimmten Bereich.
  3. Füge einen benutzerdefinierten HTML-Block hinzu. Es muss im vorgesehenen Bereich der Website erscheinen, in den du das Formular eingebettet hast.
  4. Fügen Sie den generierten Code in diesen Block ein. Vergessen Sie nicht, die Seite zu „Aktualisieren“ und die Funktionsweise des Widgets zu überprüfen.

Kontaktformular in WordPress erstellen→

Kontaktformular zur Wix-Website hinzufügen

Das Widget mit Ihrem Formular auf einer festgelegten Wix-Seite hinzuzufügen, ist einfach. Der von Elfsight bereitgestellte benutzerdefinierte Code lässt sich nahtlos in den gewünschten Bereich der Wix-Seiten integrieren.

  1. Greifen Sie auf den Wix-Editor zu. Loggen Sie sich in Ihr Wix-Konto ein und wählen Sie die Website aus, die Sie bearbeiten möchten. Öffnen Sie das Dashboard Ihrer Website und klicken Sie auf „Site bearbeiten“, um den Editor zu öffnen.
  2. Fügen Sie einen HTML-Block für das Formular-Widget hinzu. Klicken Sie auf das Plus-Symbol im linken Menü und wechseln Sie zum Bereich Einbetten. Unter dem Tab „Eigene Einbettungen“ wählen Sie „Widget einbetten“, um einen neuen HTML-Block zu Ihrer Seite hinzuzufügen.
  3. Fügen Sie den Installationscode für das Formular-Widget ein. Klicken Sie auf „Code eingeben“ und fügen Sie den Installationscode ein, der Ihnen vom Editor des Kontaktformular-Widgets bereitgestellt wird. Nachdem Sie den Code eingegeben haben, klicken Sie auf „Aktualisieren“, um das Widget in Ihre Seite einzubetten.
  4. Passen Sie die Abmessungen und die Platzierung des Widgets an. Passen Sie Größe und Position des Widgets auf der Seite an. Stellen Sie sicher, dass es perfekt passt und optisch überzeugt, indem Sie Größe und Position sorgfältig festlegen.
  5. Für mobile Geräte optimieren. Wechseln Sie zum mobilen Editor und passen Sie das Widget nach Bedarf an. Stellen Sie sicher, dass das Widget auf Mobilgeräten gut aussieht, und veröffentlichen Sie Ihre Änderungen, sobald das Layout Ihnen gefällt.

Kontaktformular in Wix erstellen →

Kontaktformular zur Shopify-Website hinzufügen

Sie können das Widget schnell zu jeder Seite Ihrer Shopify-Website hinzufügen. Sie müssen lediglich den vorgefertigten Code von Elfsight in den vorgesehenen Bereich Ihrer Website einfügen.

  1. Gehen Sie zum Shopify-Admin-Bereich. Sie müssen den Bereich „Online Store“ der Website finden.
  2. Wählen Sie im Dropdown-Menü ‘Anpassen’. Danach wählen Sie im linken Menü ‘Abschnitt hinzufügen’.
  3. Unter ‘Benutzerdefinierte Inhalte’ auf ‘Hinzufügen’ klicken. Sie müssen die vorinstallierten Shopify-Elemente entfernen.
  4. Wählen Sie „Benutzerdefiniertes HTML“. Es ist die Option, die Sie im Menü „Inhalt hinzufügen“ finden.
  5. Rufen Sie den Abschnitt ‘HTML’ auf. Hier können Sie den Installationscode des Formulars einbetten und alle Änderungen speichern.

Kontaktformular in Shopify erstellen →

Kontaktformular zur Squarespace-Website hinzufügen

Jeder kann schnell das Kontaktformular auf der gewünschten Seite einer Squarespace-Website einbetten. Alles, was Sie tun müssen, ist den generierten Code von Elfsight in einen bestimmten Block der Seite einzufügen.

  1. Melden Sie sich bei Ihrem Squarespace-Konto an. Melden Sie sich bei Ihrem Squarespace-Konto an und wählen Sie die Website für das Widget aus. Navigieren Sie zum Dashboard Ihrer Website und wählen Sie die Website aus, die Sie bearbeiten möchten.
  2. Gehe zum Abschnitt Website. Wähle die Seite aus, auf der du das Formular-Widget hinzufügen möchtest. Öffne im Hauptmenü den Abschnitt Website und wähle die gewünschte Seite.
  3. Klicken Sie auf Bearbeiten und anschließend auf Abschnitt hinzufügen. Wählen Sie auf der gewünschten Seite Bearbeiten und dann Abschnitt hinzufügen, wo Sie das Widget platzieren möchten. So erstellen Sie einen neuen Bereich auf Ihrer Seite für das Widget.
  4. Fügen Sie einen Code-Block hinzu. Wählen Sie „Einen leeren Abschnitt hinzufügen“, klicken Sie auf „Block hinzufügen“ und wählen Sie aus der Liste „Code“. Hier fügen Sie den Widget-Code Ihres Formulars ein.
  5. Fügen Sie den Installationscode des Widgets ein. Im Bearbeiten-Symbol fügen Sie den Installationscode des Kontaktformular-Widgets ein und passen Sie die Breite des Blocks an. Stellen Sie sicher, dass das Widget gut platziert und optisch ansprechend auf Ihrer Seite wirkt.

Kontaktformular in Squarespace erstellen→

Kontaktformular zur Webflow-Website hinzufügen

Das Hinzufügen des Widgets zu Webflow-Seiten erfolgt reibungslos, da Sie lediglich ein Embed-Element hinzufügen müssen, in dem Sie den generierten Code Ihres Kontaktformulars einbetten.

  1. Starten Sie in Webflow. Melden Sie sich bei Ihrem Webflow-Konto an und wählen Sie die Website aus, in der Sie das Widget einbetten möchten.
  2. Widget einbetten. Im Webflow-Editor klicken Sie auf das Plus-Symbol. Ziehen Sie anschließend das Embed-Element aus dem linken Menü an die Stelle, an der der Button angezeigt werden soll.
  3. Code einfügen. Fügen Sie den Installationscode des Formulars in den erscheinenden HTML-Einbettungscode-Editor ein. Danach klicken Sie auf „Speichern & Schließen.“
  4. Anpassung und Veröffentlichung. Passen Sie die Einstellungen Ihres Formulars an, klicken Sie anschließend auf „Veröffentlichen“ und wählen Sie die Domains für die Aktivierung aus.

Kontaktformular in Webflow erstellen →

Kontaktformular zur Elementor-Website hinzufügen

Es ist einfach und praktisch, das Kontaktformular-Widget in Elementor einzubetten. Sie benötigen lediglich einen leeren Block auf Ihrer Seite, in den Sie den Widget-Code einfügen.

  1. Starten Sie im WordPress-Backend. Melden Sie sich im Backend Ihrer WordPress-Website an, gehen Sie zu ‘Seiten’ und wählen Sie die Seite aus, auf der Sie das Kontaktformular-Widget hinzufügen möchten.
  2. Elementor-Bearbeitung starten. Wählen Sie ‘Mit Elementor bearbeiten’, um Ihre gewählte Seite anzupassen.
  3. Das HTML-Element implementieren. Verwenden Sie die Drag-and-Drop-Funktion, um das HTML-Element auf Ihrer Seite zu platzieren.
  4. Fügen Sie den Widget-Code in Ihre Website ein. Fügen Sie den Installationscode des Formulars von Elfsight in das HTML-Code-Feld ein.
  5. Aktualisieren und genießen. Klicken Sie auf „Aktualisieren“, um Ihre Änderungen anzuwenden und zu sehen, wie sich Ihre Seite mit dem eingebetteten Formular transformiert.

Kontaktformular in Elementor erstellen→

Kontaktformular-Widget: Vorteile

Das Widget von Elfsight ermöglicht es Ihnen, Kontaktformulare zu erstellen, die Ihrem Unternehmen in vielerlei Hinsicht echten Mehrwert bieten. Werfen Sie einen Blick auf einige der wichtigsten Vorteile unserer code-freien Formulare.

Beispiele für eingebettbare Kontaktformulare

Werfen wir einen Blick auf einige Beispiele für Kontaktformulare, die Sie erstellen und in Ihre Website einbetten können, um Kundenfeedback, Anfragen und Informationen zu sammeln.

Mehrschrittiges Kontaktformular

Das Multistep Contact Form teilt lange Formulare in überschaubare Abschnitte auf, indem es Seiten verwendet. Es eignet sich perfekt für komplexe Anfragen oder Datenerhebungen und ermöglicht es Nutzern, jeden Schritt einfach zu durchlaufen. Indem Sie das Formular in Schritte unterteilen, wird es benutzerfreundlicher und weniger überwältigend, sodass Besucher ihre Einsendungen abschließen, ohne sich überfordert zu fühlen.

Multistep Contact Form

Zahlungsformular

Der Payment Contact Form ist ideal für Unternehmen, die Zahlungen direkt über das Formular abwickeln müssen, da es ein Zahlungsfeld enthält und nahtlose Transaktionen ermöglicht. Egal, ob Sie Gebühren für Dienstleistungen, Produkte oder Veranstaltungsregistrierungen einziehen, bietet dieses Formular eine bequeme Möglichkeit, Zahlungen abzuwickeln und gleichzeitig weitere wichtige Details von Ihren Kunden zu erfassen.

Payment Contact Form

Datei-Upload-Kontaktformular

Datei-Upload-Kontaktformular

File Upload Contact Form

Kontaktformular mit bedingter Logik

Das Conditional Logic Contact Form bietet dynamische Felder, die basierend auf den Antworten der Nutzer erscheinen. Wenn ein Kunde sowohl eine E-Mail-Adresse als auch eine Telefonnummer ausfüllt, kann er auswählen, wie er kontaktiert werden möchte. Perfekt, um das Formularerlebnis an die Bedürfnisse der Nutzer anzupassen, das Formular übersichtlich zu halten und nur relevante Optionen anzuzeigen.

Conditional Logic Contact Form

Schwebendes Kontaktformular

Das Floating Contact Form ist die ideale Lösung, wenn der Platz im Hauptinhalt deiner Website begrenzt ist. Dieses Formular bleibt an der linken oder rechten Seite des Bildschirms befestigt, immer sichtbar und erreichbar, ohne wertvollen Platz im Hauptlayout zu beanspruchen. So können Kunden jederzeit Kontakt aufnehmen, ohne den Fluss der Website zu unterbrechen.

Floating Contact Form

Schauen Sie sich noch viele weitere Vorlagen an, die Ihnen helfen, die beste Lösung für Ihren Anwendungsfall zu finden:

Vorlagenkatalog

40+ Kontaktformular-Vorlagen entdecken

Entdecken Sie weitere fertige Vorlagen für jeden Anwendungsfall oder erstellen Sie Ihre eigene!
HTML Sms Contact Form template
Erstellen Sie ein Formular zum Sammeln von Kontaktdaten und integrieren Sie SMS-Benachrichtigungen mit der Vorlage für Ihre Website.
HTML Quick Contact Form template
Erstellen Sie schnell ein Formular, um mit Ihrem Publikum über die Website-Vorlage in Kontakt zu bleiben.
HTML Horizontal Contact Form template
Erstelle ein horizontales Kontaktformular mit der Vorlage für deine Website.
HTML Footer Contact Form template
Erstellen Sie ein Kontaktformular mit integrierter Fußzeilen-Funktion – basierend auf der Website-Vorlage.
HTML Dynamic Contact Form template
Erstellen Sie ein dynamisches Formular, um mit Website-Besuchern in Kontakt zu bleiben.
Kein geeignetes Formular-Template?
Erstellen Sie Ihr Formular mit Elfsight AI, indem Sie Ihre Anforderungen in einfacher Sprache beschreiben, oder erstellen Sie Ihr eigenes Formular mit unserem Formular-Builder.

FAQ (Häufig gestellte Fragen)

Wie fügt man Captcha zum Kontaktformular hinzu?

Das geht ganz einfach mit dem einbettbaren Formular von Elfsight. Wenn Sie im Editor arbeiten, öffnen Sie die Registerkarte Einstellungen und finden dort die Option Spam-Schutz. Sie sehen einen Schieberegler, mit dem Sie Captcha sofort zu Ihrem Kontaktformular hinzufügen können.

Wie verknüpfen Sie ein Kontaktformular mit Ihrer E-Mail?

Wenn Sie Ihr Kontaktformular-Widget erstellen, wechseln Sie zum Reiter »E-Mail«, um eine E-Mail-Adresse festzulegen, die alle Einsendungen Ihres Formulars erhält.

Wie zentriert man ein Formular?

Gehen Sie zum Reiter ‘Layout’ und wählen Sie die Option ‘Inline’, um Ihr Formular im zentralen Bereich der Startseite, der Kontaktseite oder der Fußzeile zu positionieren. Sie können auch die Breite anpassen.

Wie findet man eine E-Mail-Adresse aus dem Kontaktformular?

Fügen Sie das Feld zur Eingabe der E-Mail-Adresse des Besuchers in Ihr Kontaktformular ein. Wenn der Besucher das Formular absendet, erhalten Sie alle vom Nutzer gemachten Angaben – einschließlich der E-Mail-Adresse.

Weitere Ideen, um Ihre Website zu erweitern

  • <strong>Ist Ihre Marke in sozialen Medien aktiv?</strong> Wir haben ein Widget, das Ihnen hilft, Ihre Social-Media-Aktivitäten auf der Website zu bewerben. Werfen Sie einen Blick auf das Social-Feed-Widget von Elfsight, das Ihre Formulare begleitet und loyale Zielgruppen stärker erreicht.
  • Mit Zahlen umgehen? Es gibt eine weitere Form, die bei Elfsight an Beliebtheit gewinnt: Calculator widget. Mit zahlreichen Berechnungsfeldern, einfachem Builder und KI-Funktion zur automatischen Generierung von Taschenrechnern, können Sie eine perfekte Lösung für Ihre Kunden erstellen, die den Nutzen Ihres Angebots messen möchten.
  • Möchten Sie mehr Feedback erhalten? Binden Sie Bewertungen von Amazon, Facebook, Yelp und 30+ weiteren Anbietern in unser All-in-One Reviews-Widget ein. Sie können Umfragen im Formular organisieren, doch die Möglichkeit, eine öffentliche Bewertung Ihres Unternehmens zu schreiben, kann das Engagement und das Vertrauen Ihrer Kunden noch stärker steigern.

Oder werfen Sie einfach einen Blick auf die Liste aller Widgets, die Elfsight entwickelt hat, um E-Commerce, Social-Media-Aktivitäten und Website-Management zu vereinfachen.

Haben Sie eine Frage?

Wir hoffen, dieser Leitfaden war hilfreich. Wenden Sie sich gerne an uns, wenn Sie weitere Informationen zur Einbettung des Kontaktformular-Widgets benötigen oder Unterstützung benötigen. Wir sind hier, um sicherzustellen, dass Ihre Erfahrung reibungslos und erfolgreich verläuft. Elfsight bietet eine vollständige No-Code-Lösung für Ihre Website-Bedürfnisse. Wir sind außerdem eine lebendige Community, in der Ideen und Fachwissen zusammenkommen, also teilen Sie gerne Ihre kreativen Vorschläge in unserer Wunschliste!

Artikel von
Technischer Content-Spezialist
Ivan ist technischer Content-Spezialist bei Elfsight. Er verfasst praxisnahe API-Anleitungen und Entwicklerdokumentationen, die Integrationen für verschiedene Plattformen und Automatisierungs-Workflows abdecken – und manuelle Arbeit reduzieren.