AMPHTML电子邮件 - 在Android上阻止AMP表单而不在IOS上工作

问题描述 投票：0回答：1

我正在研究AMPHTML电子邮件，我有两个主要问题：1。我无法调试代码或预览它。我验证了代码

https://validator.ampproject.org/#htmlFormat=AMP4EMAIL但是在AMP游乐场或作为AMP页面的结果与我收到的电子邮件中的最终电子邮件完全不同！

  1. 所有AMP图像都不起作用
  2. AMP Forms可以在iphone上加载它，但由于“Javascript Forms被禁用”，它阻止了android上的gmail应用程序

这是我在Mobile上测试的代码：

<!doctype html>
<html ⚡4email>
<head>
<meta  content="text/html; charset=UTF-8">
<meta charset="utf-8">
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <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.2.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>


<style amp-custom>
    body{
        margin: 10px 50px 50px 10px; 
      }

#container{
    margin: 10px 20px 10px 20px; 
  } 

      .bold-txt{
        font-weight: bold;
      }
        .center{
    text-align:center;
  }

.max-width{
    max-width: 450px;
    margin: auto;
}

      #amp-form-name, #amp-form-mail {
        display: block;
        width: 85%;
        margin: 10px auto;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }

    #amp-form-date, #amp_webinar_time {
        width: 92%;
        margin: 10px auto;
        display: block;
        height: 50px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }

    #amp-form-date, #amp_webinar_time {
        width: 92%;
        margin: 10px auto;
        display: block;
        height: 50px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }

    #amp-form-cta, .ampstart-btn .caps {
        background-color: #009be8;
        color: #f2f1f1;
        font-size: 20px;
        font-weight: 500;
        padding: 14px;
        width: 90%;
        margin: 2% 5% 10% 5%;
        height: 65px;
        border: 0;
        border-radius: 2px;
        text-transform: uppercase;
        cursor: pointer;
        -webkit-appearance: none;
    }
      </style>
  </head>

  <body class="container-margin">
    <div id="container">

      <p> Hi Mustafa, </p>

      WildFit has been a tremendous success, with over 10, 000 students since Eric Edmeades and I decided to team up to bring this to the wider world.

<p class="bold-txt">We’ve seen this change lives…change families… change marriages…</p>


<h2>Your Tribe Is Waiting For You</h2>


      <p> Lorem Ipsum has been the <span class="bold-txt"> industry's standard ever since the 1500s,</span> when an unknown printer took a galley of type and scrambled. 
</p>    

      <amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay delay="2100">
          <amp-img src="https://static.mindvalley.com/public/assets/2018/10/clUh_marleen-crabbe.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
    <amp-img src="https://static.mindvalley.com/public/assets/2018/10/4Gxo_chang.jpg" width="400" height="300" layout="responsive" alt="another sample image">      
    </amp-img>
    <amp-img src="https://static.mindvalley.com/public/assets/2018/10/erVA_debora-trimpe.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>


</amp-carousel>



        <h2 class="center"> Register Now </h2>

<div class="entry-headline h5 txt-white">Discover 5 Mind Hacks For Extreme Resilience in this FREE Masterclass</div>



    <div class="amp-wrapper max-width">
    <p class="amp-form-shortcode"> </p>
    <form method="post" action-xhr="https://blog.mindvalley.com/services/blink-forms/blink-endpoint.php">
        <div class="ampstart-input inline-block relative m0 p0 mb3"> <input type="text" class="block border-none p0 m0" name="uname" placeholder="Name..." id="amp-form-name" required=""><input type="email" class="block border-none p0 m0" name="email" placeholder="Email..." id="amp-form-mail" required="">
            <select name="amp-form-date" id="amp-form-date" required="">
                <option value="" disabled selected hidden="">Select a day</option>
                <option value="instant-replay"> Watch Now Instantly</option>
                <option value="watch-later"> Watch Later Today</option>
                <option value="2019-02-14"> Thu, 2019-02-14</option>
                <option value="2019-02-15"> Fri, 2019-02-15</option>
                <option value="2019-02-16"> Sat, 2019-02-16</option>
                </select>
                <p> </p>

      <input type="submit" value="RESERVE MY SPOT NOW"           class="ampstart-btn caps" id="amp-form-cta">
                  <div submit-success=""> <template type="amp-          mustache"> Thanks {{name}} For Enrolling In. You Will Be Redirected...           
     </template>
     </div>
        <div submit-error=""> <template type="amp-mustache"> Error!          
        Thanks {{name}} for trying joining our webinar. Please make 
        sure your mail is correct. </template>
     </div>
      </form>
         </div>
 </div>
 </body>
 </html>

它作为AMP HTML在浏览器上运行良好，但如果我通过电子邮件发送它，它根本不起作用！

这就是它在真实设备（Android / IOS）上的样子：

this is how it looks like on android / gmail APP

this is how it looks in IOS

它并不适用于两者！

gmail amp-html
1个回答
1
投票

您是否肯定能够测试AMP4Email？您是否已注册开发人员预览并获得批准？请注意，AMP中的表单在AMP HTML组件中是唯一的，因为它们没有AMP特有的标记标记。例如amp-list，amp-img。表单可能正在显示并给您错误的印象，因为它正在被解析为本机标记。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.