AMPHTML Email - AMP формы заблокированы на Android и не работают на IOS - PullRequest
Новая
       40

AMPHTML Email - AMP формы заблокированы на Android и не работают на IOS

0 голосов
/ 14 февраля 2019

Я работаю над электронной почтой AMPHTML, и у меня есть две основные проблемы: 1. Я не могу отладить код или просмотреть его.Я подтвердил код на

https://validator.ampproject.org/#htmlFormat=AMP4EMAIL Но результат на игровой площадке AMP или на страницах AMP полностью отличается от окончательного электронного письма, которое я получаю на свой электронный адрес!

  1. Все образы AMP не работают
  2. Формы AMP могут загружать его на iphone, но оно заблокировало приложение gmail на Android из-за "Формы Javascript отключены"

Вот код, который я тестирую на мобильном телефоне: 

<!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

И это не работает на обоих !!!

1 Ответ

0 голосов
/ 21 февраля 2019

Вы уверены, что включены для тестирования AMP4Email?Вы подписались на предварительный просмотр и одобрен разработчиком?Обратите внимание, что формы в AMP уникальны среди HTML-компонентов AMP, поскольку в них нет разметки, уникальной для AMP.например, amp-list, amp-img.Формы могут отображать и создавать ложное впечатление, что они работают, потому что они анализируются как собственный тег.

...