Support » Plugin: AMP » Troubleshooting Mailchimp amp-form embed

  • Resolved ingereck

    (@ingereck)


    Below you find my Mailchimp amp-form. When I enter data and submit the form, the data is being transferred to Mailchimp but I am getting my amp-mustache error instead of the success message. What did I miss out? Thanks for an idea how to fix the error. Take care and Happy Easter!

    Errors in the console are:

    Access to fetch at 'https://ingereck.us15.list-manage.com/su&bscribe/......__amp_source_origin=https%3A%2F%2Fingereck.net' from origin 'https://ingereck.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

    POST https://ingereck.us15.list-manage.com/subscribe/ ... __amp_source_origin=https%3A%2F%2Fingereck.net net::ERR_FAILED

    [amp-form] Form submission failed: Error: XHR Failed fetching (https://ingereck.us15.list-manage.com/...): Failed to fetch​​​
        at ab (https://cdn.ampproject.org/v0.js:28:169)
        at Xa.f.createExpectedError (https://cdn.ampproject.org/v0.js:23:343)
        at https://cdn.ampproject.org/v0.js:143:154

    My server’s (NGINX) CORS headers are:

    add_header Access-Control-Expose-Headers "AMP-Access-Control-Allow-Source-Origin";
    add_header Access-Control-Allow-Headers "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token";
    add_header Access-Control-Allow-Credentials "true";
    add_header Access-Control-Allow-Origin "https://ingereck.net/";
    add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";

    This is the form:

    <div class="subscribe-card-container">
        <div class="subscribe-card">
            <form method="post" class="main-form" action-xhr="https://ingereck.us15.list-manage.com/subscribe/post-json?u=MYUSERID&id=MYLISTID&c=?&" target="_top">
    <div class="indicates-required"><span class="asterisk">*</span> denotes a mandatory field
        </div><p></p>
    <label for="form-email">Email Address <span class="asterisk">*</span></label>
                <div class="input">
                    <input type="email" name="EMAIL" id="form-email" required="">
                </div><p></p>                
    <label for="form-fname">First Name</label>
                <div class="input">
                    <input type="text" name="FNAME" id="form-fname">
                </div><p></p>
                <label for="form-lname">Last Name</label>
                    <div class="input">
                    <input type="text" name="LNAME" id="form-lname">
                </div><p></p>
    <!-- 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_MYUSERID_MYLISTID" tabindex="-1" value="">
    			</div>
                <input type="submit" value="Subscribe" class="btn">
                <div submit-success="">
                    <template type="amp-mustache">
                        <p class="form-submit-response">
                            Thank you for subscribing {{FNAME}}!<br>
    You are almost there! To complete the subscription process, please click the link in the email we just sent to you.
                        </p>
                    </template>
                </div>
                <div submit-error="">
                    <template type="amp-mustache">
                        <p class="form-submit-response">
                            Ooops! Sorry, there was an error.
                        </p>
                    </template>
                </div>
            </form>
        </div>
    </div>

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    Hello! I believe what you are experiencing is the same issue reported here: https://github.com/ampproject/amp-wp/issues/4191

    The issue is not your server’s Nginx headers but rather the headers being sent by ingereck.us15.list-manage.com, which I assume you can’t control.

    We have a pending solution to work around this issue by implementing a form submission proxy in the AMP plugin: https://github.com/ampproject/amp-wp/pull/4212

    While waiting for this to be released, you could implement this proxy yourself such as by adding a new REST API endpoint on your site.

Viewing 1 replies (of 1 total)
  • The topic ‘Troubleshooting Mailchimp amp-form embed’ is closed to new replies.