PHP Tutorial: A n00b’s Guide To Making A Signup Form with PHP and WordPress

I made a beta signup form and all I got was this Muppet!

I made a beta signup form and all I got was this Muppet!

I hosted a beta test for my latest app, Battle Map for iPad, and recently wrote an article with knowledge I learned along the way.

But there’s one thing I didn’t cover in that article – how to implement the actual beta signup form!

If you are a web developer, this should be a trivial matter for you, but if you’re new to web development as I am there’s a bit of a learning curve in this.

So in this post, I will cover how I implemented the beta signup form for my latest app. You may find this PHP tutorial useful if you need to create a similar beta signup form, or if you’re interested in learning about writing WordPress plugins or PHP in general.

Caveat: This guide is good if you want to learn how to make a signup form yourself or have your own database on your web site, but if you don’t care about all that and want to just get something working ASAP, Jindrich from the comments section recommends using Google Docs forms, which looks like a quick & easy way to go!

This PHP tutorial assumes some basic familiarity with PHP and SQL. If you are not familiar with PHP, this tutorial from php.net is a good start, and if you’re not familiar with SQL, check out this MySQL tutorial.

Which Technology To Use?

There are tons of possible ways to implement the back end for beta signup form. The first question is one of language – maybe Ruby, Java, Python, C#, or PHP?

In my case, I chose PHP mainly because that’s what I’m learning at the moment and already had set up on my web server. There are a ton of frameworks on top of PHP that probably would have been useful for this, such as CodeIgniter or CakePHP, but I opted to go with straight PHP to learn the basics first.

Since my site uses the WordPress software which allows you to create plugins, I also decided to make the beta signup form a WordPress plugin, again mainly as a learning experience. I didn’t go all the way with a configuration menu and everything, but I learned some basics about WordPress plugin development along the way.

Also, there very well may be some kind of existing plugin for beta signup forms. I wouldn’t be surprised as there’s a plugin for almost everything else under the sun. But I still wanted to make it myself as a learning exercise and for ultimate control! :]

Ok so a PHP backend implemented as a WordPress plugin – check! Let’s get started!

WordPress and Shortcodes

Ok as we all know, the best way to get started with something unfamiliar is by just getting the damn thing to print “Hello, World!” So let’s start with that.

But before we get started, a bit of background on a feature of WordPress called “shortcodes”. If you’ve used WordPress much, you’ve probably downloaded some plugins that require you to insert a special code in your page where you want something to show up.

For example, I use Yoast’s Enhanced WordPress contact form, so to use it my Contact page contains the code [wpcf] where I want the contact form to appear.

So for this Hello World plugin, let’s do the same thing. The goal is we put a code like [my-beta-signup] somewhere in a WordPress page, and it should print out “Hello, World!”

We can do this with the Shortcode API provided by Wordpres. All we have to do is write a function that returns the string “Hello, World!”, then register it with the following call:

add_shortcode('my-beta-signup', 'my-beta-signup-handler');

Except I wanted to make things a little more complicated and call a method in a class rather than a plain functoin. Luckily, PHP provides a built-in way to handle this!

Instead of using the string ‘my-beta-signup-handler’, we can provide an array with the first parameter being the object, and the second parameter being the name of the method to call on the object, like the following:

add_shortcode('my-beta-signup', array($myBetaSignup, 'showSignupForm'));

Ok, enough talk, let’s put this together!

Hello, WordPress Plugin!

Create a new directory called my-beta-signup in your WordPress plugins directory, and inside that new directory create a file named my-beta-signup.php. Add the following to the file:

<?php
/*
Plugin Name: My Beta Signup
Plugin URI: http://www.raywenderlich.com
Description: A plugin to allow signing up for beta testing my awesome app.
Version: 1.0
Author: Ray Wenderlich
Author URI: http://www.raywenderlich.com
License: MIT
*/

class MyBetaSignup {

	function showSignupForm($atts) {
		return "Hello, World!";
	}

}

$myBetaSignup = new MyBetaSignup();

add_shortcode('my-beta-signup', array($myBetaSignup, 'showSignupForm'));

?>

At the beginning, we have to include a standard plugin information header clause. The info in this section is used by WordPress so it can detect your plugin and show it up in your list of plugins, and is also useful if you ever plan on submittting your plugin to the WordPress Plugin Directory.

It’s all pretty simple stuff though – you can just replace the above with your own URL/name.

Next, we create a class that will contain the methods we’ll be implementing in the rest of this PHP tutorial called MyBetaSignup. For now it just has a single method called showSignupForm, that actually doesn’t show a form at all – it just returns Hello, World! It’s so hard to get help around here these days.

Finally, we create a instance of our class, and use the add_shortcode method to register the callback for our shortcode as we discussed above.

That’s it! Save the file, then go to the admin section of your blog and you should see the new plugin listed:

Click activate and your shortcode is ready to use. You can then test it by creating a new test page in WordPress and adding your shortcode somewhere on the page:

Then check out your new page, and if all goes well you should see the Hello, World output!