自定义 Mailchimp 嵌入式订阅表单在 Wordpress 中不起作用

Question

让我告诉你一些发生在我身上的事情，因为我花了 2 天时间试图解决它，但我没有成功......

在此页面上：https://abbeyelizabethsykes.com/podcast/ 我已经通过 Elementor“HTML”小部件插入了一个 Mailchimp“嵌入式表单”，我使用 SUBLIME EDITOR 自定义了该表单，并且在浏览器中看起来是正确的，但是在将其上传到网络，它真正应该去的地方，它不识别应用的 CSS 自定义。

我不知道我还能做什么。我的代码级别非常基础。

有什么想法吗？

提前非常感谢！！

胡安·曼努埃尔

#mc_embed_signup_scroll  {
    display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #ECDDDC;
  text-align: center;
  padding: 10px 0 9px;
  margin: 0 0 100px 0;
}

#mc_embed_signup_scroll input {
  border: 0px;
  width: 100%;
  border-box: box-sizing !important;
  text-align: left;
  border: 0px;
  width: 250px;
  margin: 0 20px 0 0;
  box-sizing: border-box;
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 11,5px;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 30px;
  letter-spacing: 0px;
  padding: 15px;
  font-family: 'Cormorant Garamond', sans-serif;  
}
#mce-FNAME {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-right: 30px !important;
    padding-left: 30px !important;
}
#mce-EMAIL {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-right: 30px !important;
    padding-left: 30px !important;
}
input[type="submit" i] {
  background-color: #b2815d;
  color: #fff;
  cursor: pointer;
  text-align: center !important;
  padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-right: 30px !important;
    padding-left: 30px !important;
} 
input[type="submit" i]:hover {
  color: #fff;
  background-color: #999999;
} 
@media (max-width: 800px) {
  #mc_embed_signup_scroll input {
    margin: 10px 0;
  }

  #mc_embed_signup_scroll {
    flex-direction: column;
    align-items: stretch;
  }
}

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup {background:#fff; clear:left; font:14px 'Cormorant Garamond', sans-serif }
    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://abbeyelizabethsykes.us6.list-manage.com/subscribe/post?u=5b20c704b98ce3fb74a4be13c&amp;id=f8338bb7a7" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    
<div class="mc-field-group">
    <input type="text" value="" name="FNAME" placeholder="First Name" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" placeholder="Email" class="required email" id="mce-EMAIL">
</div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- 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_5b20c704b98ce3fb74a4be13c_f8338bb7a7" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

Answer 1

您好，您可以试试subscribi，它为嵌入式订阅表单提供了简单的解决方案