Create a custom shortcode to display a contact form in WordPress

Custom Contact Form Shortcode Solution

Custom Code Solution

Add this code to your theme's functions.php file or in a site-specific plugin:

Creates the contact form shortcode and handling function:

// Create shortcode [contact_form]
add_shortcode('contact_form', 'custom_contact_form');

function custom_contact_form() {
    $form_html = '
    <form id="custom-contact-form" class="contact-form" method="post">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" required>
        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" required>
        </div>
        <div class="form-group">
            <label for="message">Message:</label>
            <textarea name="message" id="message" rows="5" required></textarea>
        </div>
        <input type="hidden" name="contact_form_submitted" value="1">
        <button type="submit">Send Message</button>
    </form>';
    
    return $form_html;
}

Add this code to handle form submission:

// Handle form submission
add_action('init', 'handle_contact_form');

function handle_contact_form() {
    if (isset($_POST['contact_form_submitted'])) {
        $name = sanitize_text_field($_POST['name']);
        $email = sanitize_email($_POST['email']);
        $message = sanitize_textarea_field($_POST['message']);
        
        $to = get_option('admin_email');
        $subject = 'New Contact Form Submission';
        $body = "Name: $name\n";
        $body .= "Email: $email\n\n";
        $body .= "Message:\n$message";
        
        wp_mail($to, $subject, $body);
        
        // Redirect to prevent form resubmission
        wp_redirect(add_query_arg('submitted', '1'));
        exit;
    }
}

Usage

Insert this shortcode where you want the form to appear:

[contact_form]

Optional CSS Styling

Add this to your theme's style.css:

.contact-form {
    max-width: 500px;
    margin: 0 auto;
}

.contact-form .form-group {
    margin-bottom: 15px;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 8px;
}

.contact-form button {
    background: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

Plugin Alternatives

If you prefer using a plugin, here are reliable options:

1. Contact Form 7 - Free, popular, and highly customizable
2. WPForms Lite - User-friendly drag-and-drop form builder
3. Ninja Forms - Feature-rich form builder with free and premium versions

Notes

• The custom code solution provides basic form functionality with email notification
• Form submissions are sent to the admin email address set in WordPress
• Add additional validation or spam protection as needed
• Consider adding nonce verification for enhanced security
• Customize the form fields and styling to match your needs