DEV Community

Discussion on: Solving the two Mailchimp embedded subscription forms in one page bug

Collapse
 
nl profile image
N Legault • Edited

It's working but it's not perfect.

I found 3 main issues that prevented me from using it in my current project:
1- if you want to have 3 or more embed, you have the same issue has before.
2- if the embed is not hardcode and instead is manage by the client (and the client don't know how to code).
3- making a form custom required custom validation and confirmation.

I found a solution. It's not perfect, but you don't have to rewrite the embed forms, you can have has many embed has you like in a page and work with the validation & messages for validation / confirmation from mailchimp. It only 2 easy steps.

1- Make sure the mailchimp validate script is loaded (s3.amazonaws.com/downloads.mailchi...)

2- After the mailchimp script, add the following fix script. (in jQuery because mailchimp use it in is validation anyway.)

<script>
// https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js

$( document ).ready(function() {
  window.mc.mce_success_cb = function(resp)
  {
    var $this = $(window.mc.currentSubmitForm);

    $this.find('#mce-success-response').hide();
    $this.find('#mce-error-response').hide();

    // On successful form submission, display a success message and reset the form
    if (resp.result == "success")
    {
      $this.find('#mce-' + resp.result + '-response').show();
      $this.find('#mce-' + resp.result + '-response').html(resp.msg);
      $('#mc-embedded-subscribe-form').each(function ()
      {
        this.reset();
      });

      // If the form has errors, display them, inline if possible, or appended to #mce-error-response
    }
    else
    {
      if (resp.msg === "captcha")
      {
        var url = $this.attr("action");
        var parameters = $.param(resp.params);
        url = url.split("?")[0];
        url += "?";
        url += parameters;
        window.open(url);
      };
      // Example errors - Note: You only get one back at a time even if you submit several that are bad. 
      // Error structure - number indicates the index of the merge field that was invalid, then details
      // Object {result: "error", msg: "6 - Please enter the date"} 
      // Object {result: "error", msg: "4 - Please enter a value"} 
      // Object {result: "error", msg: "9 - Please enter a complete address"} 

      // Try to parse the error into a field index and a message.
      // On failure, just put the dump thing into in the msg variable.
      var index = -1;
      var msg;
      try
      {
        var parts = resp.msg.split(' - ', 2);
        if (parts[1] == undefined)
        {
          msg = resp.msg;
        }
        else
        {
          i = parseInt(parts[0]);
          if (i.toString() == parts[0])
          {
            index = parts[0];
            msg = parts[1];
          }
          else
          {
            index = -1;
            msg = resp.msg;
          }
        }
      }
      catch (e)
      {
        index = -1;
        msg = resp.msg;
      }

      try
      {
        // If index is -1 if means we don't have data on specifically which field was invalid.
        // Just lump the error message into the generic response div.
        if (index == -1)
        {
          $this.find('#mce-' + resp.result + '-response').show();
          $this.find('#mce-' + resp.result + '-response').html(msg);

        }
        else
        {
          var fieldName = $this.find("input[name*='" + fnames[index] + "']").attr('name'); // Make sure this exists (they haven't deleted the fnames array lookup)
          var data = {};
          data[fieldName] = msg;
          window.mc.mce_validator.showErrors(data);
        }
      }
      catch (e)
      {
        $this.find('#mce-' + resp.result + '-response').show();
        $this.find('#mce-' + resp.result + '-response').html(msg);
      }
    }
  }

  $('form#mc-embedded-subscribe-form').on('submit', function(e){
    if(!$(this).attr("action")){ return; }
    e.preventDefault();
    window.mc.currentSubmitForm = this;
    var url = $(this).attr("action");
    url = url.replace("/post?u=", "/post-json?u=");
    url += "&c=?";
    $.ajax({
      url: url,
      type: 'GET',
      data: $(this).serialize(),
      dataType: 'json',
      contentType: "application/json; charset=utf-8",
      success: mc.mce_success_cb
    });
    return false;
  });

});
</script>
Enter fullscreen mode Exit fullscreen mode