suchen
HeimCMS-TutorialWordDrücken SieErstellen eines WordPress -Plugins, um ein AJAX -Kontaktformular zu erstellen

Dieser Artikel zeigt, dass das Erstellen eines einfachen Ajax -Kontaktformulars für WordPress erstellt wird. Wir werden die Erstellung von Plugin, das Formell Design, das AJAX -Handling und die Kurzzeitimplementierung abdecken.

Schlüsselkonzepte:

  • WordPress -Plugin -Entwicklung nutzt Plugins, um die Standortfunktionalität zu erweitern. Dies umfasst das Erstellen von Kontaktformularen, die AJAX für die Datenübermittlung verwenden. Dies beinhaltet die Erstellung von Plugin -Datei, Formularkonstruktion, einen Ajax -Handler und einen Shortcode.
  • Der Ajax -Handler ist entscheidend. Es empfängt Benutzereingaben, validiert Daten und sendet E -Mail -Benachrichtigungen an den WordPress -Administrator mit wp_mail(). Die ordnungsgemäße Registrierung des AJAX -Handlers ist für die Bearbeitung von AJAX -Anforderungen unerlässlich.
  • Shortcodes vereinfachen die Formintegration. Eine Funktion erzeugt das HTML des Formulars, das dann in einem Shortcode für einfache Einfügung in Posts und Seiten eingekapselt wird.

Plugin -Erstellung:

  1. Erstellen Sie einen Ordner mit dem Namen ajaxcontactform in Ihrem WordPress wp-content/plugins -Verzeichnis.
  2. im Inneren erstellen ajaxcontactform.php mit dem folgenden Plugin -Header:
<?php
/*
Plugin Name: Ajax Contact Form
Plugin URI:  (Your Plugin URI)
Description: A simple contact form using AJAX.
Author: Abbas Suterwala
Version: 1.0
Author URI: (Your Author URI)
*/
?>
  1. Aktivieren Sie das Plugin in Ihrem WordPress -Administratorfeld.

Building a WordPress Plugin to Create an AJAX Contact Form

  1. Erstellen Sie einen Unterordner namens js innerhalb ajaxcontactform und fügen Sie ajaxcontact.js für Ihren Ajax -Code hinzu.

Building a WordPress Plugin to Create an AJAX Contact Form

  1. Fügen Sie den folgenden PHP -Code zu ajaxcontactform.php hinzu, um Konstanten zu definieren, Skripte zu engagieren und die AJAX -URL zu lokalisieren:
define('ACFSURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
define('ACFPATH', WP_PLUGIN_DIR."/".dirname( plugin_basename( __FILE__ ) ) );

function ajaxcontact_enqueuescripts() {
    wp_enqueue_script('ajaxcontact', ACFSURL.'/js/ajaxcontact.js', array('jquery'));
    wp_localize_script( 'ajaxcontact', 'ajaxcontactajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', 'ajaxcontact_enqueuescripts');

Form Erstellung:

Die folgende Funktion erzeugt das HTML des Kontaktformulars:

function ajaxcontact_show_contact() {
?>
<div>
    <div style="background-color:https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bE6E6FA ;color:blue;"></div>
    <input type="text" id="ajaxcontactname" placeholder="Name"><br>
    <input type="email" id="ajaxcontactemail" placeholder="Email"><br>
    <input type="text" id="ajaxcontactsubject" placeholder="Subject"><br>
    <textarea id="ajaxcontactcontents" placeholder="Message"></textarea><br>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="ajaxformsendmail(this.form);" style="cursor: pointer">Send Mail</a>
</div>
<?php
}

Dieses Formular wird wie unten gezeigt angezeigt, nachdem sie in eine Seite oder einen Beitrag integriert wurde:

Building a WordPress Plugin to Create an AJAX Contact Form

AJAX -Handler:

Diese Funktion übernimmt die AJAX -Anforderung, validiert Daten und sendet die E -Mail:

function ajaxcontact_send_mail() {
    $results = '';
    $error = 0;
    $name = isset($_POST['acfname']) ? sanitize_text_field($_POST['acfname']) : '';
    $email = isset($_POST['acfemail']) ? sanitize_email($_POST['acfemail']) : '';
    $subject = isset($_POST['acfsubject']) ? sanitize_text_field($_POST['acfsubject']) : '';
    $contents = isset($_POST['acfcontents']) ? wp_kses_post($_POST['acfcontents']) : '';
    $admin_email = get_option('admin_email');

    if (!is_email($email)) {
        $results = $email." :email address is not valid.";
        $error = 1;
    } elseif (empty($name)) {
        $results = "Name is invalid.";
        $error = 1;
    } elseif (empty($subject)) {
        $results = "Subject is invalid.";
        $error = 1;
    } elseif (empty($contents)) {
        $results = "Content is invalid.";
        $error = 1;
    }

    if ($error == 0) {
        $headers = 'From: ' . $email . "\r\n";
        if (wp_mail($admin_email, $subject, $contents, $headers)) {
            $results = "*Thanks for your mail.";
        } else {
            $results = "*The mail could not be sent.";
        }
    }
    die($results);
}

Fehlerbehandlung zeigt eine Meldung wie folgt an:

Building a WordPress Plugin to Create an AJAX Contact Form

Registrieren Sie den Ajax -Handler:

Registrieren Sie den Ajax -Handler:

add_action( 'wp_ajax_nopriv_ajaxcontact_send_mail', 'ajaxcontact_send_mail' );
add_action( 'wp_ajax_ajaxcontact_send_mail', 'ajaxcontact_send_mail' );

Senden der AJAX -Anforderung (ajaxcontact.js):

function ajaxformsendmail(form) {
    jQuery.ajax({
        type: 'POST',
        url: ajaxcontactajax.ajaxurl,
        data: {
            action: 'ajaxcontact_send_mail',
            acfname: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactname').val(),
            acfemail: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactemail').val(),
            acfsubject: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactsubject').val(),
            acfcontents: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactcontents').val()
        },
        success: function(data, textStatus, XMLHttpRequest) {
            jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontact-response').html(data);
        },
        error: function(MLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
    return false; // Prevent default form submission
}

Erstellen des Shortcode:

function ajaxcontact_shortcode_func( $atts ) {
    ob_start();
    ajaxcontact_show_contact();
    $output = ob_get_clean();
    return $output;
}
add_shortcode( 'ajaxcontact', 'ajaxcontact_shortcode_func' );

Das ausgefüllte Formular wird wie folgt angezeigt:

Building a WordPress Plugin to Create an AJAX Contact Form

Sicherheit, Anpassung und erweiterte Funktionen:

dem bereitgestellten Code fehlen entscheidende Sicherheitsmaßnahmen (Nonce -Überprüfung). Das Hinzufügen von Noncen wird dringend empfohlen, um CSRF -Angriffe zu verhindern. Eine weitere Anpassung (Styling mit CSS, verbesserte Validierung, CAPTCHA -Integration, Datei -Uploads usw.) kann basierend auf spezifischen Anforderungen implementiert werden. Der FAQS -Abschnitt im Originaltext enthält Anleitung zu diesen Verbesserungen. Denken Sie daran, alle Benutzereingaben zu sanieren, um Schwachstellen zu verhindern.

Das obige ist der detaillierte Inhalt vonErstellen eines WordPress -Plugins, um ein AJAX -Kontaktformular zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Wofür würden Sie WordPress verwenden?Wofür würden Sie WordPress verwenden?Apr 27, 2025 am 12:14 AM

WordPressCanBeUsedforvariousPurposeBeyondblogging.1) E-Commerce: WithwooCommerce, ItcanbeComeAllonLinestore.2) Mitgliedschaften: PluginslikememberMpressionSenableExclusiveContentareas.3) Portfoliossites: ThemeslikeastraalaLaNlayouts

Ist WordPress gut zum Erstellen einer Portfolio -Website?Ist WordPress gut zum Erstellen einer Portfolio -Website?Apr 26, 2025 am 12:05 AM

Ja, WordPressisexcellentforcreatreseaportfolioWebsit.1) ItoffersnumousPortfolio-spezifischemenglike'astra'Foreasycustomization.2) Pluginsuchas'elementor'EnableIntiveIntiveIntiveIntiveIntiveLevived-Design, thedoomanycanslowthesite)

Was sind die Vorteile der Verwendung von WordPress über die Codierung einer Website von Grund auf neu?Was sind die Vorteile der Verwendung von WordPress über die Codierung einer Website von Grund auf neu?Apr 25, 2025 am 12:16 AM

WordpressIsAdvantageousovercodingawebsitfromscratchdueto: 1) EasyofuseandfasterDevelopment, 2) Flexibilitätsskalierbarkeit, 3) StrongCommunitySupport, 4) integrierte Inseoandmarketingtools, 5) Kostenwirksamkeit und 6) regelmäßige SecurityUpdaten.TheseFeaturesallowalfoalloweal

Was macht WordPress zu einem Content -Management -System?Was macht WordPress zu einem Content -Management -System?Apr 24, 2025 pm 05:25 PM

WordPressISACMSDUETOITSEaseofuse, Anpassung, Benutzermanagement, SEO und -CommunitySupport.1) ITSIMIFIESCONTENTMANGEMANDMANGEMENTWISHANInTIQUEIsInterface.2) AngebotsEXTENSiveCustomization ThroughThemesandPlugins.3) bietet robustuserrolesandPermissions.4) EnhancESSEOA

So fügen Sie WordPress ein Kommentarfeld hinzuSo fügen Sie WordPress ein Kommentarfeld hinzuApr 20, 2025 pm 12:15 PM

Aktivieren Sie Kommentare auf Ihrer WordPress -Website, um den Besuchern eine Plattform zur Teilnahme an Diskussionen und das Austausch von Feedback zu bieten. Befolgen Sie dazu die folgenden Schritte: Aktivieren Sie Kommentare: Navigieren Sie im Dashboard zu Einstellungen & GT; Diskussionen und wählen Sie das Kontrollkästchen Kommentare aus. Erstellen Sie ein Kommentarformular: Klicken Sie im Editor auf Block hinzufügen und nach dem Kommentarblock suchen, um ihn dem Inhalt hinzuzufügen. Benutzerdefinierte Kommentarformular: Anpassen Kommentareblöcke, indem Sie Titel, Beschriftungen, Platzhalter und Schaltflächentext einstellen. Änderungen speichern: Klicken Sie auf Aktualisieren, um das Kommentarfeld zu speichern und zur Seite oder dem Artikel hinzuzufügen.

So kopieren Sie Unter-Sites von WordPressSo kopieren Sie Unter-Sites von WordPressApr 20, 2025 pm 12:12 PM

Wie kopiere ich eine WordPress -Subsite? Schritte: Erstellen Sie eine Unterseite in der Hauptstelle. Klonen der Unterseite in der Hauptstelle. Importieren Sie den Klon in den Zielort. Aktualisieren Sie den Domänennamen (optional). Separate Plugins und Themen.

Wie man einen Kopfball eines WordPress schreibtWie man einen Kopfball eines WordPress schreibtApr 20, 2025 pm 12:09 PM

Die Schritte zum Erstellen eines benutzerdefinierten Headers in WordPress sind wie folgt: Bearbeiten Sie die Themendatei "Header.php". Fügen Sie Ihren Website -Namen und Ihre Beschreibung hinzu. Erstellen Sie ein Navigationsmenü. Fügen Sie eine Suchleiste hinzu. Speichern Sie Änderungen und sehen Sie sich Ihren benutzerdefinierten Header an.

So zeigen Sie WordPress -Kommentare anSo zeigen Sie WordPress -Kommentare anApr 20, 2025 pm 12:06 PM

Aktivieren Sie Kommentare in der WordPress -Website: 1. Melden Sie sich im Administratorbereich an, wenden Sie sich zu "Einstellungen" - "Diskussionen" und überprüfen Sie "Kommentare zulassen". 2. Wählen Sie einen Ort aus, um Kommentare anzuzeigen. 3.. Anpassen Kommentare; V. 5. verwenden & lt;? Php commenter_template (); ? & gt; Tags zum Anzeigen von Kommentaren; 6. Verschachtelte Kommentare aktivieren; 7. Kommentarform einstellen; 8. Verwenden Sie Plugins und Verifizierungscodes, um Spam -Kommentare zu verhindern. 9. Ermutigen Sie Benutzer, Gravatar Avatar zu verwenden; 10. Erstellen Sie Kommentare, auf die Sie sich beziehen können

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion