Adding a user signup form to your website pricing and signup page

Oempro is the #1 solution to build your email marketing service. It provides all features you will need to build and run a successful local (or global) email marketing service for your clients.

In this article, we will explain how to build a pricing page with multiple plans on your website which is linked to Oempro.

Before diving into technical details and instructions, let’s examine some industry leading ESP pricing pages:

Sendloop’s pricing page

Sendloop's Pricing Page

CampaignMonitor’s pricing page
CampaignMonitor's Pricing Page

MadMimi’s pricing page

MadMimi's Pricing Page

Aweber’s pricing page

Aweber's Pricing Page

Building your own pricing and signup page

As it can be seen from examples displayed above, there’re two pricing and user signup models:

Model #1: Trial / Freemium plan signup
Listing plans and call to action button to signup for a trial (or freemium) plan

Model #2: Plan selection and signup to paid plan
Listing plans and signup button for each plan

The common (and more popular) approach is to try getting users to your user onboarding funnel via trial or freemium plan. In these days, nobody wants to enter their credit card before trying the service. Therefore, we believe that asking for a credit card before allowing your potential customer try out your service is meaningless.

In this blog post, we will explain how to create a pricing and signup page listing multiple plans and asking users to signup for a trial/freemium plan.

Getting started

We will assume that we have 3 monthly plans available:

Plan #1:
Up to 500 subscribers
Up to 2000 email delivery per month
Price: Free

Plan #2:
Up to 2500 subscribers
Up to 10,000 email delivery per month
Price: $25 per month

Plan #3:
Up to 5000 subscribers
Up to 20,000 email delivery per month
Price: $50 per month

Pricing page with trial / freemium plan signup

In this model, in addition to three monthly plans listed above, we will have 7 day trial plan which will be the default signup option. After the 7 days, user will be asked to upgrade her account and the account will be suspended if the upgrade doesn’t occur.

Tools required:

  • Oempro
    We will assume that your Oempro has been installed on http://mydomain.com/oempro/
  • Pricing page
    We will use a basic HTML page designed for pricing. You can replace this with a page on your own website with your own layout.
  • Custom PHP script which will link pricing page to Oempro’s API
    Copy and download links available at the end of this post
 Step 1: Setting up user groups for each pricing plan in Oempro

Login to your Oempro administrator area. Then go to Settings > User Groups section. If this is the first time you are visiting this area, you will see only “Default User Group” entry.  Click “Create user group” link:

001

On the new user group page, you will be asked to define the new user group preferences such as name of the group, forced list specs, user limits, privileges. You can define your user group specs based on your needs, but for this scenario, please set the following values to corresponding user group options:

Under “Limits” tab;

  • Subscribers
    Enter “500″ for plan #1
    Enter “2500″ for plan #2
    Enter “5000″ for plan #3
  • Emails
    Enter “2000″ for plan #1
    Enter “10000″ for plan #2
    Enter “20000″ for plan #3

Under “Payment Settings” tab;

  • Select “is enabled” for Payment System option for all plan user groups
  • Service Fee
    Enter “0″ for plan #1
    Enter “25″ for plan #2
    Enter “50″ for plan #3

At the end, you will have created three user groups as shown below:

Once you created three user groups for your monthly plans, you will have a similar screen:

Screen Shot 2014-01-02 at 17.36.16

Okay, you have setup your Oempro for your monthly plans. Now, it’s time to start building your plans and pricing page on your website.

Step 2: Building your pricing and signup page

To save your time and to keep this post short, we will use a very simple pricing page HTML here. Here’s how it looks like:

Screen Shot 2014-01-02 at 18.20.32

And this is the PHP & HTML code of the pricing page:

<?php
// Configuration - Start
$Config = array(
	'OemproURL' => '', // no trailing slash at the end. Example: http://mydomain.com/oempro
	'AdminUsername' => '',
	'AdminPassword' => '',
	'TargetPlanID' => 2, // Enter the ID of the target user group ID
	'FromName' => 'MyESP',
	'FromEmail' => 'hello@myesp.com',
);
// Configuration - End

$PageMessage = '';

Signup();

function Signup()
{
	global $PageMessage;

	if (isset($_POST['Command']) == false || $_POST['Command'] != 'Signup')
	{
		return;
	}

	if (VerifyInputData() == false)
	{
		return false;
	}

	print 'ok';
}

function VerifyInputData()
{
	global $PageMessage;

	if (isset($_POST['Name']) == false || $_POST['Name'] == '' || isset($_POST['Email']) == false || $_POST['Email'] == '' || filter_var($_POST['Email'], FILTER_VALIDATE_EMAIL) == false)
	{
		$PageMessage = 'Please check and be sure that you have entered your name and email address properly';
		return false;
	}

	global $Config;

	$Parameters = array(
		'Command=Admin.Login',
		'ResponseFormat=JSON',
		'Username=' . $Config['AdminUsername'],
		'Password=' . $Config['AdminPassword'],
		'DisableCaptcha=true'
	);
	$Response = DataPostToRemoteURL($Config['OemproURL'] . '/api.php', $Parameters, 'POST', false, '', '', 30, false);

	if ($Response[0] != true)
	{
		$PageMessage = 'Internal error occurred. Failed to connect to system #1';
		return false;
	}

	$Response = json_decode($Response[1]);

	if (isset($Response->SessionID) == false || $Response->SessionID == '')
	{
		$PageMessage = 'Internal error occurred. Failed to connect to system #2';
		return false;
	}

	$AdminSessionID = $Response->SessionID;

	$RandomPassword = GenerateRandomString(5);

	$Parameters = array(
		'Command=User.Create',
		'ResponseFormat=JSON',
		'SessionID=' . $AdminSessionID,
		'RelUserGroupID=' . $Config['TargetPlanID'],
		'EmailAddress=' . $_POST['Email'],
		'Username=' . $_POST['Email'],
		'Password=' . $RandomPassword,
		'FirstName=' . $_POST['Name'],
		'LastName= ',
		'TimeZone=(GMT) London',
		'Language=en',
		'ReputationLevel=Untrusted',
		'CompanyName=',
		'Website=',
		'Street=',
		'City=',
		'State=',
		'Zip=',
		'Country=',
		'Phone=',
		'Fax=',
		'PreviewMyEmailAccount=',
		'PreviewMyEmailAPIKey=',
		'AvailableCredits=0',
	);
	$Response = DataPostToRemoteURL($Config['OemproURL'] . '/api.php', $Parameters, 'POST', false, '', '', 30, false);

	if ($Response[0] == false)
	{
		$PageMessage = 'Internal error occurred. Failed to connect to system #3';
		return false;
	}

	$Response = json_decode($Response[1]);

	if ($Response->Success == false && ($Response->ErrorCode == 12 || $Response->ErrorCode == 13))
	{
		$PageMessage = 'Entered email address has been already registered';
		return false;
	}
	elseif ($Response->Success == false)
	{
		$PageMessage = 'Internal error occurred. Error code is ' . $Response->ErrorCode;
		return false;
	}

	$EmailBody = <<<EOF
Hi {$_POST['Name']}!

Thanks for creating an account on MyESP. Below, you can find your login information:

URL: {$Config['OemproURL']}/app/index.php?/user/
Username: {$_POST['Email']}
Password: {$RandomPassword}

Login to your account, import your contacts and send your first email within minutes.

Any questions, let us know.

Cheers,
MyESP Team
EOF;

	mail($_POST['Email'], 'Your login information', $EmailBody, 'From: "' . $Config['FromName'] . '" <' . $Config['FromEmail'] . '>');

	header('Location: ' . $Config['OemproURL'] . '/app/index.php?/user/');
	exit;
}

function GenerateRandomString($CharLength = 7)
{
	$Characters = '123456789abcdefghijklmnopqrstuvwxyz';
	$CharactersLength = strlen($Characters);
	$TMPCounter = 0;
	$RandomString = '';
	while ($TMPCounter < ($CharLength - 2))
	{
		$RandomCharacter = mt_rand(1, $CharactersLength - 1);
		$RandomString .= $Characters[$RandomCharacter];
		$TMPCounter++;
	}

	$RandomString .= dechex(rand(10, 99) . rand(10, 99));

	return $RandomString;
}

function DataPostToRemoteURL($URL, $ArrayPostParameters, $HTTPRequestType = 'POST', $HTTPAuth = false, $HTTPAuthUsername = '', $HTTPAuthPassword = '', $ConnectTimeOutSeconds = 60, $ReturnHeaders = false)
{
	$PostParameters = implode('&', $ArrayPostParameters);

	$CurlHandler = curl_init();
	curl_setopt($CurlHandler, CURLOPT_URL, $URL);

	if ($HTTPRequestType == 'GET')
	{
		curl_setopt($CurlHandler, CURLOPT_HTTPGET, true);
	}
	elseif ($HTTPRequestType == 'PUT')
	{
		curl_setopt($CurlHandler, CURLOPT_PUT, true);
	}
	elseif ($HTTPRequestType == 'DELETE')
	{
		curl_setopt($CurlHandler, CURLOPT_CUSTOMREQUEST, 'DELETE');
		curl_setopt($CurlHandler, CURLOPT_POST, true);
		curl_setopt($CurlHandler, CURLOPT_POSTFIELDS, $PostParameters);
	}
	else
	{
		curl_setopt($CurlHandler, CURLOPT_POST, true);
		curl_setopt($CurlHandler, CURLOPT_POSTFIELDS, $PostParameters);
	}

	curl_setopt($CurlHandler, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($CurlHandler, CURLOPT_CONNECTTIMEOUT, $ConnectTimeOutSeconds);
	curl_setopt($CurlHandler, CURLOPT_TIMEOUT, $ConnectTimeOutSeconds);
	curl_setopt($CurlHandler, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3');
	curl_setopt($CurlHandler, CURLOPT_SSL_VERIFYPEER, false);

	// The option doesn't work with safe mode or when open_basedir is set.
	if ((ini_get('safe_mode') != false) && (ini_get('open_basedir') != false))
	{
		curl_setopt($CurlHandler, CURLOPT_FOLLOWLOCATION, true);
	}

	if ($ReturnHeaders == true)
	{
		curl_setopt($CurlHandler, CURLOPT_HEADER, true);
	}
	else
	{
		curl_setopt($CurlHandler, CURLOPT_HEADER, false);
	}

	if ($HTTPAuth == true)
	{
		curl_setopt($CurlHandler, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
		curl_setopt($CurlHandler, CURLOPT_USERPWD, $HTTPAuthUsername . ':' . $HTTPAuthPassword);
	}

	$RemoteContent = curl_exec($CurlHandler);

	if (curl_error($CurlHandler) != '')
	{
		return array(false, curl_error($CurlHandler));
	}

	curl_close($CurlHandler);

	return array(true, $RemoteContent);
}

?>
<!DOCTYPE html>
<html>
<head>
	<title>Pricing - MyESP</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	<script src="https://code.jquery.com/jquery.js"></script>
	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

	<style type="text/css" media="screen">
		.pricing-container {

		}

		.pricing-container ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.pricing-container ul li {
			margin-bottom: 5px;
			padding-bottom: 5px;
			border-bottom: 1px #ccc dotted;
		}

		li.pricing {
			border-bottom: none !important;
			margin-top: 20px;
			font-weight: bold;
			font-size: 26px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-12" style="text-align:center;">
			<h1>MyESP</h1>

			<p class="lead">Plans and Pricing</p>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="row pricing-container">
				<div class="col-md-2 well col-md-offset-3" style="text-align:center; margin-top:20px; min-height:250px;">
					<p style="font-size:1.3em; font-weight:bold;">Forever Free</p>
					<ul>
						<li>Store up to<br>500 subscribers</li>
						<li>Send up to<br>2000 emails<br>every month</li>
						<li class="pricing">Free!</li>
					</ul>
				</div>
				<div class="col-md-2 well" style="text-align:center; min-height:280px;">
					<p style="font-size:1.3em; font-weight:bold;">Bronze Plan</p>
					<ul>
						<li>Store up to 2500 subscribers</li>
						<li>Send up to 10,000 emails every month</li>
						<li class="pricing">$25<span style="font-weight:normal;font-size:.8em;">/m</span></li>
					</ul>
				</div>
				<div class="col-md-2 well" style="text-align:center; margin-top:20px; min-height:250px;">
					<p style="font-size:1.3em; font-weight:bold;">Gold Plan</p>
					<ul>
						<li>Store up to<br>5000 subscribers</li>
						<li>Send up to<br>20,000 emails<br>every month</li>
						<li class="pricing">$50<span style="font-weight:normal; font-size:.8em;">/m</span></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-4 col-md-offset-4" style="text-align:center;">
			<?php if (isset($PageMessage) == true && $PageMessage != ''): ?>
				<div class="alert alert-danger"><?php print($PageMessage); ?></div><?php endif; ?>
			<h3>Sign up now</h3>

			<p>Sign up in seconds... No credit card required...</p>

			<form role="form" method="post" action="plans.php">
				<div class="form-group">
					<input type="text" class="form-control input-lg" id="Name" name="Name" placeholder="How should we call you?" required="required" value="<?php print(isset($_POST['Name']) == true && $_POST['Name'] != '' ? $_POST['Name'] : ''); ?>">
				</div>
				<div class="form-group">
					<input type="email" class="form-control input-lg" id="Email" name="Email" placeholder="your@email.com" required="required" value="<?php print(isset($_POST['Email']) == true && $_POST['Email'] != '' ? $_POST['Email'] : ''); ?>">
				</div>
				<button type="submit" class="btn btn-success btn-lg" name="Command" value="Signup">Create my account</button>
			</form>
		</div>
	</div>
</div>
<div class="container" style="min-height:100px;">

</div>
</body>
</html>

To copy the source code, simply double click above. To download it, click here.

This is a basic demonstration of what you can do with Oempro’s API and how limitless you are.

If you have any questions, just let us know in comments below.

Have a nice weekend everyone.

 

 

2 thoughts on “Adding a user signup form to your website pricing and signup page

Leave a Reply to JP 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> <pre class="">