Create a Simple WordPress Contact Form Plugin With AI and Vibe Coding. For Free!

Create Free WordPress Plug-Ins with AI Tools and Vibe Coding

These days having a contact form is essential for any website. Yet, many struggle with costly subscriptions or complicated setups when trying to implement one. That’s all changed, thanks to the emergence of AI tools and this cool approach everyone’s using called vibe coding. With OpenAI’s API, creating plugins is no longer just for coders. We’ll guide you through using this technology to create a free, customizable contact form plugin in minutes!

Vibe coding is revolutionizing the way we approach WordPress plugin development. This exciting way of doing things allows anyone to generate customizable contact forms effortlessly, leveraging the power of AI tools. Whether you’re a seasoned developer or a non-coder, vibe coding is a fun way to explore enhancing your website’s functionality with ease.

It’s actually easy! For us, we’re using tools and resources from the OpenAI Researcher Access Program, but anyone can use ChatGPT or any other AI tool like Google Gemini or DeepSeek. Most all generative tools can do it, but for us we love using OpenAI. Let’s get started.

Detailed Guide: How to Manually Install Your Simple Contact Form WordPress Plugin

BEFORE YOU GET STARTED! First and foremost, if you’re trying this out for the first time, always back up your web site before you start messing around. We tested this approach ourselves on a local copy before we did it, and we worked out fine. But everyone is different. Remember the Golden Rule: Always back up your site before you go throwing code into it! Seriously, unless you know what you’re doing, don’t take chances. You want to make your web site better, not wreck it! Ok. Ready? Let’s go.

Creating your own WordPress plugin is an empowering feeling! Thanks to AI-assisted development and vibe coding, tasks formerly reserved for experienced coders have become accessible to everyone—even total beginners. In this example, we’ve used OpenAI’s powerful API to quickly generate a simple, secure, and efficient contact form plugin for your WordPress website. Now let’s guide you step-by-step through the easy process of installing and activating your newly created contact form plugin manually.

Step 1: Preparing Your Plugin Files

First, let’s get organized. On your local machine (your laptop or desktop computer), start by creating a new folder specifically for your custom plugin files. Naming this folder clearly will help keep everything neat: something descriptive like simplecontactform works wonderfully.

Now open a plain-text editor like Notepad (Windows), TextEdit (Mac), or a dedicated code editor like Visual Studio Code. Paste your plugin’s code (which you’ve previously generated using AI or downloaded from a trusted source) into a new file. Then, carefully save the file with a descriptive name ending in the .php extension—for example, simplecontactform.php. Save this file directly in the folder (simplecontactform) you previously created.

At this point, your folder structure should resemble this:

simplecontactform/
  └── simplecontactform.php

Step 2: Accessing Your WordPress Server Files

With your plugin now created and saved, the next step is uploading your custom plugin into your WordPress website’s file structure. To do this, you’ll need access to your site’s files, commonly done via FTP (File Transfer Protocol). Popular FTP clients include FileZilla, Cyberduck, or you could use your hosting provider’s built-in File Manager interface (usually accessible from your hosting dashboard, e.g., cPanel or similar control panels).

Connect to your WordPress site’s filesystem using your FTP credentials (which you can get from your web hosting provider) or by logging directly into your hosting control panel.

Step 3: Uploading Your Plugin Files

Upon connecting, navigate carefully to your WordPress installation’s core directory. Find and click into the wp-content folder, then continue into the plugins folder. Your path should look like this:

yoursite.com/wp-content/plugins/

Now, it’s time to upload your new plugin folder. Drag and drop (or upload) your entire simplecontactform directory, including the .php file you previously saved, directly into the plugins directory. When you’re done, the structure on the server should look like this:

wp-content/plugins/
  └── simplecontactform/
         └── simplecontactform.php

Step 4: Activating Your Plugin within WordPress

With your plugin safely in place, activation is straightforward. Log into your WordPress Admin dashboard (usually accessed at yoursite.com/wp-admin). Click “Plugins” on the left sidebar menu. In the plugin list displayed, you should now find your new plugin titled “Simple Contact Form” waiting to be activated.

Click the “Activate” button listed directly under the plugin name. Upon activation, the plugin will automatically create any required database tables, preparing your site’s database to securely store form submissions.

Step 5: Display the Form on Your Website

To showcase your newly created Simple Contact Form on a webpage, go to the Pages section of your WordPress admin dashboard and choose “Add New.” Name the page something intuitive, such as “Contact Us.” Next, place the plugin’s shortcode—

Publish your new page, and voilà! Visit it directly, and you’ll immediately see your nicely formatted contact form ready for users to submit messages.

Managing Contact Form Submissions (CSV Export & Admin Interface)

One of the amazing features built into your AI-generated contact form plugin is an intuitive admin backend interface that requires zero additional setup. On your WordPress Admin dashboard, this contact form will have automatically generated an admin menu item called “Contact Submissions.”

Navigating there, you’ll see all submissions conveniently listed, with details such as Name, Email, Message, and the date/time received. Need to manage or archive your submissions? We’ve added built-in CSV export functionality so you can quickly download and review your submissions offline using standard software like Excel or Google Sheets.

Additionally, keeping your database tidy is simple. Checkboxes allow you to select entries you’d like to remove, and a single click deletes selected submissions after confirmation. Easy, tidy, and efficient.

Sample Code

Here is our sample plugin code. It’s all in one file, and worked fine for us. Test your version locally first, and make sure you back up your site just in case! This is a very basic approach, and fits in one file.

<?php
/*
Plugin Name: Simple Contact Form
Plugin URI: https://artsincubator.ca/artificial-intelligence/create-contact-wordpress-plugin-with-ai/
Description: A simple plugin for users to submit contact requests with WordPress.
Version: 1.0
Author: Jamie Bell and Tony Eetak
Author URI: https://artsincubator.ca
License: GPL2
*/

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

function contact_form_install() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'simplecontactform_submissions';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        contact_name varchar(255) NOT NULL,
        contact_email varchar(255),
        contact_message text NOT NULL,
        submitted_at datetime DEFAULT CURRENT_TIMESTAMP NOT NULL,
        PRIMARY KEY  (id)
    ) $charset_collate;";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}
register_activation_hook(__FILE__, 'contact_form_install');

function contact_form_shortcode() {
    ob_start(); ?>
    <form method="post" id="contact-form">
        <?php wp_nonce_field('contact_form_nonce', 'contact_nonce'); ?>
        <label for="contact_name">Name:</label>
        <input type="text" name="contact_name" required>
        
        <label for="contact_email">Email (optional):</label>
        <input type="email" name="contact_email">
        
        <label for="contact_message">Your Message (up to 500 words):</label>
        <textarea name="contact_message" id="contact_message" rows="6" required></textarea>
        <p id="word-count">Word Count: 0/500</p>
        <button type="submit" name="contact_submit" id="submit-button" disabled>Submit</button>
    </form>

    <?php 
    if (isset($_GET['submitted'])) { 
        echo '<script type="text/javascript">
                alert("Thank you for contacting us!");
              </script>';
    }
    return ob_get_clean();
}
add_shortcode('contact_submission_form', 'contact_form_shortcode');

function contact_form_script() { ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var messageField = document.getElementById("contact_message");
            var submitButton = document.getElementById("submit-button");
            var wordCountDisplay = document.getElementById("word-count");

            function countWords() {
                const text = messageField.value;
                const words = text.trim().split(/\s+/);
                let wordCount = words.filter(word => word.length > 0).length;

                if (wordCount > 500) {
                    messageField.value = words.slice(0, 500).join(" ");
                    wordCount = 500;
                }

                wordCountDisplay.textContent = "Word Count: " + wordCount + "/500";

                if (wordCount > 0 && wordCount <= 500) {
                    submitButton.disabled = false;
                    wordCountDisplay.style.color = "black";
                } else {
                    submitButton.disabled = true;
                    wordCountDisplay.style.color = "red";
                }
            }

            messageField.addEventListener('input', countWords);
        });
    </script>
<?php }
add_action('wp_footer', 'contact_form_script');

function handle_contact_form_submission() {
    if (isset($_POST['contact_submit'])) {
        if (!isset($_POST['contact_nonce']) || !wp_verify_nonce($_POST['contact_nonce'], 'contact_form_nonce')) {
            die('Security check failed');
        }

        $user_ip = $_SERVER['REMOTE_ADDR'];
        $last_submission = get_transient('contact_form_' . $user_ip);

        if ($last_submission) {
            wp_die('<script type="text/javascript">
                        alert("You can only submit once every 5 minutes.");
                        window.history.back();
                    </script>');
        }

        global $wpdb;
        $table_name = $wpdb->prefix . 'simplecontactform_submissions';

        $name = sanitize_text_field($_POST['contact_name']);
        $email = sanitize_email($_POST['contact_email']);
        $message = sanitize_textarea_field($_POST['contact_message']);

        $wpdb->insert(
            $table_name,
            ['contact_name' => $name, 'contact_email' => $email, 'contact_message' => $message],
            ['%s', '%s', '%s']
        );

        set_transient('contact_form_' . $user_ip, true, 300);
        
        wp_redirect(add_query_arg('submitted', 'true', wp_get_referer()));
        exit;
    }
}
add_action('init', 'handle_contact_form_submission');

function contact_form_menu() {
    add_menu_page(
        'Contact Submissions',
        'Contact Submissions',
        'manage_options',
        'contact-submissions',
        'contact_form_admin_page',
        'dashicons-admin-comments',
        25
    );
}
add_action('admin_menu', 'contact_form_menu');

function export_contact_form_submissions() {
    if (isset($_GET['export_submissions'])) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'simplecontactform_submissions';
        $submissions = $wpdb->get_results("SELECT * FROM $table_name ORDER BY submitted_at DESC", ARRAY_A);

        header('Content-Type: text/csv; charset=utf-8');
        header('Content-Disposition: attachment; filename=contact_submissions.csv');
        
        $output = fopen('php://output', 'w');
        fputcsv($output, ['ID', 'Name', 'Email', 'Message', 'Submitted At']);
        
        foreach ($submissions as $submission) {
            fputcsv($output, $submission);
        }
        fclose($output);
        exit;
    }
}
add_action('admin_init', 'export_contact_form_submissions');

function contact_form_admin_page() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'simplecontactform_submissions';
    
    if (isset($_POST['delete_submission'])) {
        $ids_to_delete = array_map('intval', $_POST['delete_ids'] ?? []);
        if (!empty($ids_to_delete)) {
            $ids_format = implode(',', array_fill(0, count($ids_to_delete), '%d'));
            $wpdb->query($wpdb->prepare("DELETE FROM $table_name WHERE id IN ($ids_format)", ...$ids_to_delete));

            echo '<script type="text/javascript">
                    alert("Selected submissions deleted successfully.");
                    window.location.reload();
                  </script>';
            return;
        }
    }

    $submissions = $wpdb->get_results("SELECT * FROM $table_name ORDER BY submitted_at DESC");
    
    ?>
    <div class="wrap">
        <h1>Contact Submissions</h1>
        <a href="?page=contact-submissions&export_submissions=true" class="button button-primary">Export to CSV</a>
        <form method="post" id="delete-submissions-form">
            <table class="widefat fixed" cellspacing="0" style="margin-top: 15px;">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="select-all"></th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Message</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($submissions as $submission) : ?>
                        <tr>
                            <td><input type="checkbox" name="delete_ids[]" value="<?php echo esc_attr($submission->id); ?>"></td>
                            <td><?php echo esc_html($submission->contact_name); ?></td>
                            <td><?php echo esc_html($submission->contact_email); ?></td>
                            <td><?php echo esc_html($submission->contact_message); ?></td>
                            <td><?php echo esc_html($submission->submitted_at); ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
            <button type="submit" name="delete_submission" class="button button-secondary" onclick="return confirmDelete()">Delete Selected</button>
        </form>
    </div>
    <script type="text/javascript">
        document.getElementById('select-all').addEventListener('click', function(event) {
            var checked = event.target.checked;
            var checkboxes = document.querySelectorAll('input[type=checkbox][name="delete_ids[]"]');
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        function confirmDelete() {
            return confirm('Are you sure you want to delete the selected submissions?');
        }
    </script>
    <?php
}

Unlocking Potential with AI-Generated Code

Gone are the days of paying for expensive software just to enable basic functionalities like a contact form. With vibe coding and AI’s power, creating efficient plugins is now accessible to everyone. This simple contact form plugin is an example of how innovation can provide practical, economical solutions to everyday digital challenges.

Now is the time to dive into the world of creating your own AI and WordPress plugins. For us, the OpenAI Researcher Access Program has made it possible for to explore, experiment, and create our own plugins without breaking the bank. And we’re really grateful for their support this past year, because it’s been a totally wild adventure.

This is your opportunity to unleash creativity, enhance your website, and most importantly, save money.

So go on, embrace the thrill of innovation as you design solutions tailored precisely to your needs. Blending AI with the spirit of vibe coding offers a playground of possibilities where you can have fun crafting unique, efficient plugins. Say goodbye to costly subscriptions and hello to empowerment. Join this exciting journey and transform the way you approach your digital projects! Good luck!