CODEWITHSUNDEEP
htmlformsmailchimpmailchimp-api-v3.0
user1406440
user1406440

Reputation: 1655

Change MailChimp's success/error message

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?

Upvotes: 15

Views: 25986

Answers (3)

Vinicius Zucatti
Vinicius Zucatti

Reputation: 1

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();
      });
    },

Upvotes: 0

jaredwolff
jaredwolff

Reputation: 807

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.

Upvotes: 17

Axtru
Axtru

Reputation: 191

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:

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

  1. 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.

  1. 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.

Upvotes: 14

Related Questions