AJAX के मेलिचम साइनअप फॉर्म एकीकरण


122

क्या AJAX के साथ mailchimp सरल (एक ईमेल इनपुट) को एकीकृत करने का कोई तरीका है, इसलिए कोई पृष्ठ ताज़ा नहीं है और डिफ़ॉल्ट mailchimp पृष्ठ पर कोई पुनर्निर्देशन नहीं है।

यह समाधान काम नहीं करता jQuery Ajax POST MailChimp के साथ काम नहीं कर रहा है

धन्यवाद


फ़ॉर्म सबमिट करने के बाद यह "पुष्टिकरण" पृष्ठ पर मेलचम्प करने के लिए रीडायरेक्ट करता है।
अलेक्जेंडम

3
आपके समाधान में बहुत बड़ा सुरक्षा छेद है, API कुंजी को निजी माना जाना चाहिए क्योंकि यह आपके MailChimp खाते तक पूर्ण पहुंच प्रदान करता है। #

1
यह समाधान आपके mailchimp API को उजागर करता है जो एक अच्छा विचार नहीं है
Ruairi Browne

3
Mailchimp की वेबसाइट पर डिफ़ॉल्ट HTML एंबेड विकल्प आपके एपीआई कुंजी को भी उजागर नहीं करता है? यह किसी भी बेहतर या बदतर नहीं हो सकता है तो उस समाधान।
बॉब बोब्बियो

इस jQuery प्लगइन का उपयोग करें: github.com/scdoshi/jquery-ajaxchimp
सिड

जवाबों:


241

आप एक API कुंजी की जरूरत नहीं है, तुम सब करने की ज़रूरत अपने कोड में मानक MailChimp उत्पन्न प्रपत्र (नज़र रूप में की जरूरत को अनुकूलित) खटखटाने है और फ़ॉर्म "कार्रवाई" विशेषता परिवर्तन में post?u=करने के लिए post-json?u=और फिर रूपों एक्शन के अंत में &c=?किसी भी क्रॉस डोमेन समस्या के आसपास पाने के लिए अपील । यह भी ध्यान रखना महत्वपूर्ण है कि जब आप फॉर्म जमा करते हैं तो आपको POST के बजाय GET का उपयोग करना चाहिए।

आपका फ़ॉर्म टैग डिफ़ॉल्ट रूप से कुछ इस तरह दिखाई देगा:

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post?u=xxxxx&id=xxxx" method="post" ... >

इसे कुछ इस तरह से देखने के लिए बदलें

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?" method="get" ... >

मेल चिंप 2 मान वाले एक json ऑब्जेक्ट लौटाएगा: 'परिणाम' - यह इंगित करेगा कि अनुरोध सफल था या नहीं (मैंने केवल 2 मान देखे हैं, "त्रुटि" और "सफलता") और 'संदेश' - एक संदेश परिणाम का वर्णन करना।

मैं इस बिट jQuery के साथ अपने फॉर्म जमा करता हूं:

$(document).ready( function () {
    // I only have one form on the page but you can be more specific if need be.
    var $form = $('form');

    if ( $form.length > 0 ) {
        $('form input[type="submit"]').bind('click', function ( event ) {
            if ( event ) event.preventDefault();
            // validate_input() is a validation function I wrote, you'll have to substitute this with your own.
            if ( validate_input($form) ) { register($form); }
        });
    }
});

function register($form) {
    $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize(),
        cache       : false,
        dataType    : 'json',
        contentType: "application/json; charset=utf-8",
        error       : function(err) { alert("Could not connect to the registration server. Please try again later."); },
        success     : function(data) {
            if (data.result != "success") {
                // Something went wrong, do something to notify the user. maybe alert(data.msg);
            } else {
                // It worked, carry on...
            }
        }
    });
}

8
मैं एक jQuery-प्लगइन है कि का उपयोग करता है इस विधि बनाया: github.com/scdoshi/jquery-ajaxchimp
सिड

22
आप JSONP का भी उपयोग कर सकते हैं। post-jsonबताए अनुसार प्रयोग करें । &c=यदि आपके पास फ़ॉर्म एक्शन यूआरएल में है तो उसे हटा दें । अपने jQuery के अजाक्स कॉल के लिए उपयोग करें dataType: 'jsonp'और jsonp: 'c'
czerasz

5
ध्यान दें कि ईमेल प्रपत्र फ़ील्ड में प्रक्रिया के लिए mailchimp के लिए नाम = "EMAIL" होना चाहिए
इयान वार्नर

5
यदि किसी के पास समस्या है तो बस FYI करें, ईमेल पैरामीटर का नाम EMAIL(सभी कैप्स) होना चाहिए । अन्यथा आपको यह बताते हुए एक त्रुटि मिलेगी कि ईमेल पता रिक्त है।
निक टिबरी

5
क्या MailChimp ने API के एक्सेस की इस विधि को निष्क्रिय कर दिया है क्योंकि यह उत्तर लिखा गया था? मैंने दस्तावेज़ीकरण में कोई संकेत नहीं देखा कि एपीआई कुंजी के बिना एक जीईटी / पीओएसटी उपयोगकर्ता को सूची में शामिल कर सकता है।
ग्रेग बेल

34

Gbinflames के जवाब के आधार पर, मैंने POST और URL रखा, ताकि फॉर्म JS JS वाले लोगों के लिए काम करता रहे।

<form class="myform" action="http://XXXXXXXXXlist-manage2.com/subscribe/post" method="POST">
  <input type="hidden" name="u" value="XXXXXXXXXXXXXXXX">
  <input type="hidden" name="id" value="XXXXXXXXX">
  <input class="input" type="text" value="" name="MERGE1" placeholder="First Name" required>
  <input type="submit" value="Send" name="submit" id="mc-embedded-subscribe">
</form>

फिर, jQuery के .submit () का उपयोग करके, और JSON प्रतिनिधि को संभालने के लिए URL को बदल दिया।

$('.myform').submit(function(e) {
  var $this = $(this);
  $.ajax({
      type: "GET", // GET & url for json slightly different
      url: "http://XXXXXXXX.list-manage2.com/subscribe/post-json?c=?",
      data: $this.serialize(),
      dataType    : 'json',
      contentType: "application/json; charset=utf-8",
      error       : function(err) { alert("Could not connect to the registration server."); },
      success     : function(data) {
          if (data.result != "success") {
              // Something went wrong, parse data.msg string and display message
          } else {
              // It worked, so hide form and display thank-you message.
          }
      }
  });
  return false;
});

18

आप चाहिए ताकि आपके MailChimp खाते को सुरक्षित करने में सर्वर-साइड कोड का उपयोग करें।

निम्नलिखित इस उत्तर का एक अद्यतन संस्करण है जो PHP का उपयोग करता है :

PHP फाइलें सर्वर पर "सुरक्षित" होती हैं, जहां उपयोगकर्ता उन्हें कभी नहीं देखता है फिर भी jQuery अभी भी एक्सेस और उपयोग कर सकता है।

1) यहाँ PHP 5 jQuery उदाहरण डाउनलोड करें ...

http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip

यदि आपके पास केवल PHP 4 है, तो MCAPI के संस्करण 1.2 को डाउनलोड करें और MCAPI.class.phpऊपर दी गई फ़ाइल को बदल दें ।

http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip

2) store-address.phpउचित स्थानों पर फ़ाइल में अपनी एपीआई कुंजी और सूची आईडी जोड़कर रीडमी फ़ाइल के निर्देशों का पालन करें ।

3) आप अपने उपयोगकर्ताओं का नाम और / या अन्य जानकारी भी इकट्ठा करना चाह सकते हैं। आपको store-address.phpसंबंधित मर्ज चर का उपयोग करके फ़ाइल में एक सरणी जोड़ना होगा ।

यहाँ मेरी store-address.phpफ़ाइल ऐसी दिखती है जहाँ मैं पहला नाम, अंतिम नाम और ईमेल प्रकार एकत्र करता हूँ:

<?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!&nbsp; Check your inbox or spam folder for a message containing a confirmation link.';
    }else{
        // An error ocurred, return error message   
        return '<b>Error:</b>&nbsp; ' . $api->errorMessage;
    }

}

// If being called via ajax, autorun the function
if($_GET['ajax']){ echo storeAddress(); }
?>

4) अपना HTML / CSS / jQuery फॉर्म बनाएँ। यह PHP पृष्ठ पर होना आवश्यक नहीं है।

यहाँ कुछ ऐसा है जैसे मेरी index.htmlफ़ाइल कैसी दिखती है:

<form id="signup" action="index.html" method="get">
    <input type="hidden" name="ajax" value="true" />
    First Name: <input type="text" name="fname" id="fname" />
    Last Name: <input type="text" name="lname" id="lname" />
    email Address (required): <input type="email" name="email" id="email" />
    HTML: <input type="radio" name="emailtype" value="html" checked="checked" />
    Text: <input type="radio" name="emailtype" value="text" />
    <input type="submit" id="SendButton" name="submit" value="Submit" />
</form>
<div id="message"></div>

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() {
    $('#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: $('#signup').serialize(),
            success: function(msg) {
                $('#message').html(msg);
            }
        });
        return false;
    });
});
</script>

आवश्यक टुकड़े ...

  • index.html ऊपर या समान रूप से निर्मित। JQuery के साथ, उपस्थिति और विकल्प अंतहीन हैं।

  • Store-address.php फ़ाइल को Mailchimp साइट पर PHP के उदाहरणों के भाग के रूप में डाउनलोड किया गया है और अपने एपीआई कुंजी और सूची आईडी के साथ संशोधित किया गया है । आपको अपने अन्य वैकल्पिक फ़ील्ड को सरणी में जोड़ना होगा।

  • MCAPI.class.php फ़ाइल Mailchimp साइट (PHP 5 के लिए संस्करण 1.3 या PHP 4 के लिए संस्करण 1.2) से डाउनलोड की गई है। इसे उसी निर्देशिका में अपने स्टोर- address.php के रूप में रखें या आपको स्टोर-एड्रेस.php के भीतर url पथ को अपडेट करना होगा ताकि वह इसे पा सके।


2
यदि आप केवल अपनी साइट पर एक साइनअप फ़ॉर्म जोड़ना चाहते हैं और इसे AJAX, @ gbinflames के उत्तर कार्यों के माध्यम से सबमिट करना चाहते हैं। बस खुद कोशिश की।
पैट्रिक कैनफील्ड

1
नहीं, नहीं है चाहिए
नाउकर

2
बकवास, मैं कहता हूँ - मैंने कुछ समय पहले एक साइट पर @ skube का उत्तर लागू किया और फिर बाद में साइट-व्यापी https जोड़ा। अभी पता चला है कि यह mailchimp http AJAX कॉल के साथ काम नहीं कर रहा है। यदि आपको कभी साइट की आवश्यकता हो या एसएसएल का उपयोग करने पर विचार कर सकते हैं, तो बल्ले से इस विधि के साथ जाने की अत्यधिक अनुशंसा करें।
स्क्वायरकैंडी

12

आधुनिक स्टैक पर समाधान की तलाश में किसी के लिए:

import jsonp from 'jsonp';
import queryString from 'query-string';

// formData being an object with your form data like:
// { EMAIL: 'emailofyouruser@gmail.com' }

jsonp(`//YOURMAILCHIMP.us10.list-manage.com/subscribe/post-json?u=YOURMAILCHIMPU&${queryString.stringify(formData)}`, { param: 'c' }, (err, data) => {
  console.log(err);
  console.log(data);
});

6

Gbinflames के जवाब के आधार पर, यह मेरे लिए काम किया है:

एक साधारण मेलचिंम्प लिस्ट साइन अप फॉर्म तैयार करें, अपने कस्टम फॉर्म में एक्शन URL और विधि (पोस्ट) को कॉपी करें। साथ ही अपने प्रपत्र फ़ील्ड नामों को सभी राजधानी (नाम = 'EMAIL' में बदल दें जैसा कि मूल mailchimp कोड, EMAIL, FNAME, LNAME, ...) में है, फिर इसका उपयोग करें:

      $form=$('#your-subscribe-form'); // use any lookup method at your convenience

      $.ajax({
      type: $form.attr('method'),
      url: $form.attr('action').replace('/post?', '/post-json?').concat('&c=?'),
      data: $form.serialize(),
      timeout: 5000, // Set timeout value, 5 seconds
      cache       : false,
      dataType    : 'jsonp',
      contentType: "application/json; charset=utf-8",
      error       : function(err) { // put user friendly connection error message  },
      success     : function(data) {
          if (data.result != "success") {
              // mailchimp returned error, check data.msg
          } else {
              // It worked, carry on...
          }
      }

5

इस तिथि (फरवरी 2017) के लिए, ऐसा लगता है कि mailchimp ने कुछ इसी तरह की चीजों को एकीकृत किया है जो कि gbinflames अपने स्वयं के जावास्क्रिप्ट जनरेट किए गए फॉर्म में सुझाते हैं।

अब आपको किसी और हस्तक्षेप की आवश्यकता नहीं है, क्योंकि जब जावास्क्रिप्ट सक्षम किया जाता है, तो mailchimp एक ajax को सबमिट किए गए फॉर्म में बदल देगा।

अब आपको बस इतना करना है कि आप अपने HTML पेज में एम्बेड मेनू से उत्पन्न फॉर्म को पेस्ट करें और किसी अन्य कोड को संशोधित या जोड़ नहीं सकते हैं।

यह बस काम करता है। धन्यवाद MailChimp!


4
यह वास्तव में मदद आप एक ही करने के लिए कुछ लेख लिंक / ब्लॉग पोस्ट में जोड़ सकते हैं, तो होगा
gonephishing

मैंने अपने HTML पेज में Mailchimp एम्बेड कोड जोड़ा है, लेकिन Ajax ऊपर बताए अनुसार स्वचालित रूप से काम नहीं करता है। मैं दूसरे पृष्ठ पर पुनः निर्देशित हो जाता हूं। बिना रीडायरेक्ट के मैं यह काम कैसे कर सकता हूं?
पेट्रा

1
MailChimp एडमिन में अपनी सूची में जाएं -> साइनअप फॉर्म -> एंबेडेड फॉर्म -> क्लासिक। आप देखेंगे कि कोड स्निपेट में कुछ JS शामिल हैं। यह फ़ॉर्म सत्यापन और AJAX सबमिशन को सक्षम करेगा।
मार्केयुय

1
mailchimp कोड का उपयोग करते हुए - मैं ajax सफलता के लिए एक कस्टम कार्रवाई कैसे प्लग कर सकता हूं? [फॉर्म को छुपाना पसंद है]
एडेयिरेल

1
@Masiorama मैंने mc-validate script को हटाने का विकल्प चुना, क्योंकि इसमें एक पुराना jquery भी था और यह बहुत बड़ा और कमजोर था। तो बस html सत्यापन होना और अजाक्स के साथ जमा करना जैसे stackoverflow.com/a/15120409/744690
Adeerlike

4

प्राप्त करने के लिए jquery.ajaxchimp प्लगइन का उपयोग करें । यह आसान है!

<form method="post" action="YOUR_SUBSCRIBE_URL_HERE">
  <input type="text" name="EMAIL" placeholder="e-mail address" />
  <input type="submit" name="subscribe" value="subscribe!" />        
  <p class="result"></p>
</form>

जावास्क्रिप्ट:

$(function() {
  $('form').ajaxChimp({
    callback: function(response) {
      $('form .result').text(response.msg);
    }
  });
})

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.