How to Building Your Own WordPress Contact Form Plugin in 5 Minutes

View: 907    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: WordPress template   Fields: Other

10 point/3 review File has been tested

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.

Introduction

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 simple terms, a contact form has a set of questions and fields which are filled in by a visitor. The information is usually automatically sent via email to the site administrator or another nominated email account. It is worth noting that this email address isn’t displayed 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 are used for collecting feedback, enquiries and other data from users.

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 started building your own plugins.

Below are some of the most highly rated 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 as 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 few seconds your contact form is ready.

Bestwebsoft Contact Form – 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.

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

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

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 develop your own plugin so you can kiss goodbye bloated plugins. In this example no extra CSS and JavaScript files are required, the validation done using 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 pluigns 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 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 ]: only letters, spaces and numbers allowed in the name field; special symbols are deemed invalid.

  • [a-zA-Z ]: only letters and spaces are allowed in the subject field.

  • The email form control validates the email field hence there is no need for a pattern attribute.

For more information on how this works, read my article on Client-Side Form Validation with HTML5 to understand how the pattern attribute assists with form validation.

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 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.

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

Don’t want the contact form to send the mail to admin? 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() , the textThanks for contacting me, expect a response soon will be shown, otherwise An unexpected error occurredis 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 calls 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, then 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.

WordPress Contact Form Plugin Example

Conclusion

To further understand how the plugin was built and how to implement it on your WordPress site, copy the code below, paste in a file and upload it to your /wp-content/plugins/ directory.

Here’s the entire plugin example:

<?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
*/

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

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

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

 return ob_get_clean();
}

add_shortcode( 'sitepoint_contact_form', 'cf_shortcode' );

?>

 

How to Building Your Own WordPress Contact Form Plugin in 5 Minutes

How to Building Your Own WordPress Contact Form Plugin in 5 Minutes Posted on 29-03-2016  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. 3.3333333333333/10 907

Comment:

To comment you must be logged in members.

Files with category

  • 11 Powerful Tips and Techniques in wordpress

    View: 509    Download: 0   Comment: 0   Author: none  

    11 Powerful Tips and Techniques in wordpress

    Category: WordPress template
    Fields: Other

    0/2 review
    Debugging is an essential skill for any developer. This tutorial will show you 11 powerful ways to debug WordPress and PHP errors.

  • MH Edition Lite Responsive WordPress Theme 2017 Free

    View: 657    Download: 6   Comment: 0   Author: none  

    MH Edition Lite Responsive WordPress Theme 2017 Free

    Category: WordPress template
    Fields: Other

    1.5/3 review
    MH Edition lite is a flexible and visually sophisticated WordPress theme for technology and news magazines. This magazine theme can transform your current WordPress website into a powerful and yet lightweight online magazine or dynamic news website...

  • Morning Monday Lite Responsive WordPress Theme Free

    View: 608    Download: 8   Comment: 0   Author: none  

    Morning Monday Lite Responsive WordPress Theme Free

    Category: WordPress template
    Fields: Other

    0.9/5 review
    Morning Monday Lite theme is designed for magazine with flexible layout. The theme is based on KOPATHEME layout manager technique that will let you flexibility choose layout options of every pages within your site.

  • How to Translate a WordPress Plugin Description

    View: 612    Download: 0   Comment: 0   Author: none  

    How to Translate a WordPress Plugin Description

    Category: WordPress template
    Fields: Other

    0.020325203252033/246 review
    If you’ve developed a useful plugin for WordPress, that’s great – but it’s even better if you make your plugin accessible to users speaking other languages.

  • Lovecraft Responsive WordPress Theme Free

    View: 518    Download: 1   Comment: 0   Author: none  

    Lovecraft Responsive WordPress Theme Free

    Category: WordPress template
    Fields: Other

    2/2 review
    Lovecraft is a beautiful two-column theme for bloggers. It features a responsive design, great typography, a full-width header image

  • Ascent Theme is a fully responsive WordPress theme

    View: 5090    Download: 0   Comment: 0   Author: none  

    Ascent Theme is a fully responsive WordPress theme

    Category: WordPress template
    Fields: Other

    4.5/1 review
    Ascent Theme is a fully responsive WordPress theme that looks elegant on any devices. It is simple, clean and lightweight WordPress theme based on the most modern technologies like HTML5 and CSS3.

  • Photolab Responsive WordPress Theme Free

    View: 577    Download: 0   Comment: 0   Author: none  

    Photolab Responsive WordPress Theme Free

    Category: WordPress template
    Fields: Other

    4/1 review
    Photolab theme echoes a flat design approach and a modern clean look perfect for creating an engaging blog. Its layout inspired by the latest trends underlines visual excellence of the theme without distracting from the content.

  • ZeroGravity is a simple and light WordPress theme

    View: 526    Download: 0   Comment: 0   Author: none  

    ZeroGravity is a simple and light WordPress theme

    Category: WordPress template
    Fields: Other

    4.5/1 review
    ZeroGravity is a simple and light WordPress theme with a clear and neat design. Some its features are: left sidebar or right, custom theme color (blue, green, orange, red, pink, yellow or purple), custom favicon, six different Google Fonts,...

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd