Grundsätzlich verwenden Sie jQuery ajax() auf Ihrem eigenen benutzerdefinierten HTML-Formular, um auf PHP-Dateien zuzugreifen, die mit der MailChimp-API kommunizieren. Die Antworten von MailChimp kehren über Ajax zu Ihrer ursprünglichen Form zurück, so dass es keine Weiterleitung oder Aktualisierung gibt. Wenn Sie jedoch umleiten möchten, ändern Sie einfach Ihre jQuery-Ajax-Funktion, um dies zu tun.
Auch wenn Sie kein PHP verwenden, ist es höchstwahrscheinlich auf Ihrem Server installiert. Ihre Benutzer werden die PHP-Dateien nie sehen; Sie werden nur im Backend verwendet.
Source: A SO answer I posted previously...
Nachdem er eine Weile herumzufummeln, fand ich eine Website, die PHP-Beispiel mit jQuery verwenden. Daraus konnte ich eine einfache HTML-Seite mit jQuery erstellen, die das Basis-Anmeldeformular enthält. Die PHP-Dateien sind im Hintergrund "versteckt", wo der Benutzer sie noch nicht sieht. JQuery kann immer noch auf & zugreifen.
1) Laden Sie die PHP 5 jQuery Beispiel hier ...
http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip
Wenn Sie nur PHP 4 haben, einfach die Version 1.2 des MCAPI herunterladen und die entsprechenden MCAPI.class.php Datei oben ersetzen.
http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip
2) Folgen Sie den Anweisungen in der Readme-Datei, indem Sie Ihre API-Schlüssel und List-ID an die store-address.php Datei an den richtigen Stellen hinzufügen.
3) Sie können auch den Namen Ihrer Benutzer und/oder andere Informationen sammeln. Sie müssen der Datei store-address.php ein Array mit den entsprechenden Merge-Variablen hinzufügen.
Hier ist, was meine store-address.php Datei aussieht, wo ich sammeln auch den Vornamen, Nachnamen und E-Mail-Typ:
<?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's 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) Erstellen Sie Ihre HTML/CSS/jQuery Form. Es ist nicht erforderlich, auf einer PHP-Seite zu sein.
Hier ist, was meine index.html Datei wie folgt aussieht:
<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-\.][email protected]([\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>
Pflichtstück ...
index.html oben oder ähnlich aufgebaut ist, wie. Mit jQuery sind Aussehen und Optionen endlos.
store-address.php Datei als Teil von PHP Beispiele auf Mailchimp Website heruntergeladen und modifiziert mit Ihrem API KEY und LIST ID.Sie müssen Ihre anderen optionalen Felder zum Array hinzufügen.
MCAPI.class.php Datei von der Mailchimp-Site heruntergeladen (Version 1.3 für PHP 5 oder Version 1.2 für PHP 4). Legen Sie es in das gleiche Verzeichnis wie Ihre store-address.php oder Sie müssen den URL-Pfad innerhalb store-address.php aktualisieren, damit es es finden kann.