Erstellen Sie Ihr eigenes WordPress -Kontaktformular -Plugin in 5 Minuten

Key Takeaways

• Entwickeln Sie Ihr eigenes WordPress -Kontaktformular -Plugin können Ihnen helfen, besser zu verstehen, wie WordPress funktioniert, Ihre Webentwicklungsfähigkeiten verbessern und ein Formular erstellen, das auf Ihre spezifischen Anforderungen zugeschnitten ist, ohne unnötige Funktionen.
• Der Artikel enthält eine Schritt-für-Schritt Die E -Mail -Adresse des Site Administrators.
• Das resultierende Kontaktformular -Plugin kann einfach in jede WordPress -Website integriert werden, indem es im Abschnitt "Plugins" des WordPress -Dashboards aktiviert und den bereitgestellten Shortcode zu einem Beitrag oder einer Seite hinzugefügt wird.
• In dem Artikel werden auch einige beliebte kostenlose Kontaktformular -Plugins im WordPress -Plugin -Verzeichnis erörtert, z.

Die meisten Websites sind in der Regel so konzipiert, dass sie Standard -Webpraktiken entsprechen, indem eine dedizierte Seite aufgenommen wird, auf der sich ein Kontaktformular befindet. Dies bietet den Besuchern eine einfache Möglichkeit, sich an den Site -Eigentümer zu wenden.

In einfachen Worten enthält ein Kontaktformular eine Reihe von Fragen und Feldern, die von einem Besucher ausgefüllt werden. Die Informationen werden normalerweise automatisch per E -Mail an den Site -Administrator oder ein anderes nominiertes E -Mail -Konto gesendet. Es ist erwähnenswert, dass diese E -Mail -Adresse nicht an die Besucher angezeigt wird. Die Verwendung eines Kontaktformulars reduziert daher in der Regel E -Mail -Spam von Bots, die nackte E -Mail -Adressen im Internet ernten. Kontaktformulare spielen eine sehr wichtige Rolle auf einer Website, auf der sie zum Sammeln von Feedback, Anfragen und anderen Daten von Benutzern verwendet werden.

Wenn Ihre Website von WordPress betrieben wird, gibt es zahlreiche Plugins, die nahtlos ein Kontaktformular auf Ihrer Website integrieren.

In diesem Artikel werde ich eine Liste einiger kostenloser WordPress -Kontaktformular -Plugins angeben. Ich werde auch besprechen, warum Sie in Betracht ziehen sollten, Ihr eigenes Kontaktformular zu rollen. Dann werde ich Ihnen ein kurzes Tutorial zur Verfügung stellen, das Ihnen zeigt, wie Sie Ihr eigenes WordPress -Kontaktformular -Plugin erstellen.

WordPress -Kontaktformular Plugins

Bevor wir anfangen, werden wir einige der beliebten kostenlosen Kontaktformular -Plugins im WordPress -Plugin -Verzeichnis durchlaufen. Diese sind großartig zu bedienen, aber noch besser zu lernen, wenn Sie Ihre eigenen Plugins erstellen.

unten finden Sie einige der am stärksten bewerteten kostenlosen Kontaktformular -Plugins für WordPress:

1. Kontaktformular 7 - Dies ist das zweitbeliebteste Plugin mit über 18 Millionen Downloads. Es könnte fast als De -facto -Kontaktformular -Plugin für eine WordPress -Website angesehen werden. Das Kontaktformular 7 kann mehrere Kontaktformulare verwalten und Sie können das Formular und den E -Mail -Inhalt mit einfachem Markup anpassen. Die Formularmerkmale umfassen AJAX-Betrieben, Captcha, Akismet-Spam-Filterung und vieles mehr.

2. Kontaktformular zu E -Mail - Dieses Plugin erstellt nicht nur Kontaktformulare und sendet die Daten an eine bestimmte E -Mail CSV/Excel -Datei.

3. Contact -Formular formget - ein einfaches Online -Builder -Tool für Drag & Drop -Kontaktformular. Alles, was Sie tun müssen, ist auf die gewünschten Felder in Ihrem Formular zu klicken. Innerhalb weniger Sekunden ist Ihr Kontaktformular fertig.

4. BestWebsoft -Kontaktformular - Ermöglicht Ihnen ein Feedback -Formular für eine Webseite oder einen Beitrag mühelos implementieren. Es ist extrem einfach und Sie benötigen keine zusätzlichen Einstellungen, obwohl einige zum Spielen verfügbar sind.

Warum Ihr eigenes Kontaktformular Plugin rollen?

wird ein besserer Entwickler

Das Entwickeln Ihres eigenen WordPress -Plugins hilft Ihnen, besser zu verstehen, wie WordPress unter der Haube funktioniert, was Ihnen helfen kann, ein erfahrenerer Webentwickler zu werden. Während es im WordPress -Plugin -Verzeichnis Zehntausende von Plugins gibt, ist es eine sehr nützliche Fähigkeit, andere Plugins zu ändern und zu erweitern.

.

eine bessere Form bauen

Viele WordPress -Kontaktformular -Plugins werden aufgebläht. Dazu gehören viele Funktionen, die Sie möglicherweise nie verwenden. Die starke Verwendung von JavaScript- und CSS -Dateien ist auch in einigen der Standard -Kontaktformular -Plugins üblich. Dies erhöht die Anzahl der HTTP -Anfragen, die sich nachteilig auf die WordPress -Leistung auswirken.

gemäß den Leistungsregeln von Yahoo:

80% der Endbenutzer-Reaktionszeit werden für das Front-End ausgegeben. Die meiste Zeit ist das Herunterladen aller Komponenten auf der Seite gebunden: Bilder, Stylesheets, Skripte, Blitz usw. Die Anzahl der Komponenten reduziert nacheinander die Anzahl der HTTP -Anforderungen, die zum Rendern der Seite erforderlich sind. Dies ist der Schlüssel zu schnelleren Seiten.

Wenn Sie wie ich sind und ein einfaches Plugin für das Kontaktformular wünschen, das nur funktioniert, lesen Sie weiter. Ich werde Sie durch den einfachen Prozess der Entwicklung Ihres eigenen Plugins führen, damit Sie aufgeblähte Plugins küssen können. In diesem Beispiel sind keine zusätzlichen CSS und JavaScript -Dateien erforderlich, die Validierung mit HTML5.

Kontaktformular -Plugin -Entwicklung

In fünf Minuten lernen Sie, wie Sie ein einfaches WordPress -Kontaktformular entwickeln, das ist ein Versprechen!

Bereit? Satz? Go!

Alle WordPress-Pluigns sind PHP-Dateien, die sich im Verzeichnis/wp-content/plugins/im Verzeichnis befinden. In unserem Beispiel wird die Datei als SP-Form-Example.php bezeichnet. Ich gehe davon aus, dass Sie sich mit FTP/SFTP/SCP oder SSH mit Ihrem Server vertraut machen.

Wenn Sie folgen möchten, erstellen Sie einfach eine Datei namens SP-Form-example.php (das endgültige vollständige Beispiel ist am Ende des Artikels verfügbar):

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

Als nächstes fügen wir die Funktion html_form_code () hinzu, die das Kontaktformular html enthält:

<span>function html_form_code() {
</span>    <span>echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Name (required) <br />';
</span>    <span>echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Email (required) <br />';
</span>    <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Subject (required) <br />';
</span>    <span>echo '<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Message (required) <br />';
</span>    <span>echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
</span>    <span>echo '</p>';
</span>    <span>echo '<p><input type="submit" name="cf-submitted" value="Send"/></p>';
</span>    <span>echo '</form>';
</span><span>}</span>

Grundlegende Validierung wurde über das Mustereingangsattribut zum Formular hinzugefügt.

Die Regex im Kontaktformular führt die folgende Feldvalidierung durch:

• [a-za-z0-9]: nur Buchstaben, Räume und Zahlen im Feld Namen; Spezielle Symbole werden als ungültig angesehen.

• [a-za-z]: Nur Buchstaben und Leerzeichen sind im Subjektfeld zulässig.

• Das E -Mail -Formularkontrolle überprüft das E -Mail -Feld, weshalb kein Musterattribut erforderlich ist.

Weitere Informationen darüber, wie dies funktioniert

beeilen Sie sich!

Okay, wie viele Minuten haben wir noch übrig? Vier Minuten! Wir haben immer noch Zeit, dies zu überwinden.

Die Funktion liefern_mail () saniert die Formulardaten und sendet die E -Mail an die E -Mail -Adresse des WordPress -Administrators.

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

Die Hygiene der Formulardaten erfolgt durch die folgenden internen WordPress -Funktionen:

• sanitize_text_field (): sanitieren Sie die Daten aus der Benutzereingabe.

• sanitize_email (): streift alle Zeichen aus, die in einer E -Mail nicht zulässig sind.

• ESC_TEXTAEA (): Entgipfel der

  Nachricht Textbereichswerte.

Der Code get_option ('admin_email') ruft programmgesteuert die E -Mail -Adresse des WordPress -Administrators aus der Datenbank ab, in der die E -Mail geliefert wird.

Möchten Sie nicht, dass das Kontaktformular die E -Mail an Administrator senden soll? Legen Sie einfach die Variable $ auf die gewünschte E -Mail -Adresse ein.

Wenn die E -Mail erfolgreich von der Funktion WP_MAIL () ohne Fehler verarbeitet wurde, wird der Text

Dank für die Kontaktaufnahme mit mir eine Antwort erwarten. 🎜> wird angezeigt. 1 Minute und 30 Sekunden links Die Funktion cf_shortcode () ist die Rückruffunktion, die aufgerufen wird, wenn der Kontaktformular Shortcode [sitepoint_contact_form] aktiv ist.

Die obigen Funktionen rufen die Funktionen html_form_code () und lieferung_mail () auf, um das HTML -Formular des Kontaktformulars anzuzeigen und die Formulardaten zu validieren.

Schließlich ist der Shortcode [sitepoint_contact_form] bei WordPress registriert. Fügen Sie also einfach hinzu:

<span>function html_form_code() {
</span>    <span>echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Name (required) <br />';
</span>    <span>echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Email (required) <br />';
</span>    <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Subject (required) <br />';
</span>    <span>echo '<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Message (required) <br />';
</span>    <span>echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
</span>    <span>echo '</p>';
</span>    <span>echo '<p><input type="submit" name="cf-submitted" value="Send"/></p>';
</span>    <span>echo '</form>';
</span><span>}</span>

3, 2, 1 ... Time ist hoch!

Herzlichen Glückwunsch, wir haben unser eigenes WordPress -Kontaktformular -Plugin erfolgreich entwickelt und ich habe mein früheres Versprechen erfüllt.

<span>function deliver_mail() {
</span>
    <span>// if the submit button is clicked, send the email
</span>    <span>if ( isset( $_POST['cf-submitted'] ) ) {
</span>
        <span>// sanitize form values
</span>        <span>$name    = sanitize_text_field( $_POST["cf-name"] );
</span>        <span>$email   = sanitize_email( $_POST["cf-email"] );
</span>        <span>$subject = sanitize_text_field( $_POST["cf-subject"] );
</span>        <span>$message = esc_textarea( $_POST["cf-message"] );
</span>
        <span>// get the blog administrator's email address
</span>        <span>$to = get_option( 'admin_email' );
</span>
        <span>$headers = "From: <span><span>$name</span> <<span>$email</span>>"</span> . "\r\n";
</span>
        <span>// If email has been process for sending, display a success message
</span>        <span>if ( wp_mail( $to, $subject, $message, $headers ) ) {
</span>            <span>echo '<div>';
</span>            <span>echo '<p>Thanks for contacting me, expect a response soon.</p>';
</span>            <span>echo '</div>';
</span>        <span>} else {
</span>            <span>echo 'An unexpected error occurred';
</span>        <span>}
</span>    <span>}
</span><span>}</span>

Aktivieren Sie nun dieses Plugin auf Ihrer Website einfach in den Abschnitt "Plugins" Ihres WordPress -Dashboards, erstellen Sie dann einen Beitrag oder eine Seite und fügen Sie einfach den Shortcode hinzu, in dem das Formular angezeigt werden soll [sitePoint_Contact_form] .

Wenn Sie dann die Seite vorschauen und das angezeigte Kontaktformular wie unten angezeigt werden.

Schlussfolgerung

Um weiter zu verstehen, wie das Plugin erstellt wurde und wie Sie es auf Ihrer WordPress-Site implementieren, kopieren Sie den folgenden Code, fügen Sie in eine Datei ein und laden Sie ihn in Ihr/WP-Content/Plugins/Verzeichnis hoch.

Hier ist das gesamte Plugin -Beispiel:

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

Dies ist nur ein einfaches Beispiel. Wenn Sie mehr über die Plugin -Entwicklung erfahren möchten, werden hier einige empfohlene Lesung empfohlen:

• Ein einfaches WordPress -Administrations -Plugin (Tutorial)
• Ein WordPress -Widget -Plugin (Tutorial)
• Die offizielle WordPress -Codex -Plugin -Entwicklerdokumentation
• Der SitePoint -PHP -Kanal

Lassen Sie mich Ihre Gedanken und Fragen in den Kommentaren wissen.

häufig gestellte Fragen (FAQs) zum Erstellen Ihres eigenen WordPress -Kontaktformulars

Was sind die Vorteile des Erstellens meines eigenen WordPress -Kontaktformulars Plugin? Sie können das Formular an die Ästhetik Ihrer Website anpassen, einzigartige Felder hinzufügen, die Ihren spezifischen Anforderungen gerecht werden, und die gesammelten Daten auf eine Weise verwalten, die zu Ihren Geschäftsabläufen passt. Darüber hinaus wird die Notwendigkeit von Plugins von Drittanbietern beseitigt, die manchmal Ihre Website verlangsamen oder Sicherheitsrisiken darstellen. Das Grundkenntnis von PHP, HTML und CSS ist erforderlich, um ein WordPress -Kontaktformular -Plugin zu erstellen. Der Prozess ist jedoch in unserem Leitfaden vereinfacht und macht es auch für Anfänger selbst zugänglich. Wenn Sie mit Codierung nicht vertraut sind, stehen zahlreiche WordPress Form Builder-Plugins zur Verfügung, die eine benutzerfreundlichere Drag-and-Drop-Schnittstelle bieten. ? Techniken. Regelmäßige Updates und Überwachung sind auch entscheidend, um die Sicherheit des Formulars zu erhalten.

Kann ich meinem WordPress -Kontaktformular benutzerdefinierte Felder hinzufügen? Die Möglichkeit, benutzerdefinierte Felder hinzuzufügen. Dies kann von einfachen Texteingaben bis hin zu komplexeren Feldern wie Datei -Uploads, Datumspickern oder sogar benutzerdefinierten Tropfen reichen. Der Prozess beinhaltet die Änderung des HTML des Formulars und die angemessene Behandlung der Daten in Ihrem PHP -Code.

Wie kann ich mein WordPress -Kontaktformular stylen, um das Design meiner Website zu entsprechen? Sie können Ihren Formularelementen benutzerdefinierte Klassen hinzufügen und die Stile in der CSS -Datei Ihres Themas oder ein benutzerdefiniertes CSS -Plugin definieren. Auf diese Weise können Sie die Farben, Schriftarten, das Layout des Formulars und mehr steuern. je nach Ihren Bedürfnissen auf verschiedene Weise behandelt werden. Sie können die Daten an eine E-Mail-Adresse senden, sie in Ihrer WordPress-Datenbank speichern oder sogar in Dienste von Drittanbietern wie CRM-Systemen oder E-Mail-Marketingplattformen integrieren. Dies erfordert eine zusätzliche PHP-Codierung, um die Formulareingabe zu verarbeiten. Codierung. Dies beinhaltet das Erstellen mehrerer Formseiten und das Verwalten der Daten zwischen Schritten mit Sitzungen oder versteckten Feldern. Mehrstufige Formulare können die Benutzererfahrung verbessern, indem Langformen in verwaltbare Abschnitte unterteilt werden.

Wie kann ich meinem WordPress-Kontaktformular eine Captcha hinzufügen? Integration in einen Captcha -Dienst wie Google Recaptcha. Dies erfordert, dass Sie API -Schlüssel aus dem Dienst erhalten und Ihrem Formular den erforderlichen HTML- und PHP -Code hinzufügen. Captcha schützt Ihre Form vor Spam- und automatisierten Einsendungen.

Kann ich ein reaktionsschnelles WordPress -Kontaktformular erstellen? Gut und funktioniert gut in allen Gerätegrößen. Dies beinhaltet die Einstellung geeigneter Breiten, Ränder und Polsterung für Formularelemente und Verwendung von Medienabfragen, um Stile für verschiedene Bildschirmgrößen anzupassen. Mit Ihrem WordPress -Kontaktformular beinhaltet die Identifizierung des Problems, die Überprüfung Ihres Codes auf Fehler und das Testen des Formulars unter verschiedenen Bedingungen. Zu den allgemeinen Problemen gehören das Formular, das nicht E -Mails sendet, nicht korrekt angezeigt wird oder Formulareinführungen nicht gespeichert werden. Wenn Sie das Problem nicht lösen können, sollten Sie sich bei der Suche nach Hilfe der WordPress -Community oder eines professionellen Entwicklers in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihr eigenes WordPress -Kontaktformular -Plugin in 5 Minuten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!