Contact Form WordPress Creation & Coding Guide

Standard web practices include a page where a contact form is located. We'll guide you on contact form creation and coding on WordPress

Most websites are typically designed to comply with standard web practices by including a dedicated page where a contact form is located. This provides visitors with an easy way to reach out to the site owner. In today’s tutorial, we’ll share a guide on contact form creation and coding on WordPress.

In simple terms, a contact form has questions and fields for visitors. The information usually automatically goes via email to the site administrator or another email account. It is worth noting that this email address isn’t appearing to visitors, so using a contact form typically reduces email spam from bots that harvest naked email addresses on the Internet. Contact forms play a very important role on a website, where they use for collecting feedback, inquiries, and other data from users.

Contact Form WordPress Creation & Coding Guide — Contact Form WordPress Creation

If your website is powered by WordPress, there are numerous plugins that seamlessly integrate a contact form on your website.

In this article, I will provide a list of some free WordPress contact form plugins. I will also discuss why you should consider rolling your own contact form. Then, I will provide you with a short tutorial showing you how to build your own WordPress contact form plugin.

WordPress Contact Form Plugins

Before we get started, we’re going to go over a few of the popular free contact form plugins available in the WordPress Plugin Directory. These are great to use, but even better to learn from when you’re getting up building your own plugins.

Below are some of the most with good rates and free contact form plugins for WordPress:

Contact Form 7 – This is the second most popular plugin with over 18 million downloads, it could almost be considered the de facto contact form plugin for a WordPress website. Contact Form 7 can manage multiple contact forms and you can customize the form and the email contents with simple markup. The form features include Ajax-powered submission, CAPTCHA, Akismet spam filtering, and lots more.
Contact Form to Email – This plugin not only creates contact forms and sends the data to a specified email address it also saves the contact form data into a database, providing printable reports and the option to export the selected data to CSV/Excel file.
FormGet Contact Form – An easy online drag-and-drop contact form builder tool. All you need to do is click on the fields that you want in your form, and within a few seconds, your contact form is ready.
Bestwebsoft Contact Form – This allows you to implement a feedback form to a web page or a post effortlessly. It is extremely easy, and you won’t require any additional settings, even though there are some available to play with the contact form creation and coding.

Contact From WordPress Creation 1 contact form 7 wordpress plugin — Contact From WordPress Creation contact form 7 WordPress plugin

Why Roll Your Own Contact Form Plugin?

Becoming a Better Developer

Developing your own WordPress plugin helps you better understand how WordPress works ‘under the hood’ which can help you to become a more experienced web developer. While there are tens of thousands of plugins in the WordPress Plugin Directory to use, being able to modify and extend other plugins is a very useful skill.

Building a Better Form: Contact WordPress Creation & Coding Guide

Many WordPress contact form plugins are out. They include many features that you may never use. Heavy usage of JavaScript and CSS files is also common in some of the standard contact form plugins. This increases the number of HTTP requests which adversely affects WordPress performance.

According to Yahoo’s performance rules:

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

If you are like me, and you desire a simple contact form plugin that just works, read on. I’ll guide you through the simple process of developing your own plugin so you can kiss goodbye plugins. In this example, no extra CSS and JavaScript files are in needs, and the validation uses HTML5.

Contact Form Plugin Development

In five minutes, you will learn how to develop a simple WordPress contact form, that’s a promise!

Ready? Set? Go!

All WordPress plugins are PHP files, located in the /wp-content/plugins/ directory. In our example, the file will be called sp-form-example.php. I assume you’re comfortable with connecting to your server using FTP/SFTP/SCP or SSH.

If you want to follow along, simply create a file called sp-form-example.php (the final complete example will be available at the end of the article):

<?php
/*
Plugin Name: Example Contact Form Plugin
Plugin URI: http://example.com
Description: Simple non-bloated WordPress Contact Form
Version: 1.0
Author: Agbonghama Collins
Author URI: http://w3guy.com
*/
    //
    // the plugin code will go here..
    //
?>

Next, we add the function html_form_code() that contains the contact form creation in HTML:

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

Basic validation was added to the form via the pattern input attribute.

The RegEX in the contact form does the following field validation:

[a-zA-Z0-9 ]: Firstly, only letters, spaces, and numbers are up in the name field; special symbols are invalid.
[a-zA-Z ]: Secondly, only letters and spaces are up in the subject field.
The email Finally, form control validates the email field hence there is no need for a pattern attribute.

Hurry Up!

Okay, how many minutes do we have left? Four minutes! We still have time to get this over with.

The function deliver_mail() sanitizes the form data and sends the mail to the WordPress administrator’s email address.

function deliver_mail() {

    // if the submit button is clicked, send the email
    if ( isset( $_POST['cf-submitted'] ) ) {

        // sanitize form values
        $name    = sanitize_text_field( $_POST["cf-name"] );
        $email   = sanitize_email( $_POST["cf-email"] );
        $subject = sanitize_text_field( $_POST["cf-subject"] );
        $message = esc_textarea( $_POST["cf-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 ) ) {
            echo '<div>';
            echo '<p>Thanks for contacting me, expect a response soon.</p>';
            echo '</div>';
        } else {
            echo 'An unexpected error occurred';
        }
    }
}

The sanitation of the form data is working 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.

The code get_option( 'admin_email' ) programmatically retrieves the WordPress administrator’s email address from the database to which the email will be delivered.

Don’t want the contact form to send the mail to admin? So, simply set the variable $to to the desired email address.

If the email has successfully been processed without any errors by the function wp_mail(). So, the text Thanks for contacting me, expect a response soon will be shown, otherwise, An unexpected error occurred is displayed.

1 Minute and 30 Seconds Left

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

function cf_shortcode() {
    ob_start();
    deliver_mail();
    html_form_code();

    return ob_get_clean();
}

The above functions call the html_form_code() and deliver_mail() functions to display the contact form HTML form and validate the form data respectively.

Finally, the shortcode [sitepoint_contact_form] is registered to WordPress. So simply add:

add_shortcode( 'sitepoint_contact_form', 'cf_shortcode' );

3, 2, 1… Time’s Up!

Congratulations, we have successfully developed our own WordPress contact form plugin and I have fulfilled my earlier promise.

Now, to use this plugin on your website, simply activate it in under the ‘Plugins’ section of your WordPress dashboard. In addition, create a post or page, and then simply add the shortcode where you want the form to appear [sitepoint_contact_form].

If you then preview the page and you should see the contact form displayed as shown below.