Wouldn’t be amazing if you could find the perfect working, AMP valid subscription form for your AMP products? AMP is a great way of building websites, it is fast and reliable. However it is very limited. Consequently, there are a lot of troubles with the subscription form. But as the saying goes, sharing is caring, down below you have a great option for your AMP Valid Subscription Form. Check it out! You’ll love using it!
You’ll have 2 parts that need to be covered – the HTML and the PHP. Let’s take them one by one.
The HTML
Define the page as HML & AMP
<!doctype html> <html ⚡> <head>
Load the scripts required for the form to work – amp form & amp mustache
<script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script> <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
Define the size as mobile size!
<link rel="canonical" href="index.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black">
Custom Stylesheet
<style amp-custom>
*{
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
.newsletter-wrapper{
width:320px;
text-align:center;
margin:0 auto;
}
.newsletter-wrapper h1{
font-size:17px;
font-family:'Roboto', sans-serif;
margin-bottom:-10px;
}
.newsletter-wrapper p{
font-size:12px;
font-family:'Roboto', sans-serif;
margin-bottom:20px;
}
.newsletter-wrapper input[type=email]{
text-align:center;
display:block;
width:100%;
height:45px;
padding-left:10px;
margin-bottom:10px;
}
.newsletter-wrapper input[type=submit]{
display:block;
width:100%;
height:40px;
-webkit-appearance:none;
background-color:#8CC152;
color:#FFFFFF;
border:none;
font-weight:800;
text-transform:uppercase;
}
</style>
Load AMP Boilerplate
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
Close the <head> section.
Open the <body> section.
Upload the mailchimp-post.php to your server and remember the location. Then replace the location below.
<div class="newsletter-wrapper">
<form name="submit" method="post" action-xhr="//www.enableds.com/labs/subs/mailchimp-post.php" target="_top">
<h1>Subscribe to our Newsletter</h1>
<p>Join our newsletter for the latest and greatest stuff!</p>
<input type="email" name="email" placeholder="email@domain.com" required>
<input type="submit" value="Subscribe">
<div submit-success>
<template type="amp-mustache">
Thanks! Check {{email}} to confirm your subscription to the newsletter.
</template>
</div>
</form>
</div>
</body>
</html>
Make sure you import all the AMP necessary script. Either it will not work. Also, you can change this text “Thanks! Check {{email}} to confirm your subscription to the newsletter.” if you are not satisfied with it. Customise it however you please, but make sure you strictly follow all other steps.
Now, let’s move on to the PHP.
The PHP
<?php
if (!empty($_POST)) {
Define the server access requirements for AMP
header("access-control-allow-credentials:true");
header("access-control-allow-headers:Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token");
header("access-control-allow-methods:POST, GET, OPTIONS");
header("access-control-allow-origin:".$_SERVER['HTTP_ORIGIN']);
header("access-control-expose-headers:AMP-Access-Control-Allow-Source-Origin");
Change to represent your site’s protocol, either http or https
header("amp-access-control-allow-source-origin:https://".$_SERVER['HTTP_HOST']);
header("Content-Type: application/json");
$email = isset($_POST['email']) ? $_POST['email'] : '';
$output = ['email' => $email];
header("Content-Type: application/json");
echo json_encode($output);
$post_data[‘u’] and $post_data[‘id’] are required hidden field per:
http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms
$post_data['u'] = '507fae63762803e3e842d3ec5'; $post_data['id'] = 'fc9e95dd86';
$post_data[‘MERGE0’] represents the value of my email submission input tag’s name attribute.
In my case the attribut of name=”MERGE0″, so $post_data[‘MERGE0’] is used as a variable.
$post_data['MERGE0'] = urlencode($_POST['email']);
foreach($post_data as $key => $value) {
$post_items[] = $key.
'='.$value;
}
$post_string = implode('&', $post_items);
Replace URL with your own. In the case of MailChimp, see:
http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms
$curl_connection = curl_init('https://enableds.us1.list-manage.com/subscribe/post');
curl_setopt($curl_connection, CURLOPT_CONNECTTIMEOUT, 30);
curl_setopt($curl_connection, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl_connection, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl_connection, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($curl_connection, CURLOPT_POSTFIELDS, $post_string);
curl_exec($curl_connection);
curl_close($curl_connection);
}
?>
And there you have it. A perfect working subscription AMP valid form. Share with us your experiences with this in the comment section!
Use and abuse it! Enjoy!
Hey Enabled,
This is such a brilliant piece of scripting. It works perfectly! Just as you say. Thanks for putting in the time and effort to making this work with AMP and Mailchimp, you are a genius! Keep up the good work,and pushing for more advancements in the AMP world. You rock!
Cheers Lowell! Sorry we didn’t meetup on Skype to get this to you, but happy I could share this awesome little script with the world! You’re awesome! All the best mate! Enabled
This is gold, thank you very much!
Hello! Thank you, we are happy you find our article usefull! Cheers
You are AMP god ! Thank you a lot. I own you 1 beer !
We’re very happy to have helped you mate! We owe you a beer for being an awesome customer! Cheers! 🙂
Just signed up to thank you, AMP could make a ones life a f*cking hell but god if its fast!
Thank you man, cheers 😉
Very happy you love it! AMP is still an infant technology that apparently isn’t getting the speed kicks in development it deserves from Google.