Erstellen 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)
*/
?>

3. Aktivieren Sie das Plugin in Ihrem WordPress -Administratorfeld.

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

5. 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:

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:

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:

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!