Making an Ajax newsletter sign-up box in laravel

One way to have users added to our e-mail list is to have them sign-up through our website.
In this recipe, we’ll be using MailChimp’s API and a modal window to show a sign-up form and
have it sent through an Ajax call.

Getting ready

For this recipe, we’ll need a standard Laravel installation. We’ll also be using the MailChimp API
for the newsletter; a free account and API key can be created at www.mailchimp.com.

How to do it…

To complete this recipe, follow the given steps:
1. Open the composer.json file and update the require section to resemble the
following code:
“require”: {
“laravel/framework”: “4.0.*”,
“rezzza/mailchimp”: “dev-master”
}
2. In the command-line window, where the artisan file is located, update Composer with
the following command:
php composer.phar update

3. In the app/config directory, create a file named mailchimp.php:
<?php
return array(
‘key’ => ‘12345abcde-us1’,
‘list’ => ‘123456789’
);
4. In the views directory, create a file named signup.php:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Newsletter Signup</title>
<link href=”//netdna.bootstrapcdn.com/twitterbootstrap/
2.2.2/css/bootstrap-combined.min.css”
rel=”stylesheet”>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/
1.9.0/jquery.min.js”></script>
<script src=”//netdna.bootstrapcdn.com/twitterbootstrap/
2.2.2/js/bootstrap.min.js”></script>
</head>
<body>
<p>
<a href=”#signupModal” role=”button” class=”btn btn-info”
data-toggle=”modal”>Newsletter Signup</a>
</p>
<div id=”results”></div>
<div id=”signupModal” class=”modal hide fade”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal”
aria-hidden=”true”>&times;</button>
<h3>Sign-up for our awesome newsletter!</h3>

</div>
<div class=”modal-body”>
<p>
<form id=”newsletter_form”>
<label>Your First Name</label>
<input name=”fname”><br>
<label>Last Name</label>
<input name=”lname”><br>
<label>Email</label>
<input name=”email”>
</form>
</p>
</div>
<div class=”modal-footer”>

<a href=”#” class=”btn close” datadismiss=”
modal”>Close</a>
<a href=”#” class=”btn btn-primary”
id=”newsletter_submit”>Signup</a>
</div>
</div>
<script>
$(function(){
$(“#newsletter_submit”).on(‘click’, function(e){
e.preventDefault();
$(“#results”).html(“loading…”);
$.post(‘signup-submit’,
$(“#newsletter_form”).serialize(),
function(data){
$(‘#signupModal’).modal(‘hide’);
$(“#results”).html(data);
});
});
});
</script>
</body>
</html>

5. In the routes.php file, add the routes we need with the following code:
Route::get(‘signup’, function()
{
return View::make(‘signup’);
});
Route::post(‘signup-submit’, function()
{
$mc = new MCAPI(Config::get(‘mailchimp.key’));
$response = $mc->listSubscribe(
‘{list_id}’,
Input::get(’email’),
array(
‘FNAME’ => Input::get(‘fname’),
‘LNAME’ => Input::get(‘lname’)
)
);
if ($mc->errorCode){
return ‘There was an error: ‘ . $mc->errorMessage;
} else {
return ‘You have been subscribed!’;
}
});

How it works…

We start by installing the MailChimp package into our application using a composer version of
the MailChimp SDK. We then need to create a configuration file to hold our API key and the list
ID we want to use.
Our sign-up page will utilize jQuery and Bootstrap for our processing and display. Since we
only want to display the form when the user wants to sign-up, we have a single button that,
when clicked on, will display a modal window with our form. The form will take out first name,
last name, and e-mail address.
When the sign-up form is submitted, we serialize the data and send it to our signup-submit
route. Once we get a response, we hide the modal and display the results on our page.
In our signup-submit route, we attempt to subscribe the user with the information entered.
If we get a response, we check if the response includes an error. If there is an error, we display
that to the user, and if not, we show our success message.

 

Leave a Reply

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