So erstellen Sie eine WordPress-Kontaktseite

Veröffentlicht: 2021-04-21

Die WordPress-Kontaktseite ist ein wesentlicher Bestandteil jeder Unternehmenswebsite, jedes persönlichen Blogs oder jeder Online-Portfolioseite. Über ein Kontaktformular kann Ihr Publikum Sie nach weiteren Details zu Ihren Produkten oder Dienstleistungen fragen. Damit können Sie die Glaubwürdigkeit Ihrer Website steigern und mehr Details über Ihren Kundenstamm sammeln. Ungeachtet der vielen Vorteile eines Kontaktformulars enthält WordPress dieses Element nicht standardmäßig.

Dieses Tutorial enthält Schritt-für-Schritt-Anleitungen zum Erstellen einer WordPress-Kontaktseite mit und ohne Verwendung des WordPress-Plugins für Kontaktseiten.

Für wen ist dieser Leitfaden nützlich?

Die folgende Anleitung enthält einfache Schritte zum Erstellen einer eigenen WordPress-Kontaktseite, auch wenn Sie noch kein WordPress-Experte sind, was besonders für Webmaster-Anfänger nützlich sein wird. Mit diesem Leitfaden können Sie Ihre Webentwicklungsfähigkeiten üben. Es wird auch für Blogger und Kleinstunternehmen nützlich sein, die sich darauf freuen, ihre WordPress-Sites selbst zu pflegen und ihre Online-Ressourcen so benutzerfreundlich und informativ wie möglich zu gestalten. Ganz gleich, wie geschickt oder erfahren Sie sind, die in diesem Artikel beschriebenen Techniken werden sich für Sie als nützlich erweisen.

Warum sollten Sie Ihrer Website eine WordPress-Kontaktseite hinzufügen?

Die WordPress-Kontaktseite ist aus vielen Gründen sowohl für Geschäftsinhaber als auch für ihre Kunden von Vorteil:

  • Ihr Blog oder Ihre Unternehmenswebsite wird professioneller aussehen. Auf diese Weise weiß Ihr Publikum, dass es Sie erreichen kann, wenn es Fragen oder Probleme im Zusammenhang mit Ihrer Mikronische hat.
  • Sie können eine bessere Kommunikation mit Ihrem Publikum aufbauen, während Benutzer jederzeit auf Sie zugreifen können. Sie müssen nur einige wenige Felder ausfüllen.
  • Eine WordPress-Kontaktseite ist eine wertvolle Informationsquelle für Marken. Sie können frei entscheiden, welche Informationen die Benutzer teilen müssen. Dies können E-Mail-Adressen, Benutzernamen, Länder usw. von Kunden sein.
  • Mit einer Kontaktseite verhindern Sie Spam-Angriffe.

Lassen Sie uns unter Berücksichtigung aller oben genannten Vorteile der Verwendung eines WordPress-Plugins für Kontaktseiten Folgendes besprechen:

  • Welches Plugin soll man wählen, um eine WordPress-Kontaktseite zu erstellen;
  • So erstellen Sie eine Kontaktseite für WordPress mithilfe einer Vorlage.
So erstellen Sie eine Kontaktseite in WordPress mit einem Plugin

Es sind viele WordPress-Plugins für Kontaktseiten verfügbar, sodass man sich leicht in ihrer Fülle verlieren kann. Wir haben uns für Contact Form - WordPress Contact Form Plugin entschieden, um die Entscheidungsfindung zu erleichtern, die es einfach macht, Ihrer Website ein Kontaktformular hinzuzufügen.

Es ist ein Premium-WordPress-Plugin von Codecanyon zum Preis von 24 $. Im Gegensatz zu kostenlosen WordPress-Plugins, die durch eine einfache Suche über das WP-Dashboard leicht zu finden sind, müssen Sie das Archiv des Plugins auf Ihren PC herunterladen und es anschließend auf Ihre Website hochladen. Sobald Sie fertig sind, können Sie aus mehreren Möglichkeiten wählen, um das Kontaktformular zu Ihrer Website hinzuzufügen:

  • Verwenden Sie einen WordPress-Shortcode, den Sie zu jeder Seite Ihrer WordPress-Site hinzufügen können.
  • Das Plugin enthält das Visual Composer-Element zum Erstellen einer Kontaktseite im Drag-and-Drop-Modus.
  • Sie können auch ein Widget verwenden, um ein Kontaktformular zur Seitenleiste oder Fußzeile hinzuzufügen.

Möglicherweise stoßen Sie im WordPress-Plugin-Verzeichnis auf viele andere Kontaktformular-Plugins. Viele von ihnen sind kostenlos und einfach zu bedienen. Wenn Sie sich entscheiden, eine Kontaktseite mit einem speziellen Plugin zu erstellen, sollten Sie keine Probleme haben.

So erstellen Sie eine Kontaktseite in WordPress ohne Plugin

Sehen wir uns an, wie man eine voll funktionsfähige Kontaktseite in WordPress erstellt. Wir werden ein Kontaktformular ohne Plugins hinzufügen. Stattdessen erstellen wir eine benutzerdefinierte Kontaktseitenvorlage, um unser Ziel zu erreichen.

Was sind WordPress-Seitenvorlagen?

In WordPress sind dies PHP-Dateien, die für das Layout und die Funktionalität einer Webseite verantwortlich sind (wir sprechen von Seiten und nicht von Beiträgen). Alle WordPress-Themes werden mit einer Page.php-Datei geliefert, die die Standardseitenvorlage ist. Die Seitenvorlage ist eine äußerst leistungsstarke Funktion, mit der Entwickler Themen an ihre Bedürfnisse anpassen können. In diesem Tutorial erfahren Sie, wie Sie eine benutzerdefinierte Kontaktvorlage erstellen.

Schritt 1: Erstellen Sie eine Kontaktvorlage

Navigieren Sie zum Themenordner, erstellen Sie eine leere Datei und nennen Sie sie contact.php (Sie können einen anderen Namen verwenden). Die PHP-Datei enthält das Formular-HTML-Markup und den PHP-Code zur Verarbeitung der Benutzereingabe. Schreiben Sie den folgenden Code oben in die PHP-Datei.

 <?php /* Vorlagenname: Kontaktieren Sie uns */ ?>

WordPress verwendet diesen Kommentarblock, um unser Custom Page Template eindeutig zu identifizieren. Kopieren Sie als Nächstes den folgenden Code und fügen Sie ihn in die Datei contact.php ein:

 <?php
/*
Vorlagenname: Kontaktieren Sie uns
 */
get_header(); ?>
<div id="primär">
<div id="content" role="main">
</div><!-- #content -->
</div><!-- #primär -->
<?php get_footer(); ?>

Mit diesem Code fügen wir der Kontaktseitenvorlage Struktur hinzu. Jetzt hat unsere Vorlage Fußzeilen- und Kopfzeilenabschnitte. Im nächsten Schritt sehen wir uns an, wie Sie den Inhaltsbereich zu unserer Seite hinzufügen.

Schritt 2: HTML-Formular hinzufügen

Ein Kontaktformular ist ein einfaches Element mit Standardfeldern. In diesem Leitfaden konzentrieren wir uns nicht auf den Styling-Teil. Fügen Sie einfach den folgenden Code zum Content Div hinzu, dh (div)

 <form method="post" id="contactus_form">
Ihr Name:<input type="text" name="yourname" id="yourname" rows="1" value="" />
<br /><br />
Ihre E-Mail:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Betreff:<input type="text" name="subject" id="subject" rows="1" value=""></p>
<br /><br />
Hinterlassen Sie eine Nachricht: <textarea name="message" id="message" ></textarea>
<br /><br />
<input type="submit" name="submit" id="submit" value="Senden"/>
</form>

Der Code ist ziemlich selbsterklärend. Wir haben vier Felder im Formular verwendet - Name, E-Mail, Betreff und Text. Im nächsten Schritt fügen wir etwas PHP-Code hinzu, um die Formulareingabe zu verarbeiten.

Schritt 3: Fügen Sie PHP-Code zur Verarbeitung der Formulareingabe hinzu.

PHP-Code verarbeitet zwei Teile:

  • Validierung.
  • Senden der eigentlichen Post.
Validierung

Wir verwenden zwei Arten der Validierung:

  • Erforderliches Feld:- Dies prüft, ob das Feld ausgefüllt ist oder nicht.
  • Feldformat: prüft, ob der eingegebene Wert das gewünschte Format hat oder nicht.

    • Wir wenden beide Bedingungen in allen 3 Eingabefeldern mit Ausnahme von "Hinterlasse uns eine Nachricht" an.

    Validierungslogik

    In unserer Validierungslogik haben wir eine Flag-Variable verwendet. Sein Wert ist entweder 0 oder 1. Wenn unsere Validierung erfolgreich ist, wird das Flag auf 1 gesetzt. Wenn etwas schief geht, wird der Flag-Wert auf 0 gesetzt. Ziemlich Standardlogik. Hier ist der Code zum Implementieren dieser Logik.

    Validierung auf Namensfeld angewendet
     if($_POST['deinname']=='')
{$flag=0;
echo "Bitte geben Sie Ihren Namen ein<br>";
}
sonst if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['deinname']))
{$flag=0;echo "Bitte gültigen Namen eingeben<br>";}
    Validierung auf E-Mail-Feld angewendet
     if($_POST['E-Mail']=='')
{
$flag=0;echo "Bitte E-Mail eingeben<br>";
}
sonst if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['email']))
{
$flag=0;echo "Bitte gültige E-Mail-Adresse eingeben<br>";
}
    Validierung auf Betrefffeld angewendet
     if($_POST['Betreff']=='')
{
$flag=0;echo "Bitte Betreff eingeben<br>";
}
    Auf das Nachrichtenfeld angewendete Validierung

    Es ist nicht erforderlich, die Formatfeldvalidierung für das Meldungsfeld anzuwenden, wie wir bereits erwähnt haben.

     if($_POST['Nachricht']=='')
{
$flag=0;echo "Bitte Nachricht eingeben";
}

    Alle Codeteile sind ziemlich selbsterklärend. Achten Sie lediglich darauf, dass die Eingabefelder nicht leer sind und das richtige Format aufweisen (es werden keine Sonderzeichen verwendet).

    Verarbeitung der Formulareingabe

    Jetzt ist unsere Eingabe ordnungsgemäß validiert. Wir müssen den Administrator benachrichtigen. Der folgende Code verarbeitet die Formulardaten und sendet die Details wie Name, E-Mail-Betreff und Nachricht per E-Mail an den Administrator.

    Wir werden die Funktion wp_mail zum Senden von E-Mails verwenden. Um mehr über wp_mail zu erfahren, klicken Sie hier.

     <?php
if($flag==1)
{
wp_mail(get_option("admin_email"),trim($_POST[yourname])." hat Ihnen eine Nachricht von ".get_option("blogname"),stripslashes(trim($_POST[message])),"From: " gesendet. trim($_POST[IhrName])." <".trim($_POST[E-Mail]).">rnAntwort an:".trim($_POST[E-Mail]));
echo "Mail erfolgreich gesendet";
}
?>
    Endgültiger Code der Kontaktvorlage

    Die endgültige Version des Codes, der in der PHP-Datei der Kontaktvorlage enthalten ist, sieht folgendermaßen aus:

     <?php
/* Vorlagenname: Kontaktieren Sie uns */
get_header(); ?>
<div id="primär">
<div id="content" role="main">
<font color="#FF0000">
<?php
if(isset($_POST['submit']))
{
$flag=1;
if($_POST['deinname']=='')
{
$flag=0;
echo "Bitte geben Sie Ihren Namen ein<br>";
}
sonst if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['deinname']))
{
$flag=0;
echo "Bitte gültigen Namen eingeben<br>";
}
if($_POST['E-Mail']=='')
{
$flag=0;
echo "Bitte E-Mail eingeben<br>";
}
sonst if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['email']))
{
$flag=0;
echo "Bitte gültige E-Mail-Adresse eingeben<br>";
}
if($_POST['Betreff']=='')
{
$flag=0;
echo "Bitte Betreff eingeben<br>";
}
if($_POST['Nachricht']=='')
{
$flag=0;
echo "Bitte Nachricht eingeben";
}
if (leer($_POST))
{
print 'Entschuldigung, Ihre Nonce wurde nicht verifiziert.';
Ausfahrt;
}
anders
{
if($flag==1)
{
wp_mail(get_option("admin_email"),trim($_POST[yourname])." hat Ihnen eine Nachricht von ".get_option("blogname"),stripslashes(trim($_POST[message])),"From: " gesendet. trim($_POST[IhrName])." <".trim($_POST[E-Mail]).">rnAntwort an:".trim($_POST[E-Mail]));
echo "Mail erfolgreich gesendet";
}
}
}
?>
</font>
<form method="post" id="contactus_form">
Ihr Name:<input type="text" name="yourname" id="yourname" rows="1" value="" />
<br /><br />
Ihre E-Mail:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Betreff:<input type="text" name="subject" id="subject" rows="1" value=""></p>
<br /><br />
Hinterlassen Sie eine Nachricht: <textarea name="message" id="message" ></textarea>
<br /><br />
<input type="submit" name="submit" id="submit" value="Senden"/>
</form>
</div><!-- #content --></div><!-- #primary -->
<?php get_footer(); ?>
    Letzter Screenshot der Kontaktseite.

    So sieht Ihr Kontaktformular aus

    So erstellen Sie WordPress Kontaktseite 1

    Schritt 4: Verwendung der Kontaktvorlage

    Öffnen Sie Ihr WordPress-Dashboard. Erstellen Sie eine neue Seite und vergessen Sie nicht, die Vorlage „Kontakt“ im Feld „Seitenattribute“ auszuwählen. Sehen Sie sich den Schnappschuss unten an.

    So erstellen Sie WordPress Kontaktieren Sie uns Seite 2

    Veröffentlichen Sie nun die Seite und fügen Sie sie dem Menü hinzu. Als Ergebnis erhalten Sie eine glänzende, voll funktionsfähige Kontaktseite, die Sie ohne Verwendung eines Plugins erstellt haben. Es gibt viele andere Dinge, die Sie zu Ihrer WordPress-Kontaktseite hinzufügen können. Eine Sache, die mir in den Sinn kommt, ist das Hinzufügen eines Captchas oder einer anderen Validierung, um Spam zu verhindern.