Using an existing form to post data to mailchimp then redirect
I haven't worked with my mailchimp, so I'm wondering if it is possible to easily submit form data to mailchimp without using their out-of-the-box templates. Also, will mailchimp send a callback of some kind? I want the form to be submitted then when it finished it will redirect the user to the upload page. It would be even better if the whole thing could work in ajax / jquery.
source to share
Basically, you use jQuery ajax()
in your own HTML form to access PHP files that interact with the MailChimp API. MailChimp replies go back to your original form via Ajax, so there is no redirect or refresh. However, if you want to redirect, you just change the jQuery ajax function to do it.
Even if you are not using PHP, it will most likely be installed on your server. Your users will never see PHP files; they are just used in the back.
Source: SO answer I posted earlier ...
After doing a bit of work, I found a site using a PHP example with jQuery. From this, I was able to create a simple HTML page with jQuery containing a basic registration form. PHP files are "hidden" in the background when the user never sees them, but jQuery can still be used and used.
1) Download PHP 5 jQuery example here ...
http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip
If you only have PHP 4, just download MCAPI version 1.2 and replace the corresponding file MCAPI.class.php
above.
http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip
2) Follow the directions in the Readme file to add the API Key and List ID to the file store-address.php
at the appropriate locations.
3) You may also want to collect username and / or other information. You must add the array to the file store-address.php
using the appropriate Merge variables.
This is what my file looks like store-address.php
, where I am also collecting first name, last name and email type:
<?php
function storeAddress(){
require_once('MCAPI.class.php'); // same directory as store-address.php
// grab an API Key from http://admin.mailchimp.com/account/api/
$api = new MCAPI('123456789-us2');
$merge_vars = Array(
'EMAIL' => $_GET['email'],
'FNAME' => $_GET['fname'],
'LNAME' => $_GET['lname']
);
// grab your List Unique Id by going to http://admin.mailchimp.com/lists/
// Click the "settings" link for the list - the Unique Id is at the bottom of that page.
$list_id = "123456a";
if($api->listSubscribe($list_id, $_GET['email'], $merge_vars , $_GET['emailtype']) === true) {
// It worked!
return 'Success! Check your inbox or spam folder for a message containing a confirmation link.';
}else{
// An error ocurred, return error message
return '<b>Error:</b> ' . $api->errorMessage;
}
}
// If being called via ajax, autorun the function
if($_GET['ajax']){ echo storeAddress(); }
?>
4) Create your HTML / CSS / jQuery form. It doesn't have to be on the PHP page.
This is what my file looks like index.html
:
<html>
<head>
<title>Welcome</title>
<style type="text/css" media="screen">
body { font-size: 16px; }
input { font-size: 16px; }
.textinput { width: 300px; height: 20px; }
#message { color: #8e2c30; font-size: 15px; font-weight: bold; padding: 10px; border: solid 1px #6d6e70; }
</style>
</head>
<body>
<div style="width:550px;">
<div style="text-align:right;">
<b>Sign Up for the Newsletter:</b><br />
<br />
<form id="signup" action="index.html" method="get">
First Name: <input type="text" name="fname" id="fname" class="textinput" value="" />
<br />
Last Name: <input type="text" name="lname" id="lname" class="textinput" value="" />
<br />
email Address (required): <input type="email" name="email" id="email" class="textinput" value="" />
<br />
<input type="radio" name="emailtype" value="html" checked="checked">HTML <input type="radio" name="emailtype" value="text">Text <input type="radio" name="emailtype" value="mobile">Mobile Device<br />
<br />
<input type="submit" id="SendButton" name="submit" class="textinput" value="Submit" />
</form>
</div>
<div id="message">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var emailEntered,
fnameVal,
lnameVal,
emailtypeVal;
$(document).ready(function() {
$("#SendButton").click(function() {
$(".error").hide();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal = $("#email").val();
if(emailaddressVal == '') {
$("#message").html('<span class="error">Enter your email address before submitting.</span>');
return false;
}
else if(!emailReg.test(emailaddressVal)) {
$("#message").html("<span class='error'>That is not an email address. Typo?</span>");
return false;
}
else {
emailEntered = escape($('#email').val());
}
fnameVal = escape($("#fname").val());
lnameVal = escape($("#lname").val());
emailtypeVal = $('input:radio[name=emailtype]:checked').val();
});
$('#signup').submit(function() {
$("#message").html("<span class='error'>Adding your email address...</span>");
$.ajax({
url: 'inc/store-address.php', // proper url to your "store-address.php" file
data: 'ajax=true&email=' + emailEntered +'&fname=' + fnameVal + '&lname=' + lnameVal + '&emailtype=' + emailtypeVal,
success: function(msg) {
$('#message').html(msg);
}
});
return false;
});
});
</script>
</body>
</html>
Required fragments ...
-
index.html built like above and similar. With jQuery, the looks and options are endless.
-
store-address.php file uploaded as part of the PHP samples on the Mailchimp site and modified with the KEY and LIST ID APIs . You need to add other additional fields to the array.
-
MCAPI.class.php file downloaded from Mailchimp website (version 1.3 for PHP 5 or version 1.2 for PHP 4). Place it in the same directory as your store-address.php , or you have to update the url in store-address.php so it can find it.
source to share