mailchimp Archives - Michael Sunarlim https://sunarlim.com/tag/mailchimp/ Random blurbs about web development, e-commerce and technology Fri, 19 Mar 2021 20:03:49 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.5 https://i0.wp.com/sunarlim.com/wp-content/uploads/2016/07/cropped-MS_Square_512x512.png?fit=32%2C32&ssl=1 mailchimp Archives - Michael Sunarlim https://sunarlim.com/tag/mailchimp/ 32 32 30613895 MailChimp Subscribe Form with PHP, jQuery and AJAX (API 3.0) https://sunarlim.com/2017/01/mailchimp-subscribe-form-php-jquery-api3/ https://sunarlim.com/2017/01/mailchimp-subscribe-form-php-jquery-api3/#comments Mon, 09 Jan 2017 06:48:18 +0000 https://sunarlim.com/?p=2591 By popular demand, I updated my code and posted it as new GitHub repository that utilizes newer MailChimp API 3.0. Please read the tutorial below to create AJAX based MailChimp subscribe form on your PHP website with a little jQuery knowledge. Original post using (older and no longer supported) MailChimp API 1.0 can be found here. What... Continue reading →

The post MailChimp Subscribe Form with PHP, jQuery and AJAX (API 3.0) appeared first on Michael Sunarlim.

]]> By popular demand, I updated my code and posted it as new GitHub repository that utilizes newer MailChimp API 3.0. Please read the tutorial below to create AJAX based MailChimp subscribe form on your PHP website with a little jQuery knowledge.

Original post using (older and no longer supported) MailChimp API 1.0 can be found here.

What this code does

  • Validate field contents
  • Pass the form submission to MailChimp and add the record to your list
  • Basic fallback method for very, very old browser or does not have JavaScript activated
  • Very customizable and easily expandable, depending on your requirements
  • jQuery and jQuery Validation plugin called from CDNJS to keep number of files to maintain at minimal

Tools/Credits

  1. jQuery
  2. jQuery Validation Plugin
  3. MailChimp API v3 PHP Wrapper

MailChimp API Key and List ID

Below we start, we need to generate public API key from your MailChimp account and also identify your list ID. If you are not sure how to retrieve those, follow these links from MailChimp Knowledge Base to retrieve your account’s API key and find your list ID.

The Form Page (index.php)

jQuery will handle the AJAX using $.post  method and jQuery Validation plugin will validate the field values including email address format.

For this example, I am including first name and last name as part of the form fields. Feel free to make adjustments as required. Although keep in mind after changing the form fields, you may also need to adjust the subscribe.php  file too.

<html>
<head>
  <title>MailChimp (API v3) Sign-Up Form</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      // jQuery Validation
      $("#signup").validate({
        // if valid, post data via AJAX
        submitHandler: function(form) {
          $.post("subscribe.php", { fname: $("#fname").val(), lname: $("#lname").val(), email: $("#email").val() }, function(data) {
            $('#response').html(data);
          });
        },
        // all fields are required
        rules: {
          fname: {
            required: true
          },
          lname: {
            required: true
          },
          email: {
            required: true,
            email: true
          }
        }
      });
    });
  </script>
</head>

<body>
  <div id="wrapper">
    <form id="signup" class="formee" action="subscribe.php" method="post">
      <fieldset>
        <legend>Sign Up</legend>
        <div>
          <label for="fname">First Name *</label> <input name="fname" id="fname" type="text" />
        </div>
        <div>
          <label for="lname">Last Name *</label> <input name="lname" id="lname" type="text" />
        </div>
        <div>
          <label for="email">Email Address *</label> <input name="email" id="email" type="text" />
        </div>
        <div>
          <input class="right inputnew" type="submit" title="Send" value="Send" />
        </div>
      </fieldset>
    </form>
    <div id="response"></div>
  </div>
</body>
</html>

Form Processor (subscribe.php)

I try to include as much comment as possible to make the code self explanatory.

<?php

  // Put your MailChimp API and List ID hehe
  $api_key = 'ENTER_YOUR_API_KEY_HERE';
  $list_id = 'ENTER_YOUR_LIST_ID_HERE';

  // Let's start by including the MailChimp API wrapper
  include('./inc/MailChimp.php');
  // Then call/use the class
  use \DrewM\MailChimp\MailChimp;
  $MailChimp = new MailChimp($api_key);

  // Submit subscriber data to MailChimp
  // For parameters doc, refer to: http://developer.mailchimp.com/documentation/mailchimp/reference/lists/members/
  // For wrapper's doc, visit: https://github.com/drewm/mailchimp-api
  $result = $MailChimp->post("lists/$list_id/members", [
              'email_address' => $_POST["email"],
              'merge_fields'  => ['FNAME'=>$_POST["fname"], 'LNAME'=>$_POST["lname"]],
              'status'        => 'subscribed',
            ]);

  if ($MailChimp->success()) {
    // Success message
    echo "<h4>Thank you, you have been added to our mailing list.</h4>";
  } else {
    // Display error
    echo $MailChimp->getLastError();
    // Alternatively you can use a generic error message like:
    // echo "<h4>Please try again.</h4>";
  }
?>

Download

Click here to download the basic files to create MailChimp subscribe form on your website. Alternatively, you can also visit the GitHub repository.

Coming Soon Templates

The MailChimp subscribe form example only includes basic HTML page. If you are thinking of using it for your upcoming site, and you have limited resources to create the page design, check out my list of 5 Clean and Free Coming Soon Page Templates and Coming Soon & Under Construction Templates on ThemeForest.

The post MailChimp Subscribe Form with PHP, jQuery and AJAX (API 3.0) appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2017/01/mailchimp-subscribe-form-php-jquery-api3/feed/ 38 2591 Ready-to-use MailChimp PHP integration scripts https://sunarlim.com/2015/01/ready-use-mailchimp-php-integration-scripts/ https://sunarlim.com/2015/01/ready-use-mailchimp-php-integration-scripts/#respond Tue, 06 Jan 2015 08:00:33 +0000 https://sunarlim.com/?p=1336 I have shared a simple tutorial to integrate your web page with MailChimp subscription API. It is intended to give the most basic direction and then you can expand the design and functionalities to your preference. Some of you however might prefer to use a more “plug and play” approach. Therefore I decided to list... Continue reading →

The post Ready-to-use MailChimp PHP integration scripts appeared first on Michael Sunarlim.

]]> I have shared a simple tutorial to integrate your web page with MailChimp subscription API. It is intended to give the most basic direction and then you can expand the design and functionalities to your preference. Some of you however might prefer to use a more “plug and play” approach. Therefore I decided to list a number of (paid) scripts that would allow you to add good looking MailChimp PHP integration with minimal time required. These are not free, but definitely worth to save hours of your productive time.

DooMailChimp Modal Subscribe

DooMailChimp Modal Subscribe
Let’s start with the most simple but very effective approach. DooMailChimp allows you to add a simple button or link which when clicked will trigger a form modal box that connects to MailChimp upon submission.

MailChimp Subscribe Form

MailChimp Subscribe Form
Instead of using modal box, this script can be embedded using iframe so it stays on your web page. A good idea if you really want to draw more attention from your site’s visitors. The cool thing is they can sign up using Facebook, Hotmail, Google, LinkedIn aside from entering their email address manually.

Contact Form Generator

590x300-cfg-17
If you need more than a simple subscribe form but a complete contact form instead, this is a great form generator to make it a snap. With complete MailChimp and Aweber integration, you can create multiple forms on multiple projects in a breeze. You would still need to play with the styles though to really get the look that you prefer.

Layered Popups

Layered Popups
Another way, and probably the most effective, to collect your visitors’ email addresses is by incorporating automatic popup. This script will do that for you with integration with almost every popular email service such as MailChimp, GetResponse, iContact, Campaign Monitor, AWeber, Mad Mimi, Benchmark, ActiveCampaign, Interspire and Sendy.

Remember, getting new subscribers is only the first step. It is more important to actually send them engaging emails and make them happy with their decision to sign up in the first place.

The post Ready-to-use MailChimp PHP integration scripts appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2015/01/ready-use-mailchimp-php-integration-scripts/feed/ 0 1336 5 Clean and Free Coming Soon Page Templates with Email Subscription Form https://sunarlim.com/2014/05/5-clean-and-free-coming-soon-page-templates/ https://sunarlim.com/2014/05/5-clean-and-free-coming-soon-page-templates/#comments Fri, 30 May 2014 12:35:19 +0000 https://sunarlim.com/?p=1059 Soon after I had written about creating MailChimp Sign Up Form with PHP, jQuery and AJAX, I realized something was missing. Most of you probably also need a nice page template to display your coming soon page. I have selected some really nice ones, all are free of course and have email subscription form so... Continue reading →

The post 5 Clean and Free Coming Soon Page Templates with Email Subscription Form appeared first on Michael Sunarlim.

]]> Soon after I had written about creating MailChimp Sign Up Form with PHP, jQuery and AJAX, I realized something was missing. Most of you probably also need a nice page template to display your coming soon page.

I have selected some really nice ones, all are free of course and have email subscription form so you can integrate with MailChimp following the tutorial. Here they are:

Coming Soon Splash Page CSS3

It cannot go any simpler than this. Just drop in your logo, place some text, put a link of your Twitter, it is ready to go.
Coming Soon Splash Page CSS3

Counter – Coming Soon Page

For you who have something to showcase already, Counter is a great choice. Built with Bootstrap and Revolution Slider, it will amaze your audience even before your site is launched!
Counter Coming Soon Theme

Glassy – A shiny way to say “Coming Soon”

Similar as above, a nice responsive page with image slider. A better option if you prefer a shiny instead of flat look.
Coming soon page built on Twitter Bootstrap

HTML5 and CSS3 Minimal Coming Soon Page

Prefer to understand how the page is built instead of just diving into the code? This post shows how it was done.
Minimal Coming Soon Page

PaperLaunch – Free “Under Construction” Template

This nice and fully featured template has everything you ever need to create a coming soon page in minutes. It even includes the PSD files and Ajax Subscribe Form!
PaperLaunch Coming Soon Template

More Options

Have not found the template you are looking for from the ones above? Well you cannot be really picky for free stuff, right? If you are willing to spend $3-10 to save a lot of your time from custom design and coding, ThemeForest has lots of great templates too. Check them out under their Coming Soon & Under Construction Template category.

The post 5 Clean and Free Coming Soon Page Templates with Email Subscription Form appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2014/05/5-clean-and-free-coming-soon-page-templates/feed/ 2 1059 MailChimp Subscribe Form with PHP, jQuery and AJAX https://sunarlim.com/2014/04/mailchimp-sign-form-php-jquery-ajax/ https://sunarlim.com/2014/04/mailchimp-sign-form-php-jquery-ajax/#comments Mon, 28 Apr 2014 10:18:26 +0000 https://sunarlim.com/?p=1008 I am pretty sure I have mentioned somewhere in this blog or tweets of how I love MailChimp or and would recommend it for any business wanting to untap their email marketing potential. You can start with zero investment and only start paying when you are completely confident it is very worthy. MailChimp provides a... Continue reading →

The post MailChimp Subscribe Form with PHP, jQuery and AJAX appeared first on Michael Sunarlim.

]]> I am pretty sure I have mentioned somewhere in this blog or tweets of how I love MailChimp or and would recommend it for any business wanting to untap their email marketing potential. You can start with zero investment and only start paying when you are completely confident it is very worthy.

MailChimp provides a good tool to generate your custom sign up form which will serve most requirements well. Some customers however, want a fully custom form or integrate it with existing template they already own. Today I am going to share a quick tutorial in how to integrate HTML form with MailChimp API using PHP and jQuery.

MailChimp Subscribe Form Features

What will it do?

  • Validate field contents
  • Pass the form submission to MailChimp and add the record to your list
  • Basic fallback method for very, very old browser that does not have JavaScript activated
  • Five minutes setup

Tools/Credits

  1. jQuery
  2. jQuery Validation Plugin
  3. MailChimp PHP API Class

The Form Page (index.php)

jQuery will handle the AJAX using $.post method and jQuery Validation plugin will validate the field values including email address format.

<html>
<head>
  <title>MailChimp Sign-Up Form</title>
  <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="js/jquery.validate.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      // jQuery Validation
      $("#signup").validate({
        // if valid, post data via AJAX
        submitHandler: function(form) {
          $.post("subscribe.php", { fname: $("#fname").val(), lname: $("#lname").val(), email: $("#email").val() }, function(data) {
            $('#response').html(data);
          });
        },
        // all fields are required
        rules: {
          fname: {
            required: true
          },
          lname: {
            required: true
          },
          email: {
            required: true,
            email: true
          }
        }
      });
    });
  </script>
</head>

<body>
  <div id="wrapper">
    <form id="signup" class="formee" action="subscribe.php" method="post">
      <fieldset>
        <legend>Sign Up</legend>
        <div>
          <label for="fname">First Name *</label> <input name="fname" id="fname" type="text" />
        </div>
        <div>
          <label for="lname">Last Name *</label> <input name="lname" id="lname" type="text" />
        </div>
        <div>
          <label for="email">Email Address *</label> <input name="email" id="email" type="text" />
        </div>
        <div>
          <input class="right inputnew" type="submit" title="Send" value="Send" />
        </div>
      </fieldset>
    </form>
    <div id="response"></div>
  </div>
</body>
</html>

Form Processor (subscribe.php)

Our form will connect to MailChimp with the help of MCAPI.class.php. Please make sure you have generated the API key of your account and copied your list ID. MailChimp’s excellent knowledge base provides the instructions in how to retrieve your account’s API key and find your list ID.

<?php
  require_once 'inc/MCAPI.class.php';
  $api = new MCAPI('ENTER_YOUR_API_KEY_HERE');
  $merge_vars = array('FNAME'=>$_POST["fname"], 'LNAME'=>$_POST["lname"]);

  // Submit subscriber data to MailChimp
  // For parameters doc, refer to: http://apidocs.mailchimp.com/api/1.3/listsubscribe.func.php
  $retval = $api->listSubscribe( 'ENTER_YOUR_LIST_ID_HERE', $_POST["email"], $merge_vars, 'html', false, true );

  if ($api->errorCode){
    echo "<h4>Please try again.</h4>";
  } else {
    echo "<h4>Thank you, you have been added to our mailing list.</h4>";
  }
?>

That’s it! You can now check on your web server with a few tests and see if they are captured in your MailChimp list.

Download

Sample files and structure of this tutorial can be downloaded here. Please share this post if you find it useful using social media buttons below.

Coming Soon Templates

My files only include a basic HTML page. If you are thinking of using it for your upcoming site, and you have limited resources to create the page design, check out my list of 5 Clean and Free Coming Soon Page Templates and Coming Soon & Under Construction Templates on ThemeForest.

UPDATE (January 9, 2017)

I have published updated version of this tutorial to make use of MailChimp’s newer API 3.0. Please follow the link to read how to create MailChimp Subscribe Form with PHP, jQuery and AJAX (API 3.0).

The post MailChimp Subscribe Form with PHP, jQuery and AJAX appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2014/04/mailchimp-sign-form-php-jquery-ajax/feed/ 127 1008