#8 Module 8 Implementation Steps

 Absolutely ✅ — here’s your step-by-step guide to implement everything from Module 8: Shortcodes & Front-End Forms in your own WordPress plugin.

---

⚡ Module 8 — Shortcodes & Front-End Forms

🎯 Goal

You’ll learn how to:

• Create simple and dynamic shortcodes

• Display front-end forms

• Handle form submissions

• Add nonce-based security

---

🪜 Step 1 – Open or Create Your Plugin File

Go to:

/wp-content/plugins/my-first-plugin/

Create (or open) your main file — e.g. my-first-plugin.php — and ensure it starts with:

<?php
/**
 * Plugin Name: My First Plugin
 * Description: Learning WordPress Plugin Development – Module 8
 * Version: 1.0
 * Author: You
 */

---

🪜 Step 2 – Add a Basic Shortcode

Inside the same plugin file, add:

function mfp_simple_shortcode() {
    return "<h3>Welcome to My Plugin Form!</h3>";
}
add_shortcode('mfp_hello', 'mfp_simple_shortcode');

✅ Test:
In a WordPress page or post, insert:

[mfp_hello]

It should show the message “Welcome to My Plugin Form!” on the front-end.

---

🪜 Step 3 – Create a Front-End Form with Shortcode

Add this function below the first one:

function mfp_contact_form_shortcode() {
    ob_start(); ?>
    <form method="post">
        <label>Your Name:</label><br>
        <input type="text" name="mfp_name" required><br><br>
        <label>Your Message:</label><br>
        <textarea name="mfp_message" required></textarea><br><br>
        <input type="submit" name="mfp_submit" value="Send">
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('mfp_form', 'mfp_contact_form_shortcode');

✅ Test:
Insert this shortcode in a page:

[mfp_form]

You’ll see a working contact form (though not yet saving or displaying messages).

---

🪜 Step 4 – Process Form Submissions

Add this handler below:

function mfp_handle_form_submission() {
    if (isset($_POST['mfp_submit'])) {
        $name = sanitize_text_field($_POST['mfp_name']);
        $msg  = sanitize_textarea_field($_POST['mfp_message']);
        echo '<div style="color:#00ffa3;">Thank you, ' . esc_html($name) .
             '!<br>Your message: ' . esc_html($msg) . '</div>';
    }
}
add_action('wp_footer', 'mfp_handle_form_submission');

✅ Test:
Reload your form page, fill it in, click Send, and see your confirmation text appear.

---

🪜 Step 5 – Add Nonce for Security (Recommended)

Add this secure version to your plugin:

function mfp_contact_form_with_nonce() {
    ob_start(); ?>
    <form method="post">
        <?php wp_nonce_field('mfp_form_action', 'mfp_form_nonce'); ?>
        <label>Your Name:</label><br>
        <input type="text" name="mfp_name" required><br><br>
        <label>Message:</label><br>
        <textarea name="mfp_message" required></textarea><br><br>
        <input type="submit" name="mfp_submit" value="Send Securely">
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('mfp_secure_form', 'mfp_contact_form_with_nonce');

function mfp_secure_form_handler() {
    if (isset($_POST['mfp_submit']) &&
        isset($_POST['mfp_form_nonce']) &&
        wp_verify_nonce($_POST['mfp_form_nonce'], 'mfp_form_action')) {

        $name = sanitize_text_field($_POST['mfp_name']);
        $msg  = sanitize_textarea_field($_POST['mfp_message']);
        echo '<div style="color:#00ffa3;">✅ Secure message from ' .
             esc_html($name) . ': ' . esc_html($msg) . '</div>';
    }
}
add_action('wp_footer', 'mfp_secure_form_handler');

✅ Test:
Use [mfp_secure_form] in a page or post — the form now includes a hidden nonce field for secure submissions.

---

🪜 Step 6 – (Optionally) Save or Email the Form Data

Inside your handler, instead of echoing, you can:

wp_mail('you@example.com', 'New Form Submission',
        "From: $name\nMessage:\n$msg");

Or insert into a custom table using $wpdb.

---

🪜 Step 7 – Final Verification

1. Activate your plugin from Dashboard → Plugins.

2. Create a new Page with the shortcode [mfp_secure_form].

3. Fill and submit the form.

4. Confirm that:

   • Data sanitization works

   • Nonce verification prevents resubmission by URL reload

   • Output or email is generated properly

---

✅ Module 8 Summary

Feature	Purpose
add_shortcode()	Register shortcodes like [mfp_form]
ob_start() / ob_get_clean()	Capture & return HTML
$_POST + sanitize_*()	Handle and clean user input
wp_nonce_field()	Add hidden security tokens
wp_verify_nonce()	Verify submitted forms
add_action('wp_footer')	Run form logic at page end

---

💡 Pro Tips

• Use wp_enqueue_script() and AJAX (coming in Module 9) for smoother form submissions.

• Always sanitize and escape user data before saving or displaying.

• You can turn this form into a reusable contact-form plugin easily!

---

Would you like me to continue with Module 9 – Using the REST API & Fetch Requests next (same glowing interactive HTML format)?