Build simple contact form for WordPress from scratch

Hi! this is Michael, and today I want to show you how to make a plugin “contact form” for the WordPress! But wait…Why would you even want to make your own contact form plugin for WordPress? Well, there multiple reasons for it! Here are some of the reasons I think it’s worth developing your plugins.

(1. For your career as a WordPress developer in the future.

It will be great to learn about how WordPress works behind the scene. These skills will help you gain experience in plugin development, and will be useful for your future career as a freelancer or even help you land a job in the web industry!

(2. Your own custom plugin!

There are hundreds of plugins out there but why don’t you make your own custom plugin? Have you ever thought that some plugins you like have too many useless features or packed with annoying  JS and CSS that you don’t even want to use? If you make your own from scratch, there will be no need to worry about anything anymore!

Ok, let’s start making something! This time we will be making a simple contact form! 

(1. We will go to  wp-content/plugins/   and make a folder called myform and create a file called myform.php Inside the myform folder. Then write the following code inside the file. With the following declaration, your plugin will be available the Admin dashboard! Let’s keep going!

<?php
/*
Plugin Name: Basic WP Contact form
Plugin URI: http://anteprocess.versus.jp
Description: This is the Basic WP Contact form
Version: 1.0
Author: Michael MH
Author URI: http://anteprocess.versus.jp
*/

 

(2. Let’s create the UI part! my_html_form is simply a function to display the HTML form!

// Function to generate the form
function my_html_form() {
    echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
    echo '<p>';
    echo 'Your Name (required) <br />';
    echo '<input type="text" name="my-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["my-name"] ) ? esc_attr( $_POST["my-name"] ) : '' ) . '" size="40" />';
    echo '</p>';
    echo '<p>';
    echo 'Your Email (required) <br />';
    echo '<input type="email" name="cf-email" value="' . ( isset( $_POST["my-email"] ) ? esc_attr( $_POST["my-email"] ) : '' ) . '" size="40" />';
    echo '</p>';
    echo '<p>';
    echo 'Subject (required) <br />';
    echo '<input type="text" name="my-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST["my-subject"] ) ? esc_attr( $_POST["my-subject"] ) : '' ) . '" size="40" />';
    echo '</p>';
    echo '<p>';
    echo 'Your Message (required) <br />';
    echo '<textarea rows="10" cols="35" name="my-message">' . ( isset( $_POST["my-message"] ) ? esc_attr( $_POST["my-message"] ) : '' ) . '</textarea>';
    echo '</p>';
    echo '<p><input type="submit" name="my-submitted" value="Send"/></p>';
    echo '</form>';
}

 

(3. Let’s create a function that sanitizes and cleans the form data and simply sends the mail to the WordPress admins email address!

The sanitation of the form data is done by the following WordPress internal functions:

  • sanitize_text_field(): Sanitize the data from user input.
  • sanitize_email(): Strips out all characters that are not allowable in an email.
  • esc_textarea(): Escape the message text area values.

get_option( 'admin_email' ) automatically retrieves the WordPress admins email address from the DB where the email will be delivered to. But if you don’t want to send the mail to the admin, you can simply assign a desired email address to the $to value!

If the wp_email has been sent successfully, then a value of true will be returned.

function mail_to_admin() {
    if ( isset( $_POST['my-submitted'] ) ) {
        // sanitize form values
        $name    = sanitize_text_field( $_POST["my-name"] );
        $email   = sanitize_email( $_POST["my-email"] );
        $subject = sanitize_text_field( $_POST["my-subject"] );
        $message = esc_textarea( $_POST["my-message"] );

        // get the blog administrator's email address
        $to = get_option( 'admin_email' );
        $headers = "From: $name <$email>" . "\r\n";
        // If email has been process for sending, display a success message
        if ( wp_mail( $to, $subject, $message, $headers ) ) {
            // Display the thank you messages or whatever in here 
        } else {
            // Do something when you fail to send the mail
        }
    }
}

(4. Create the short code!

The function my_shortcode() is the callback function that is called when the contact form shortcode [contact_form] is active.

function my_shortcode() {
    ob_start();
    mail_to_admin();
    my_html_form();

    return ob_get_clean();
}

The above functions calls the my_html_form() and mail_to_admin()functions to display the contact form HTML form and validate the form data respectively.

Finally, the shortcode [contact_form] is registered with WordPress. So simply add:

add_shortcode( 'contact_form', 'my_shortcode' ); 

End of the line!

Hooray!  we just developed our own WordPress contact form plugin!

Now, to use this plugin on your website, you will just have to activate it in under the ‘Plugins’ section of your WordPress dashboard, then all you have to do is to create a post or page and then simply add the shortcode where you want the form to show up like[contact_form]

That’s all folks! We still haven’t tested on our website, but hope it works!

Leave a Reply

Your email address will not be published. Required fields are marked *