Change MailChimp's success/error message

Question

I can't find this anywhere. Can anyone who's familiar with MailChimp advise?

I've embed my form/input and there's some empty div's (below) which have error/success messages injected.

<div id="mce-responses" class="clear">
    <div class="response" id="mce-error-response" style="display:none"></div>
    <div class="response" id="mce-success-response" style="display:none"></div>
</div>

When I add custom text to the empty div's it just gets overwritten when the form is submitted so it's obviously getting the content from MailChimp somehow/where!

Any ideas?

score 15 · Answer 1 · edited Apr 03 '19 at 16:42

15

A programatic way to do it is with some javascript:

// select the target node
var target = document.getElementById('mce-success-response');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (target.innerHTML === "Thank you for subscribing!") {
      target.innerHTML = "Check your email!";
    }
  });
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

Got that code from here.

edited Apr 03 '19 at 16:42

Matt Fletcher

8,182
8
41
60

answered Apr 01 '19 at 16:15

jaredwolff

777
8
13

1

This was perfect for me because we wanted to be able to create lists programatically without having to give access to MailChimp for our client, so this worked perfectly and also allowed translations sent from the CMS. Thanks! – Matt Fletcher Apr 03 '19 at 16:40
Where do you put this code? In own JS after mailchimp js? I can't get it to work (does it need a trigger, like a click?). – Carl Papworth Jun 26 '19 at 08:02
This code monitors *mce-success-response*, so as long as you have the Mailchimp javascript and the messages that show up it should trigger. If you have a custom form or just a standard HTML form it will not work. – jaredwolff Jun 28 '19 at 00:21
2

While this works, the message from Mailchimp could change at any given time, breaking your app. – INT Mar 06 '20 at 13:21

score 14 · Answer 2 · edited May 17 '18 at 13:26

14

Found this resource:
https://kb.mailchimp.com/lists/signup-forms/translate-the-mailchimp-embed-code

The Classic Form for mailchimp generates the success and error messages statically, so this has something to do with the language settings.

I've done it my self for a form by following these steps:

Go to the list you are using and press "Signup forms", such that the window looks like this. Then open the "Form builder"

When the "Form builder" is open. #1 Change the "Forms and response emails" to "Confirmation thank you page". #2 Change the tab to "Translate it". #3 Change the "Set default language" to Custom.

Now it should be possible to change the "Thank you for subscribing!" text, while to change the error messages just change the "Forms and response emails" selection.

edited May 17 '18 at 13:26

geisterfurz007

5,292
5
33
54

answered May 17 '18 at 10:21

Axtru

171
1
9

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/19755733) – Shadow May 17 '18 at 11:36
1

@Shadow Disagree. The images are posted on stack.imgur and seem to answer the question following along the linked tutorial. – geisterfurz007 May 17 '18 at 13:22
@geisterfurz007 [this](https://stackoverflow.com/revisions/50389038/1) is what I reviewed - it has been edited since then. And if all of the links died in the answer, then the answer would have been useless. I'm glad to say that this answer has been improved since then. – Shadow May 17 '18 at 23:14
2

I need 10 points to add images to my answers, so i just linked them. – Axtru May 18 '18 at 11:13

Vinicius Zucatti · Answer 3 · 2023-07-22T21:59:55.140

You can download the validate script and edit it.

s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js

example:

update this

<script
  type="text/javascript"
  src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"
></script>

to this

<script
  type="text/javascript"
  src="my-script-bla-bla-bla.js"
></script>

check this method and update as you wish:

if (resp.result == "success") {
  $("#mce-" + resp.result + "-response").show();
  $("#mce-" + resp.result + "-response").html("HERE YOUR NEW MESSAGE");
  $("#mc-embedded-subscribe-form").each(function () {
    this.reset();
});

to the error message is the "else" logic you can edit as you need.

BTW you can also remove some stuff... here is my logic

    mce_success_cb: function (resp) {
      $("#mce-success-response").hide();
      $("#mce-error-response").hide();

      const SUCCESS_MESSAGE = "Obrigado por inscrever-se!";
      const ERROR_MESSAGE =
        "Ops... algo deu errado, tente novamente mais tarde";

      const MESSAGE =
        resp.result == "success" ? SUCCESS_MESSAGE : ERROR_MESSAGE;

      $("#mce-" + resp.result + "-response").show();
      $("#mce-" + resp.result + "-response").html(MESSAGE);
      $("#mc-embedded-subscribe-form").each(function () {
        this.reset();
      });
    },

Change MailChimp's success/error message

3 Answers3

Linked