amp freebie subscription form

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!

8 Comments

Add comment