Building a WordPress Plugin to Create an AJAX Contact Form

This article demonstrates building a simple AJAX contact form plugin for WordPress. We'll cover plugin creation, form design, AJAX handling, and shortcode implementation.

Key Concepts:

• WordPress plugin development leverages plugins to extend site functionality. This includes creating contact forms that use AJAX for data submission. This involves plugin file creation, form construction, an AJAX handler, and a shortcode.
• The AJAX handler is crucial. It receives user input, validates data, and sends email notifications to the WordPress administrator using wp_mail(). Proper registration of the AJAX handler is essential for processing AJAX requests.
• Shortcodes simplify form integration. A function generates the form's HTML, which is then encapsulated within a shortcode for easy insertion into posts and pages.

Plugin Creation:

1. Create a folder named ajaxcontactform within your WordPress wp-content/plugins directory.
2. Inside, create ajaxcontactform.php with the following plugin header:

<code class="language-php"><?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)
*/
?></code>

3. Activate the plugin in your WordPress admin panel.

4. Create a subfolder named js within ajaxcontactform and add ajaxcontact.js for your AJAX code.

5. Add the following PHP code to ajaxcontactform.php to define constants, enqueue scripts, and localize the AJAX URL:

<code class="language-php">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');</code>

Form Creation:

The following function generates the contact form's HTML:

<code class="language-php">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
}</code>

This form will be displayed as shown below after being integrated into a page or post:

AJAX Handler:

This function handles the AJAX request, validates data, and sends the email:

<code class="language-php">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);
}</code>

Error handling will display a message like this:

Registering the AJAX Handler:

Register the AJAX handler:

<code class="language-php">add_action( 'wp_ajax_nopriv_ajaxcontact_send_mail', 'ajaxcontact_send_mail' );
add_action( 'wp_ajax_ajaxcontact_send_mail', 'ajaxcontact_send_mail' );</code>

Sending the AJAX Request (ajaxcontact.js):

<code class="language-javascript">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
}</code>

Creating the Shortcode:

<code class="language-php">function ajaxcontact_shortcode_func( $atts ) {
    ob_start();
    ajaxcontact_show_contact();
    $output = ob_get_clean();
    return $output;
}
add_shortcode( 'ajaxcontact', 'ajaxcontact_shortcode_func' );</code>

The completed form will appear as follows:

Security, Customization, and Advanced Features:

The provided code lacks crucial security measures (nonce verification). Adding nonces is strongly recommended to prevent CSRF attacks. Further customization (styling with CSS, enhanced validation, CAPTCHA integration, file uploads, etc.) can be implemented based on specific requirements. The FAQs section in the original text provides guidance on these enhancements. Remember to sanitize all user inputs to prevent vulnerabilities.

The above is the detailed content of Building a WordPress Plugin to Create an AJAX Contact Form. For more information, please follow other related articles on the PHP Chinese website!