ajax Archives - Michael Sunarlim https://sunarlim.com/tag/ajax/ 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 ajax Archives - Michael Sunarlim https://sunarlim.com/tag/ajax/ 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 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 Ajax Loader Image Generator https://sunarlim.com/2008/08/ajax-loader-image-generator/ https://sunarlim.com/2008/08/ajax-loader-image-generator/#respond Tue, 26 Aug 2008 17:30:57 +0000 http://wp.sunarlim.com.com/?p=118 Always having a hard time to find the perfect loader for your AJAX scripts? Then you need to bookmark this site: Ajaxload. Not only it provides a few dozens of animated GIF image for your loader, you can even customize it background and foreground colors. Nice!

The post Ajax Loader Image Generator appeared first on Michael Sunarlim.

]]> Always having a hard time to find the perfect loader for your AJAX scripts? Then you need to bookmark this site: Ajaxload.

Not only it provides a few dozens of animated GIF image for your loader, you can even customize it background and foreground colors. Nice!

The post Ajax Loader Image Generator appeared first on Michael Sunarlim.

]]> https://sunarlim.com/2008/08/ajax-loader-image-generator/feed/ 0 118