TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Kontaktformular auf der Weebly-Site hinzufügen und anpassen

15

Es gibt viele einfache Möglichkeiten, Ihrer Weebly-Site Formulare hinzuzufügen. Sie können das standardmäßige „Contact Form”-Element von Weebly verwenden, Formulare aus dem App Center verbinden und Formularcodes von Drittanbietern einbetten. Als natives Element lässt sich das standardmäßige „Contact Form”-Element von Weebly einfach integrieren und die eingegangenen Formularübermittlungen einfach über das Dashboard verwalten oder iPhone/Android-Apps. In diesem Artikel besprechen wir die Funktionen des Standardelements „Kontaktformular" und die Möglichkeiten, es anzupassen. Neben dem Kontaktformular bietet Weebly auch zwei weitere Formularelemente – RSVP-Formular und Umfrageelement.

Verwandte: Wie füge ich ein Kontaktformular in WordPress-Sites hinzu?

„Kontaktformular” ist eines der Drag-and-Drop-Elemente, die im Weebly-Site-Editor unter der Gruppe „Basic” gruppiert sind. Sobald Sie das Kontaktformular im Inhaltsbereich hinzugefügt und darauf geklickt haben, können Sie sehen, dass sich die Elementespalte im Weebly-Editor automatisch in Formularfelder ändert. Alle Formularfelder sind in die folgenden drei Kategorien eingeteilt:

Formularfelder:

  • Kurzes Textfeld
  • Großes Textfeld
  • Optionsschaltflächen
  • Dropdown-Feld
  • Checkboxen
  • Datei-Upload für Pro-Benutzer
  • Name, E-Mail, Adresse und Telefonnummer

Struktur:

  • Teiler und Abstandshalter

Basic:

  • Titel, Text, Bild und Einbettungscode

Kontaktformular auf der Weebly-Site hinzufügen und anpassen

Felder in Weebly-Form ziehen und ablegen

Wie bei normalen Elementen können Sie jedes Feld ziehen und in Ihr Formular einfügen. Ein Klick auf das Formularelement zeigt drei Optionen Einträge anzeigen, Formularoptionen und Speichern an.

Formularoptionen

Klicken Sie auf die Schaltfläche Formularoptionen, um das Popup-Fenster für erweiterte Formularoptionen anzuzeigen, wie in der Abbildung unten gezeigt.

Kontaktformular auf der Weebly-Site hinzufügen und anpassen

Weebly Kontaktformular Optionen

Die verfügbaren Anpassungsoptionen sind:

  • Formularname – Geben Sie einen Namen für Ihr Formular ein. Wenn Sie mehrere Formulare auf Ihrer Site haben, können Sie die Formularnamen verwenden, um die Übermittlungen basierend auf dem Formularnamen einfach anzuzeigen.
  • E-Mail-Übermittlung an – Dies ist eine E-Mail-ID, über die Sie sofort benachrichtigt werden, wenn ein Formular gesendet wird.
  • Bestätigungsnachricht nach dem Absenden – Mit der Bestätigungsoption können Sie dem Benutzer nach dem Absenden des Formulars eine automatische Antwort anzeigen. Sie können entweder eine Textbestätigungsnachricht einrichten oder eine beliebige Webseite verlinken. Die Textnachricht wird nach dem Absenden im Formularbereich angezeigt. Sie können jede externe Webseite oder Ihre eigene Site oder Store-Seite in der Link-Option verbinden, die nach dem Absenden angezeigt wird.
  • Abstand – Wird verwendet, um den Abstand der oberen und unteren Ränder des Formularelements anzupassen.
  • Senden-Schaltfläche – Wird verwendet, um die Senden-Schaltfläche links, zentriert oder rechts in Bezug auf Ihre Formularbreite auszurichten. Sie können auch einen beliebigen freien Text wie „Kontakt” eingeben, anstatt ihn auf dem Schaltflächenelement abzusenden.

Hinweis: Im Allgemeinen erstellen Sie auf Ihrer Site eine Dankesseite mit den benutzerdefinierten Informationen, die Sie den Benutzern anzeigen möchten, und verknüpfen diese mit dem Formular. Die Dankesseite wird angezeigt, sobald der Benutzer das Formular abschickt und bietet dem Benutzer mehr Möglichkeiten, die Links auf der Dankesseite zu erkunden.

Anpassung auf Feldebene

Wenn Sie in eines der Formularfelder klicken, wird ein Popup-Fenster angezeigt, das für dieses Feld gilt. Sie können den Feldnamen ändern, ihn optional oder erforderlich machen, Anweisungen zum Ausfüllen hinzufügen und den Abstand des Felds innerhalb des Formulars anpassen. Wenn Sie ein Pflichtfeld erstellen, wird ein Stern über dem Feldnamen angezeigt, der den Benutzer angibt, der ein Pflichtfeld ist. Wenn die Pflichtfelder nicht ausgefüllt werden, kann das Formular nicht gesendet werden und die Meldung „Bitte korrigieren Sie die markierten Felder” und das Feld wird rot hervorgehoben.

Kontaktformular auf der Weebly-Site hinzufügen und anpassen

Anweisung und Pflichtfeld

Anweisungen helfen den Benutzern beim Ausfüllen dieses bestimmten Felds und die Hilfenachricht wird angezeigt, wenn das Feld fokussiert ist.

Einige der Felder wie "Options-Buttons", "Checkboxen" und "Dropdown-Box" haben zusätzliche Optionen, wie in der Abbildung unten gezeigt. Sie können beliebig viele benutzerdefinierte Optionen für die Benutzerauswahl eingeben oder aus der vordefinierten Optionsliste auswählen. Die vordefinierten Optionen haben eine lange Liste von Auswahlmöglichkeiten wie Vergleich, Geschlecht, US-Bundesstaaten, Wie lange, Wie oft, Monate des Jahres, Wochentage usw.

Kontaktformular auf der Weebly-Site hinzufügen und anpassen

Verwenden von Optionsfeldern im Weebly-Kontaktformular

Formularoptionen für Pro-Benutzer

Pro-Benutzer haben die folgenden zusätzlichen Formularfunktionen:

  • Datei-Upload – Dies ist ein Profi-Feld, das dem Benutzer hilft, ein Formular mit einer hochgeladenen Datei zu senden. Dies ist eine sehr nützliche Funktion, damit der Benutzer zusätzliche Dokumente oder Screenshots hochladen kann, die Ihnen wiederum helfen, einen besseren Support zu bieten. 20 MB ist die maximale Dateigröße, die in ein Formular hochgeladen werden kann.
  • Hinzufügen eines Formulars in der Fußzeile – Zusätzlich zum Hinzufügen eines Formulars im Inhaltsbereich der Site können Pro-Benutzer auch ein Formular im Fußzeilenbereich hinzufügen. Das Kontaktformular kann in der Fußzeile hinzugefügt werden, die auf allen Seiten einer Site angezeigt wird.

Kontaktformular auf der Weebly-Site hinzufügen und anpassen

Datei-Upload im Weebly-Formular

Anzeigen von Formulareinträgen

Formulareinträge können auf verschiedene Weise eingesehen werden und die erforderliche Antwort kann entsprechend an den Einreicher gesendet werden.

  • Klicken Sie auf das Formular, um die Schaltfläche "Einträge anzeigen" anzuzeigen. Klicken Sie darauf, um ein neues Fenster mit allen Formulareinsendungen zu öffnen.
  • Sie erhalten auch eine E-Mail-Benachrichtigung, wenn ein Formular gesendet wird.
  • Zeigen Sie die Formulareinsendungen direkt über das Dashboard an.

Kontaktformular auf der Weebly-Site hinzufügen und anpassen

Kontaktformulareinträge im Weebly Dashboard anzeigen

Anpassen von Tricks für das Weebly-Kontaktformular

Größe des Kontaktformulars anpassen

Die Größe des Weebly-Formulars kann standardmäßig nicht angepasst werden. Um die Größe zu ändern, platzieren Sie die „Spacer”-Elemente neben dem Formularelement und passen Sie die Breite des Formulars an.

Reduzierung von Spam-Formularübermittlungen

Eines der größten Probleme mit dem Weebly-Kontaktformular sind die Spam-Einsendungen – Spammer und Bots senden Spam-Einträge und überfluten Ihre Mailbox. Da Weebly kein CAPTCHA für Kontaktformulare anbietet, wird der Umgang mit Spam-Einsendungen für Seitenbesitzer eine lästige Aufgabe. Es gibt zwei Möglichkeiten, die Spams zu reduzieren, ohne den Code zu ändern:

  1. Fügen Sie im Kontaktformular „Checkboxen” hinzu und machen Sie es zu einem Pflichtfeld. Sie können den „Feldtitel” als „Ich bin kein Roboter” festlegen und ein „Optionselement” als „Ich bin ein Mensch” hinzufügen. Dadurch werden Benutzer gezwungen, das Kontrollkästchen zu aktivieren, und das Formular kann nicht gesendet werden, ohne es aktiviert zu haben.
  2. Verwenden Sie auf ähnliche Weise "Optionsschaltflächen" und ändern Sie den "Feldtitel" in "CAPTCHA-Check" oder "Human Check" und machen Sie ihn zu einem Pflichtfeld. Fügen Sie ein einzelnes Optionselement wie "Ich bin ein Mensch, kein Roboter" oder einen beliebigen Text hinzu. Jetzt muss der Benutzer die Option auswählen, um das Kontaktformular abzusenden.

Kontaktformular auf der Weebly-Site hinzufügen und anpassen

Manuelles Captcha im Weebly-Kontaktformular hinzufügen

Bei beiden oben genannten Optionen können die automatischen Bots das Kontrollkästchen oder die Optionsschaltfläche nicht auswählen, wodurch die Spam-Einträge gestoppt werden.

Kontaktformular auf der Weebly-Site hinzufügen und anpassen

Verhindern Sie Spam-Einsendungen im Weebly-Kontaktformular

Ändern der Hintergrundfarbe des Weebly-Kontaktformulars

Viele Benutzer haben uns eine E-Mail geschickt und nach der Möglichkeit gefragt, die Hintergrundfarbe des Weebly-Kontaktformulars zu ändern, und hier ist, wie das geht. Jedes Kontaktformular hat nach der Veröffentlichung der Site eine Formular-ID. Klicken Sie mit der rechten Maustaste auf das Kontaktformular auf einer veröffentlichten Site und klicken Sie auf die Option "Inspect" oder "Inspect Element" und finden Sie die Formular-ID-Nummer für Ihr Kontaktformular, wie im Bild unten gezeigt. Die #id des Formulars ist so etwas wie „form-1234567890123″ und ist für jedes Formular eindeutig.

Kontaktformular auf der Weebly-Site hinzufügen und anpassen

Kontaktformular #ID in Weebly finden

Gehen Sie nun zum Weebly-Editor und fügen Sie den folgenden CSS-Code im Abschnitt "Header-Code" der Seite hinzu, auf der Sie ein Kontaktformular haben. Vergessen Sie nicht, die #id des Formulars durch Ihre eigene #id zu ersetzen.

<style> #form-632853235871630597 { background-color: beige; padding: 15px 15px 0 15px; border-radius: 10px; border: 1px solid rgba(158, 158, 158, 0.22); } </style>

Wenn Sie mehrere Formulare haben, können Sie diese entweder mit unterschiedlichen Hintergrundfarben anpassen oder alle Formular-IDs wie #ID1, ID2 hinzufügen und für alle Formulare dieselben Stile verwenden. Wenn Sie mehr Formulare haben, fügen Sie das CSS im Abschnitt „Einstellungen > SEO > Header-Code ” oder in der Datei „main.less” hinzu.

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen