How to Create a Custom Contact Form in WordPress

Creating a Custom Contact Form in WordPress

Basic Approach

There are two main ways to create a custom contact form:

1. Using PHP and WordPress hooks to build from scratch
2. Using a form builder plugin (recommended for non-developers)

Building a Custom Form from Scratch

1. Create the Form Structure and Shortcode

This code creates a basic form shortcode you can use anywhere:

function custom_contact_form_shortcode() {
    $form = '
    <form id="custom-contact-form" method="post">
        <p>
            <label>Name:</label>
            <input type="text" name="contact_name" required>
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="contact_email" required>
        </p>
        <p>
            <label>Message:</label>
            <textarea name="contact_message" required></textarea>
        </p>
        ' . wp_nonce_field('contact_form_submit', 'contact_nonce', true, false) . '
        <input type="submit" name="contact_submit" value="Send Message">
    </form>';
    
    return $form;
}
add_shortcode('custom_contact', 'custom_contact_form_shortcode');

2. Handle Form Submission

This code processes the form data securely:

function handle_contact_form_submission() {
    if (isset($_POST['contact_submit'])) {
        // Verify nonce
        if (!wp_verify_nonce($_POST['contact_nonce'], 'contact_form_submit')) {
            wp_die('Security check failed');
        }

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

        // Prepare email content
        $to = get_option('admin_email');
        $subject = 'New Contact Form Submission';
        $body = "Name: $name\n";
        $body .= "Email: $email\n\n";
        $body .= "Message:\n$message";
        $headers = array('Content-Type: text/plain; charset=UTF-8');
        
        // Send email
        wp_mail($to, $subject, $body, $headers);
    }
}
add_action('init', 'handle_contact_form_submission');

Security Considerations

1. Always use wp_nonce_field() to prevent CSRF attacks
2. Sanitize all input data using WordPress sanitization functions
3. Validate email addresses with sanitize_email()
4. Consider adding CAPTCHA for spam prevention
5. Limit submission frequency to prevent abuse

Styling the Form

Add this CSS to your theme's stylesheet:

#custom-contact-form {
    max-width: 500px;
    margin: 20px auto;
}

#custom-contact-form input[type="text"],
#custom-contact-form input[type="email"],
#custom-contact-form textarea {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
}

#custom-contact-form textarea {
    height: 150px;
}

Using Form Builder Plugins

For non-developers, these plugins offer user-friendly solutions:

1. Contact Form 7

   • Free, popular, and feature-rich
   • https://wordpress.org/plugins/contact-form-7/

2. WPForms Lite

   • User-friendly drag-and-drop builder
   • https://wordpress.org/plugins/wpforms-lite/

3. Ninja Forms

   • Modern interface with extensive features
   • https://wordpress.org/plugins/ninja-forms/

Common Pitfalls to Avoid

1. Not sanitizing user input
2. Forgetting to handle errors gracefully
3. Not providing user feedback after submission
4. Neglecting mobile responsiveness
5. Storing sensitive data in plain text
6. Not implementing spam protection

Usage

After implementing the code, use this shortcode in any post or page:

[custom_contact]

Additional Features to Consider

1. Add success/error messages
2. Implement file uploads
3. Add custom validation
4. Create an admin interface for form settings
5. Store submissions in the database
6. Add email templates

Remember to test thoroughly across different devices and browsers before launching.