New Post has been published on My Boogle
New Post has been published on http://www.myboogle.net/create-your-own-wordpress-contact-form-plugin/
Create Your Own Wordpress Contact Form Plugin
If you are running a blog/website using wordpress then you must be aware with wordpress contact form plugin. There are various plugin available for wordpress contact form. But today we will do something interesting. We will build a wordpress contact form by coding.
As you all know wordpress is an open source platform written in php. So we can basically do anything with wordpress. So in this tutorial we will create our own plugin for wordpress contact form.
Why create our own wordpress contact form?
You might think that why we should create our own wordpress contact form where there are a lots of plugin already available. The answer is
For customization
For learning how to develop plugins for wordpress
Prerequisite
If you are going to follow this tutorial then you should already know about php.
Actually you should know how to code in php.
Configuring Your System for WordPress Plugin Development
You are going to develop a plugin. Obviously you cannot code and test on your live running wordpress website. Here for developing our wordpress contact form widget we will use a local server.
I am going to use wamp server (You can also use xampp or lamp) and notepad++.
Installing Wamp Server and Notepad++
This is a very easy process just download wamp server and install as you install other windows applications.
Do the same with notepad++ as well.
After the installing both application (notepad++ and wamp server) run wamp server.
If you are seeing a green icon in your taskbar (as shown in the image), that means your server is working fine.
Installing WordPress to your localhost
Download wordpress from here.
Extract the zip and paste it to your root directory (for wamp root directory is c:/wamp/www)
So I have my wordpress installed at c:/wamp/www/wordpress . So for opening wordpress I will go to the URL localhost/wordpress. Follow the install instructions and install wordpress.
Developing Your Own WordPress Contact Form
Go to the plugin directory (C:\wamp\www\wordpress\wp-content\plugins)
Create a new folder for your contact form plugin. I have created MyContactFormPlugin
Now create a php file inside that folder named MyContactFormPlugin.php and open that file using notepad++ (You can use any text editor).
Inside your file write the following code.
<?php /** * Plugin Name: My Contact Form Plugin * Plugin URI: http://www.myboogle.net * Description: My contact form wordpress plugin * Version: 1.0.0 * Author: Belal Khan * Author URI: http://www.myboogle.net * License: GPL2 */
Now go to wp-admin -> installed plugins to see the list of installed plugins.
You will see the plugin you just created in the list.
As you can see above our plugin is listed. You can also activate or deactivate this plugin. But unfortunately it won’t make any difference, because this plugin don’t do anything. 😛
The structure of our plugin is ready now we will create an HTML for for our contact form. So inside MyContactForm.php write the following code.
<?php /** * Plugin Name: My Contact Form Plugin * Plugin URI: http://www.myboogle.net * Description: My contact form wordpress plugin * Version: 1.0.0 * Author: Belal Khan * Author URI: http://www.myboogle.net * License: GPL2 */ function mcf_form_gui() echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">'; echo '<p>'; echo 'Your Name (required) <br />'; echo '<input type="text" name="mcf-name" 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="mcf-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="mcf-subject"' . ( 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="mcf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>'; echo '</p>'; echo '<p><input type="submit" name="mcf-submitted" value="Send"/></p>'; echo '</form>'; function send_mail() // if the submit button is clicked, send the email if ( isset( $_POST['mcf-submitted'] ) ) //sanitize form values $name = sanitize_text_field( $_POST["mcf-name"] ); $email = sanitize_email( $_POST["mcf-email"] ); $subject = sanitize_text_field( $_POST["mcf-subject"] ); $message = esc_textarea( $_POST["mcf-message"] ); //retreiving the admin email $to = get_option( 'admin_email' ); $headers = "From: $name <$email>" . "\r\n"; //showing a success msg when the mail sent successfully if ( wp_mail( $to, $subject, $message, $headers ) ) echo '<div>'; echo '<p>Your message has been sent successfully</p>'; echo '</div>'; else //showing a failure message if mail did not sent echo 'Could not send your message please try again'; //method to call to display our form function mcf_shortcode() ob_start(); send_mail(); mcf_form_gui(); return ob_get_clean(); //Adding a shortcode //So whenever you want to put the form just put the shortcode [mcf_contact_form] and the form will display add_shortcode( 'mcf_contact_form', 'mcf_shortcode' );
Now to test your contact form create a new post and put the shortcode [mcf_contact_form] and publish.
wordpress contact form
So you can see that our form is working absolutely fine. You can now zip your project folder to upload it to your actual wordpress site to use your created contact form. This was the simplest example of creating a wordpress contact form plugin. If you are having any confusions then kindly leave your comments. Thank You
