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

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:
return array(
‘key’ => ‘12345abcde-us1’,
‘list’ => ‘123456789’
4. In the views directory, create a file named signup.php:
<!doctype html>
<html lang=”en”>
<meta charset=”utf-8″>
<title>Newsletter Signup</title>
<link href=”//
<script src=”//
<script src=”//
<a href=”#signupModal” role=”button” class=”btn btn-info”
data-toggle=”modal”>Newsletter Signup</a>
<div id=”results”></div>
<div id=”signupModal” class=”modal hide fade”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal”
<h3>Sign-up for our awesome newsletter!</h3>

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

<a href=”#” class=”btn close” datadismiss=”
<a href=”#” class=”btn btn-primary”
$(“#newsletter_submit”).on(‘click’, function(e){

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(
‘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 *