#8 Module 8: Shortcodes & Front-End Forms

⚡ Module 8: Shortcodes & Front-End Forms

Shortcodes let you add custom content to posts or pages using simple tags like [my_form]. In this module, you’ll build a form visible on the frontend and process it securely — all inside your plugin!

Step 1 – Register a Simple Shortcode

(📋 Copy or edit directly below)

    

    

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

  

📘 Now add [mfp_hello] to any post or page — it displays “Welcome to My Plugin Form!”.

Step 2 – Create a Front-End Form via Shortcode

    

    

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');

  

📘 Use the shortcode [mfp_form] on a page to display the form.

Step 3 – Handle Form Submission (Securely)

    

    

function mfp_handle_form_submission() {
    if (isset($_POST['mfp_submit'])) {
        $name = sanitize_text_field($_POST['mfp_name']);
        $msg  = sanitize_textarea_field($_POST['mfp_message']);

        // You can save to DB, send email, etc.
        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');

  

📘 This hook processes the form when it’s submitted — right before the page ends. You could also save the data to a custom table or send an email.

Step 4 – Optional: Add Nonce for Security

    

    

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');

  

📘 Use [mfp_secure_form] to show a secure front-end form that protects against CSRF attacks.

✅ Code copied to clipboard!

© 2025 WordPress Plugin Tutorial | Module 8 – Shortcodes & Front-End Forms