Mailchimp "mce-error-response" Creating Text Instead Of A New Tab

Question

I'm using a basic mailchimp form that looks like this

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="http://facebook.us16.list-manage.com/subscribe/post?u=81d63ae912846f990f5307c84&amp;id=b817e70a9e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
    <label for="mce-FNAME">First Name  <span class="asterisk">*</span>
</label>
    <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
    <label for="mce-LNAME">Last Name  <span class="asterisk">*</span>
</label>
    <input type="text" value="" name="LNAME" class="required" id="mce-LNAME">
</div>
<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
    <label for="mce-JOB">Job Title  <span class="asterisk">*</span>
</label>
    <input type="text" value="" name="JOB" class="required" id="mce-JOB">
</div>
<div class="mc-field-group">
    <label for="mce-INDUSTRY">Industry  <span class="asterisk">*</span>
</label>
    <input type="text" value="" name="INDUSTRY" class="required" id="mce-INDUSTRY">
</div>
    <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>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_81d63ae912846f990f5307c84_b817e70a9e" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[0]='EMAIL';ftypes[0]='email';fnames[3]='JOB';ftypes[3]='text';fnames[4]='INDUSTRY';ftypes[4]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

</body>
</html>

It is about as basic as it gets with mailchimp.. when I test this locally in my browser it behaves as expected and creates a new tab that looks like this:

however, when putting this exact same code up on a server, instead this new tab is rendered as a line of text that looks like this

Has anyone noticed this kind of behavior before? The error that persists when inspecting the page is this

Failed to load resource: net::ERR_FILE_NOT_FOUND

In regards to "mce-error-response"

Any insight would be appreciated. Thanks!

yes, there is no css, It is straight html. This error shows when testing locally in my browser. — laroy, Sep 25 '17 at 14:14
it's not logical, check mailchimp weel, you should copy/paste a link to a CSS file, it won't work fine without — Temani Afif, Sep 25 '17 at 14:16

Joel H. · Accepted Answer · 2017-09-27T02:46:39.300

The tab that opens when you test the code locally is actually the fallback behavior. The form is intended to show the validation errors directly on the page like it does when you test it on your server, but is prevented from doing so locally because of the Failed to load resource error. It's a result of this line:

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[0]='EMAIL';ftypes[0]='email';fnames[3]='JOB';ftypes[3]='text';fnames[4]='INDUSTRY';ftypes[4]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

Notice the src attribute doesn't include a protocol like 'http:' or 'https:'. When there is no protocol, it uses the protocol of the current page. So a local file with the 'file:///' protocol will attempt to locate file:///s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js, which doesn't exist.

That validation script contains code to submit the form using AJAX, as this comment from the script shows:

/**
 *  Grab the list subscribe url from the form action and make it work for an ajax post.
 */

So since the local file can't find the script, it falls back to its default behavior of submitting the form to the URL specified in the action attribute and opens in a new tab as specified in the target attribute.

Mailchimp "mce-error-response" Creating Text Instead Of A New Tab

1 Answers1