How to Build an Autoresponder – the Opt-in Form

I wrote last week about how I decided a while back to see if I could build my own opt-in email autoresponder system as a WordPress plugin. The first part that I chose to figure out was the double opt-in component, which I will describe here.

Before I get into that, I want to point out some potential limitations of building an email autoresponder into a WordPress plugin. I don’t think the actual opt-in process will be that significant because it is only handling traffic that is already on the website. It just involves sending an extra email message and and an extra page load as the visitor completes the double opt-in.

All of the opt-in data and scheduled emails will be stored in the WordPress database. This could become a performance issue as you add thousands (hopefully) of new contacts to the database.

Having WordPress handle sending broadcast emails to those thousands of subscribers will be a bigger issue. First is the actual processing load from sending thousands of emails. The second issue is the actual logistics of sending thousands of emails. Most personal email accounts limit the number of emails that can be sent in a period of time to discourage spamming.

This solution should work for a small list of up to a few hundred subscribers as long as there is a mechanism in place to space out the emails so that they are sent over a few hours, or possibly through a bulk email service. I haven’t looked into that yet.

As I said last time, my goal with this project is to learn about how email autoresponders work so that I can make the best use of one when I go back to an established service like Aweber or MailChimp.

One More Thing Before We Get Started

It isn’t my intent here to teach you how to write PHP code (the programming language that all of the WordPress scripts are written in) or all of the inner workings of WordPress. I more want to point you in the right direction to learn more if you want to.

The Opt-in System

Ok, on to the opt-in system. First, let’s take a look at the sequence of events that have to happen to get a subscriber completely opted in so that they can receive emails from us.

1. Display a form on the page to capture the subscribers info
2. Receive the form submission
3. Validate the data, prevent multiple opt-ins
4. Display a thank you page or error page as appropriate
5. Send a confirmation email with a link for the subscriber to confirm the opt-in
6. Process the subscriber clicking on the link from the confirmation email
7. Display another thank you page once the subscriber is completely in

Display the Opt-in Form

For the actual form, I cheated. I copied the HTML and CSS from an old Aweber form that I had in the past and embedded it as a short code in my new plugin. I am more than happy to let someone else handle all of the intricacies of writing the CSS.

If you have used WordPress for awhile then you probably already know what a short code is. Just in case you don’t, I’ll explain it very briefly. A short code allows you to embed some piece of functionality into your post. For example, boxes like the one below for tweeting a message to Twitter have become popular.

A short code is written between square brackets and starts with the name of the short code followed by any attributes that it supports. You can see the entire short code that created the tweet box here:

[bctt tweet="Have you read about this crazy guy who is writing his own email autoresponder?"]

This particular short code is named bctt and takes one attribute, tweet, which provides the message that you want your visitors to tweet. This short code is provided by the Better Click to Tweet plugin by Ben Meredith.

A short code seemed the easiest way to be able to display my opt-in form within my content, and writing a short code isn’t too hard.

The Pieces of a Short Code

The first part of creating a short code is the PHP function that will process the parameters and generate the content that will display in the finished post in place of the short code. The second piece is to inform WordPress about the short code so that it knows to call your function when it sees that short code in a post.

In this case, I designed my short code to look like this:

[[ywoptin campaign=’test’/]]

I named the short code ywoptin and it takes one attribute called campaign which specifies the name of the list campaign that the opt-in form is for, in this case it is my “test” campaign.

The PHP function declaration looks like this:

function ywoptin_shortcode( $atts, $content = null )

The name of the PHP function here is ywoptin_shortcode and WordPress requires short code functions to take two parameters: $atts is an array containing the attributes (campaign and its value, test) and $content is all of the content that is between the open and close tags for the short code. I don’t have any with my short code, so I set it to null.

If my short looked like this: [[ywoptin]do ray mi fa so la ti do[/ywoptin]] then $content would contain “do ray mi fa so la ti do.”

The function just contains the HTML to display the opt-in form and sets the campaign name as a hidden input field in the form. The final HTML is then returned to WordPress.

We now have to let WordPress know that when it sees a short code called ywoptin, it should call the ywoptin_shortcode function to handle it. We do this by calling the add_shortcode function, which is defined by WordPress. It looks like this:

add_shortcode(‘ywoptin’, ‘ywoptin_shortcode’);

It’s pretty self-explanatory. The first parameter is the name of the short code and the second parameter is the name of the function to be called.

Here’s what the opt-in form looks like so far. It will successfully add you to a list that I will use to notify you the next time I write a post in this series.

[ywoptin campaign=’autoresponder’/]

Next Time

That is enough to get the opt-in form to display. That was the easy part. We still have to do something with it once the subscriber clicks the button after they enter their name and email address. I struggled for awhile to figure out how to do that from a post or a page. I will go into that next time. I intend for that to be up next Thursday night or Friday morning.

If you missed the first part in this series, please read about why I’m taking on this project.

I would love to hear any thoughts you have on this little project of mine, even if it is just to call me crazy. Leave me a comment below, and I always appreciate it when you share my posts to your followers on social media.