Wie füge ich ein Kontaktformular (Kontaktseite) in Blogger hinzu?

Veröffentlicht: 2020-11-10

Das Hinzufügen eines Kontaktformulars in Blogger ist eine mühsame Aufgabe, da Plugins wie WordPress nicht unterstützt werden.

Was die meisten Blogspot-Blogger tun, ist die Hilfe von Websites von Drittanbietern (foxyform, jotform, 123contactform usw.).

Blogger-Kontaktformularseite Heute erfahren Sie jedoch, wie Sie eine offizielle Kontaktseite in Blogger hinzufügen.

Wie ich bereits sagte, ist es möglich, Codes von Drittanbietern in neue Seiten einzufügen, wie bei einem Spaziergang im Park. Das offizielle Kontaktformular ist jedoch weitaus besser als diese.

Die Vorteile des offiziellen Blogger-Formulars

Sie erhalten die Nachricht, sobald Sie sie senden. Die Zustellbarkeit beträgt ebenfalls 100%.
Die einfache Oberfläche erleichtert den Besuchern die Kontaktaufnahme.
Wenn Sie die CSS-Sprache (Cascade Style Sheet) kennen, können Sie das Formular ganz einfach nach Ihren Wünschen anpassen.
Die gesamte Seite wird zum Senden der Nachricht nicht neu geladen.

Ich habe dieses Tutorial in drei Abschnitte unterteilt, das Kontakt-Gadget hinzugefügt, ausgeblendet und den offiziellen Code auf einer neuen Seite implementiert.

Teil 1: Hinzufügen des Kontakt-Gadgets

Befolgen Sie die unten angegebenen Schritte, um ein Kontakt-Gadget in Ihrem Blog hinzuzufügen.

Schritt 1 : Besuchen Sie blogger.com und melden Sie sich bei Ihrem Konto an. Wenn Sie mehrere Blogs ausführen, müssen Sie das gewünschte Blog aus der Liste auswählen.

Schritt 2 : Klicken Sie in der linken Seitenleiste auf Layout, um eine Option zum Hinzufügen von Gadgets zu erhalten.

Schritt 3 : Im Hauptfenster auf der rechten Seite sehen Sie einen Link zum Hinzufügen eines Gadgets . Wenn Sie darauf klicken, gelangen Sie zu einer Liste der Gadgets.

Schritt 4 : Wählen Sie dann auf der linken Seite Weitere Gadgets . Jetzt sehen Sie das Kontaktformular . Fügen Sie einfach das gleiche hinzu.

Teil 2: Das Gadget verstecken

Jetzt lernen Sie, wie Sie das Kontakt-Gadget ausblenden.

Schritt 1 : Wir müssen hier mit dem Vorlagenabschnitt spielen. Klicken Sie also im linken Menü auf Vorlagen.

Schritt 2 : Klicken Sie dann auf HTML bearbeiten und Sie erhalten den gesamten Code Ihres Blogs in einem großen Feld.

Schritt 3 : Suchen Sie nach ]]> </ b: skin> und platzieren Sie den folgenden Code direkt davor.

div # ContactForm1 {
Anzeige: keine! wichtig;
}}

Klicken Sie dann auf Speichern, um die Änderungen beizubehalten.

Nach dem dritten Schritt wird das Kontakt-Widget in Ihrem Blog nicht mehr angezeigt.

Teil 3: Hinzufügen eines Kontaktformulars zu einer Seite

Sie erhalten hier den angepassten offiziellen Code für das Blogger-Kontaktformular, der hinzugefügt und auf einer separaten Seite angezeigt wird.

Schritt 1 : Gehen Sie zu Seiten und klicken Sie auf Neue Seite.

Schritt 2 : Fügen Sie den folgenden Code in den HTML-Post-Editor ein, nachdem Sie alles darin entfernt haben.

<div id = ”custom_ContactForm1 ″ class =” Widget ContactForm ”>
<div class = ”Kontaktformular-Widget”>
<p> Nehmen Sie Kontakt mit uns auf, indem Sie das folgende Formular ausfüllen. </ p>
<div class = ”form”>
<form name = ”Kontaktformular”>
<p> </ p>
Name
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” name ”id =” ContactForm1_contact-form-name ”class =” contact-form-name ”>
<p> </ p>
Email
<span style = ”font-weight: kühner;”> * </ span>
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” email ”id =” ContactForm1_contact-form-email ”class =” contact-form-email ”>
<p> </ p>
Botschaft
<span style = ”font-weight: kühner;”> * </ span>
<br>
<textarea rows = ”5 ″ name =” email-message ”id =” ContactForm1_contact-form-email-message ”cols =” 25 ″ class = ”contact-form-email-message”> </ textarea>
<p> </ p>
<input type = ”button” value = ”Send” id = ”ContactForm1_contact-form-submit” class = ”Kontaktformular-button Kontaktformular-button-submit”>
<p> </ p>
<div style = ”Textausrichtung: Mitte; maximale Breite: 222px; Breite: 100% ”>
<p id = ”ContactForm1_contact-form-error-message” class = ”contact-form-error-message”> </ p>
<p id = ”ContactForm1_contact-form-success-message” class = ”contact-form-success-message”> </ p>
</ div>
</ form>
</ div>
</ div>
<div class = ”clear”> </ div>
<span class = ”Widget-Item-Control”>
<span class = ”item-control blog-admin”>
<a title = ”Edit” target = ”configContactForm1 ″ onclick =” return _WidgetManager._PopupConfig (document.getElementById (“ContactForm1 ″));” href = ”// www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1 ″ class =” quickedit ”>
<img width = ”18 ″ height =” 18 ″ src = ”// img1.blogblog.com/img/icon18_wrench_allbkg.png” alt = ””>
</a>
</ span>
</ span>
<div class = ”clear”> </ div>
</ div>

Schritt 3: Fügen Sie einen Titel hinzu (z. B. Kontakt) und ändern Sie die Einstellungen wie unten angegeben.

Schritt 4: Klicken Sie abschließend auf die Schaltfläche Veröffentlichen. Das ist alles.

Die von diesem Kontaktformular gesendeten Nachrichten werden an die Administrator-E-Mail gesendet. Wenn der Blog mehr als einen Administrator hat, erhalten alle diesen.

➜ Andere nützliche Blogspot-Tutorials:

Wie füge ich eine benutzerdefinierte Robots.txt-Datei in Blogger hinzu?
Wie sende ich eine Blogger-Sitemap an die Google Search Console?

Einpacken

Ich hoffe, Sie wissen jetzt, wie Sie eine Kontaktseite in Blogger hinzufügen können. Wenn Sie auch nach einer Erfolgsmeldung Schwierigkeiten wie die Zustellbarkeit von Null feststellen, empfehle ich, das Kontakt-Widget neu zu installieren.

Und ja, wenn Sie über ausreichende Kenntnisse im Umgang mit CSS- und Javascript-Snippets verfügen, können Sie die Seite für eine bessere visuelle Attraktivität weiter anpassen.

Vergiss nicht, diesen Beitrag mit deinen Blogger-Freunden zu teilen.