Pippins Plugins
  • Email
  • Facebook
  • Feedburner
  • Github
  • Google
  • Twitter
  • Vimeo
  • Youtube
  • Rss
  • About
  • News
  • Join the Site
    • Member Benefits
    • Member Plugins
    • Email Notifications
  • Plugin Store
    • Affiliate Area
    • Checkout
  • Plugins
    • Plugin Portfolio
      • Plugin Portfolio – List View
    • Free
    • Premium
    • Member Plugins
    • Coding Standards
    • Get Plugin Support
  • Tutorials
    • Series
      • Plugin Development 101
      • Creating a User Follow System Plugin
      • Customizing Restrict Content Pro
      • Displaying Content with Easy Content Types
      • Writing Your First WordPress Plugins, Basic to Advanced
      • Working with Widgets
      • User Submitted Image Galleries
      • Plugin Thoughts
      • Integrating Stripe.com with WordPress
      • WordPress Rewrite API
    • Member Exclusive
      • Free Members
      • Subscriber Only
    • Difficulty
      • Beginner
      • Intermediate
      • Advanced
    • Action and Filter Hooks
    • Ajax
    • Custom Post Types
    • External APIs
    • Short Codes
    • Taxonomies
    • Video Tutorials
    • Widget Tutorials
    • WordPress Admin / Dashboard
    • Working with jQuery
    • WordPress Database
    • Writing Plugins
    • Tag Index
  • Reviews
  • Support Forum
  • Contact
    • Support the Site
    • Request Code Review
    • Plugin Support

Create an Ajaxified Contact Form Short Code

Posted on May 7, 2011 by Pippin in Ajax, Contact Forms Tutorials, Intermediate, Short Codes, Tutorials 21 Comments
Home» Tutorials » Ajax » Create an Ajaxified Contact Form Short Code
Tweet
Love It - 5

A very popular feature of many themes is an Ajaxified contact form, often inserted through a shortcode. So I’m going to show you how to create one from scratch as a plugin that can be dropped into any WordPress theme.

Note: several of the techniques used in this tutorial are out of date and now not considered good practices.

1 – The Plugin File / Folder Structure

As our plugin is going to be really quite simple, we only need one folder and two files.

2 – Create the Main Plugin File

First we will put all of the plugin header code into our file. This tells WordPress about our plugin: the plugin name, author name, version number, etc. We are also declaring a global variable that contains the path to the plugin’s root folder, which we will use later.

1
2
3
4
5
6
7
8
9
10
11
/*
Plugin Name: jQuery Contact Shortcode
Plugin URI: http://pippinsplugins.com/contact-shortcode/
Description: Adds a shortcode for displaying a jQuery Validated Contact Form
Version: 1.0
Author: Pippin Williamson
Author URI: http://184.173.226.218/~pippin 
*/
 
// plugin root folder
$cs_base_dir = WP_PLUGIN_URL . '/' . str_replace(basename( __FILE__), "" ,plugin_basename(__FILE__));

Next we will write the function that displays our contact forms HTML, and also outputs our jQuery to perform the validation upon submission.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
function pippin_shortcode_contact( $atts, $content = null)	{
 
	// gives access to the plugin's base directory
	global $cs_base_dir;
 
	extract( shortcode_atts( array(
      'email' => get_bloginfo('admin_email')
      ), $atts ) );
 
		$content .= '
		<script type="text/javascript"> 
			var $j = jQuery.noConflict();
			$j(window).load(function(){				
				$j("#contact-form").submit(function() {
				  // validate and process form here
					var str = $j(this).serialize();					 
					   $j.ajax({
					   type: "POST",
					   url: "' . $cs_base_dir . 'sendmail.php",
					   data: str,
					   success: function(msg){						
							$j("#note").ajaxComplete(function(event, request, settings)
							{ 
								if(msg == "OK") // Message Sent? Show the Thank You message and hide the form
								{
									result = "Your message has been sent. Thank you!";
									$j("#fields").hide();
								}
								else
								{
									result = msg;
								}								 
								$j(this).html(result);							 
							});					 
						}					 
					 });					 
					return false;
				});			
			});
		</script>';
 
                // now we put all of the HTML for the form into a PHP string
		$content .= '<div id="post-a-comment" class="clear">';
			$content .= '<div id="fields">';
				$content .= '<h4>Send A Message</h4>';
				$content .= '<form id="contact-form" action="">';
					$content .= '<input name="to_email" type="hidden" id="to_email" value="' . $email . '"/>';
					$content .= '<p>';
						$content .= '<input name="name" type="text" id="name"/>';
						$content .= '<label class="error" for="name">Name *</label>';
					$content .= '</p>';
					$content .= '<p>';
						$content .= '<input name="email" type="text" id="email"/>';
						$content .= '<label for="email">E-mail address *</label>';
					$content .= '</p>';
					$content .= '<p><textarea rows="" cols="" name="message"></textarea></p>';
					$content .= '<p><input type="submit" value="Submit" class="button" id="contact-submit" /></p>';
				$content .= '</form>';
			$content .= '</div><!--end fields-->';
			$content .= '<div id="note"></div> <!--notification area used by jQuery/Ajax -->';
		$content .= '</div>';
	return $content;
}

The code may look more complicated than it really is, but all that I’ve done is put all of the necessary HTML and jQuery code into a single PHP string that is then returned at the end of the function.

I’m not going to go in depth and explain exactly what the code here does; that is for another tutorial.

For the purposes of this tutorial, we are keeping our form simple and only displaying name, email, and message fields. If you wish to extend the plugin with additional fields, it’s really quite simple. Please leave a comment if you need support.

Next what we need to do is add in the hook that will tie our function to a short code, and make the short code available for use.

1
add_shortcode('contact', 'pippin_shortcode_contact');

If you are unfamiliar with how to create a basic short code, check out my quick tip on creating short codes in plugins.

1
wp_enqueue_script('jquery');

That’s it for our main plugin file.

3 – Creating the Send Mail File

We now have to set up another file that will receive the information posted from our contact form, validate it, and perform the final steps, such as sending the email and displaying error / success messages.

First, create a file called sendmail.php and place it in the main plugin folder.

Next, in order to make use of core WordPress functions, we need to include wp-load.php

1
2
3
4
5
6
7
// allow us to use core wordpress functions
 
// make sure to replace this with the name of the plugin's root folder name
$plugin_name = 'contact_shortcode';
$oldURL = dirname(__FILE__);
$newURL = str_replace(DIRECTORY_SEPARATOR . 'wp-content' . DIRECTORY_SEPARATOR . 'plugins' . DIRECTORY_SEPARATOR . $plugin_name, '', $oldURL);
include($newURL . DIRECTORY_SEPARATOR . 'wp-load.php');

Now we are going to write a function that will check the submitted email to make sure it has a valid format.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function ValidateEmail($email)
{
	/*
	(Name) Letters, Numbers, Dots, Hyphens and Underscores
	(@ sign)
	(Domain) (with possible subdomain(s) ).
	Contains only letters, numbers, dots and hyphens (up to 255 characters)
	(. sign)
	(Extension) Letters only (up to 10 (can be increased in the future) characters)
	*/
 
	$regex = '/([a-z0-9_.-]+)'. # name

	'@'. # at

	'([a-z0-9.-]+){2,255}'. # domain & possibly subdomains

	'.'. # period

	'([a-z]+){2,10}/i'; # domain extension 

	if($email == '') { 
		return false;
	}
	else {
		$eregi = preg_replace($regex, '', $email);
	}
 
	return empty($eregi) ? true : false;
}

And finally, there is just one more piece of code to write. This next bit will detect the information sent from the contact form and store it into the necessary variables, perform email validation, check for empty fields, and then send the email if everything checks out okay.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
$post = (!empty($_POST)) ? true : false;
 
if($post)
{
	$name = stripslashes($_POST['name']);
	$subject = 'Contact Form';
	$email = trim($_POST['email']);
	$to = trim($_POST['to_email']);
	$message = stripslashes($_POST['message']);
	$error = '';
 
	// Check name
 
	if(!$name)
	{
		$error .= 'Please enter your name.<br />';
	}
 
	// Check email
 
	if(!$email)
	{
		$error .= 'Please enter an e-mail address.<br />';
	}
 
	if($email && !ValidateEmail($email))
	{
		$error .= 'Please enter a valid e-mail address.<br />';
	}
 
	// Check message (length)
 
	if(!$message || strlen($message) < 15)
	{
		$error .= "Please enter your message. It should have at least 15 characters.<br />";
	}
 
	if(!$error) // send email
	{
		$mail = wp_mail($to, $subject, $message,
			 'From: '.$name.' <'.$email.'>\r\n'
			.'Reply-To: '.$email.'\r\n'
			.'X-Mailer: PHP/' . phpversion());
 
		if($mail)
		{
			echo 'OK';
		}
 
	}
	else
	{
		echo '<div class="notification_error">'.$error.'</div>'; // set up error div for jQuery/Ajax
	}
 
}

And that’s it! We can now activate our plugin and display the contact form using:

[contact email="youraddress"]

The email parameter is optional. If you leave it blank, the admin email will be used instead.

And our final result looks like this!

Send A Message

If you have any trouble with this code, please ask in the comments below. You can also download the full plugin below.

Download: {title} ({hits})

Enjoy!


Related Items
  • Plugin Development 101 – Intro to Short Codes
Tweet Follow @pippinsplugins
Ajax, contact form, short code

21 comments on “Create an Ajaxified Contact Form Short Code”

  1. Paul says:
    May 11, 2011 at 5:47 pm

    Thanks for this detailed tutorial. Will put it to good use.

    Reply
  2. Clem says:
    May 12, 2011 at 8:43 am

    Thanks for this tutorial and this plugin. But, IMO you should replace your ValidateEmail() function with : filter_var($email, FILTER_VALIDATE_EMAIL) ;)

    Reply
    • pippin says:
      May 12, 2011 at 1:38 pm

      Why is that? I don’t know anything about filter_var

  3. WordPress Community Links: Used to be Flare9 edition | WPCandy says:
    June 6, 2011 at 4:35 am

    [...] Post Types, Custom Taxonomies and working with Custom Post Templates.Pippin Williamson shows us how to create an ajaxified contact form shortcode.And finally we have some cool resources to finish it off:StudioPress released Post Format Icons [...]

    Reply
  4. cgcs says:
    June 7, 2011 at 5:20 am

    Thanks alot for the great code, though I have one question if you can help?

    I wanted to include this in a custom template and instead of having the user activate the plugin is there anyway to hardcode it into the theme so all the user has to do is use the shortcode?

    Reply
    • pippin says:
      June 7, 2011 at 3:07 pm

      @cgcs – you can simply copy and paste the function and then correct the file paths so that they point to the files in your theme folder.

  5. cgcs says:
    June 7, 2011 at 7:16 pm

    Hi again, I just wanted to say thanks it worked. This code really came in like a dark horse at a time when I really needed it. I must’ve spent 5 days trying to create a contact form shortcode and nothing worked but this. Beautiful code and many many thanks for posting this tutorial.

    Reply
    • pippin says:
      June 8, 2011 at 3:47 am

      @cgcs – you are welcome :)

  6. cgcs says:
    June 10, 2011 at 10:28 am

    Hi again,

    If the PLUGIN_PATH is set to WP_PLUGIN_DIR and the PLUGIN_URL is set to WP_PLUGIN_URL what do I change those to so it reads my template path directories instead? Any help would be highly appreciated.

    Reply
    • pippin says:
      June 14, 2011 at 1:57 am

      You can use get_bloginfo(‘template_directory’) or get_bloginfo(‘stylesheet_directory’)

  7. cgcs says:
    June 15, 2011 at 6:44 pm

    Thanks again pippin. That worked. Although I have been mucking around in WordPress for nearly a year it’s little things like this that always trip me up. I have alot to learn about plugins. Really appreciate the help.

    Reply
    • pippin says:
      June 15, 2011 at 6:56 pm

      Always glad to help.

  8. Post Data with Ajax in WordPress Pugins | Pippin's Plugins says:
    September 21, 2011 at 10:22 am

    [...] in sendmail.php necessary for the actually processing of the form, but that is all covered in my Ajaxified Contact Form tutorial. Tweet Follow [...]

    Reply
  9. Kel says:
    February 16, 2012 at 4:24 pm

    I noticed that the using the shortcode in content, it is always above the other content on the page. Do you know of a way to fix this?

    Reply
    • Pippin says:
      February 18, 2012 at 12:29 pm

      Hmm, it shouldn’t. Look in the plugin code and see if the final line of the short code function is echoing $content, or returning it. It needs to return $content.

  10. Merkados says:
    April 23, 2012 at 3:56 pm

    First of all, great tutorial. Thank you for taking the time to put it together. I wanted to take a second to advice you of a vulnerability that would be introduced by the use of the code as you have it. When you are setting the “to_email” as a hidden form item, it can be exploited and used to send email from your server to any address. Since I saw that you took good care in sanitizing the rest of the code, I thought I would tell you.
    Thank you

    Alex Centeno.

    Reply
    • Pippin says:
      April 23, 2012 at 5:19 pm

      Ah yes, good call. Thanks for pointing it out.

  11. tammyhart says:
    September 1, 2012 at 1:58 am

    Hey Pippin,

    I probably shouldn’t be reading tutorials at 2 am after a long week of work, but does the last block of code where wp_mail() resides go inside pippin_shortcode_contact()?

    Reply
  12. tammyhart says:
    September 1, 2012 at 6:27 pm

    Nevermind. Now that I’ve had some sleep, I see it. :) This works great, thanks!

    Reply
    • Pippin says:
      September 1, 2012 at 9:42 pm

      No problem, glad it’s working for you :)

  13. Mahabub says:
    September 10, 2012 at 1:45 am

    thanks for share this contact from coding

    Reply

Leave a Reply Cancel reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Login

Lost your password?

Please enter your username or e-mail address. You will receive a new password via e-mail.

  • Facebook Become a Fan Like

  • Twitter Subscribe on Twitter Follow

  • YouTube Follow my Videos Subscribe

  • RSS Feed Subscribe with RSS Subscribe

Easy Digital Downloads

Most Loved

  • Love It Pro for WordPress
  • Write a “Love It” Plugin with Ajax to Let Users Love Their Favorite Posts / Pages
  • Simple Notices Pro Plugin for WordPress
  • User Bookmarks for WordPress
  • Front End Registration and Login Forms Plugin

Similar Plugins and Posts

  • Simple Google Maps Short Code
  • Using Ajax in Your Plugin and WordPress Admin
  • Create a Live Search in WordPress with jQuery and Ajax
  • Stripe Integration Part 3 – Variable Prices and Enhanced Plan Handling
  • WordPress Rewrite API – Part 3

Latest Premium Content

  • Plugin Development 101 – Introduction to Adding Dashboard Menus
  • Plugin Development 101 – Intro to Loading Scripts and Styles
  • User Follow System – Part 5
  • Plugin Development 101 – Intro to Short Codes
  • Plugin Development 101 – Registering a Custom Post Type
  • Plugin Development 101 – Intro to Actions

Latest Tutorials

  • Submitting Your First Pull Request to a WordPress Plugin on Github (1)

    Github is an extremely popular tool for managing WordPress plugins, and one...

  • Plugin Development 101 – Introduction to Adding Dashboard Menus (1)

    Adding new menus, both top level and sub level, to the WordPress Dashboard is a really common task for plugins...

  • Plugin Development 101 – Intro to Loading Scripts and Styles (16)

    In this part of Plugin...

Enter your email to receive automated updates when new posts are published

Latest Tweets

  • Not your typical multimillionaire - love this http://t.co/f774YCUt2s
    May 20, 2013
  • RT @photomatt: On Yahoo-Tumblr http://t.co/BRYNZSGFnx
    May 20, 2013
  • @owlses Love your new EDD ebook theme. We just added it to the site: https://t.co/8RMkReFq6K
    May 20, 2013

Topics

Sugar Event Calendar the_content Rémi Corson get_user_meta wp_enqueue_script add_options_page attachments contextual help register_setting meta box featured add_shortcode hook login forms authors short codes attachment Related posts plugin do_action mail chimp image recent posts comments apply_filters post types bbpress short code taxonomies custom post type gallery Ajax images Stripe taxonomy jquery widgets users add_filter add_action easy content types widget restrict content pro easy digital downloads

Weekly Newsletter

Useful Links

  • Join the Site
  • Plugin Store
  • Affiliate Area
  • Tag Index
  • Support the Site
  • Suggest a Tutorial
  • Random Post
  • Contact

Monthly Archives

(c) 2011 Pippin's Plugins