html - 需要帮助设置自定义 MailChimp 订阅表格

Question

所以我在我的网站上注册了一个预先设计的订阅，然后我注册了 MailChimp 并希望将它们用于电子邮件营销。我无法将我的代码与他们给你的默认代码合并。我以为我已经完成了所有工作，但是当我提交用户时，我的邮件黑猩猩邮件列表联系人没有更新。这是我尝试转换它的代码：

.c-checkbox {
  display: none;
}
.c-checkbox:checked + .c-formContainer .c-form {
  width: 14.5em;
}
.c-checkbox:checked + .c-formContainer .c-form__toggle {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.7);
}
.c-checkbox:checked + .c-formContainer .c-form__input, .c-checkbox:checked + .c-formContainer .c-form__buttonLabel {
  transition: 0.2s 0.1s;
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.c-checkbox:not(:checked) + .c-formContainer .c-form__input:required:valid ~ .c-form__toggle::before, .c-checkbox:checked + .c-formContainer .c-form__input:required:valid ~ .c-form__toggle::before {
  content: 'Thank You! \1F436';
}
.c-checkbox:not(:checked) + .c-formContainer .c-form__input:required:valid ~ .c-form__toggle {
  pointer-events: none;
  cursor: default;
}
.c-formContainer, .c-form, .c-form__toggle {
  width: 12em;
  height: 3.5em;
}
.c-formContainer {
  top: 2%;
  right: 1%;
  font-weight: 700;
}
.c-form, .c-form__toggle {
  position: absolute;
  border-radius: 6.25em;
  background-color: #fff;
  transition: 0.2s;
}
.c-form {
  top: 2%;
  left: 82%;
  transform: translateX(-50%);
  padding: 0.625em;
  box-sizing: border-box;
  box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
}
.c-form__toggle {
  color: #95b8c9;
  top: 0;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-form__toggle::before {
  font-size: 1.2em;
  content: attr(data-title);
}
.c-form__input, .c-form__button {
  font: inherit;
  border: 0;
  outline: 0;
  border-radius: 5em;
  box-sizing: border-box;
}
.c-form__input, .c-form__buttonLabel {
  font-size: 1.2em;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
  transition: 0s;
}
.c-form__input {
  color: #d1e0e8;
  height: 100%;
  width: 100%;
  padding: 0 0.714em;
}
.c-form__input::placeholder {
  color: currentColor;
}
.c-form__input:required:valid {
  color: #95b8c9;
}
.c-form__input:required:valid + .c-form__buttonLabel {
  color: #fff;
}
.c-form__input:required:valid + .c-form__buttonLabel::before {
  pointer-events: initial;
}
.c-form__buttonLabel {
  color: #d1e0e8;
  height: 100%;
  width: auto;
}
.c-form__buttonLabel::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  cursor: pointer;
}
.c-form__button {
  color: inherit;
  padding: 0;
  height: 90%;
  width: 5em;
  background-color: #95b8c9;
  font-size: 16px;
}

<input class="c-checkbox" type="checkbox" id="checkbox">
      <div class="c-formContainer">
        <form class="c-form" action="https://my mailchimp subscriptin url" method="post">
          <input class="c-form__input" placeholder="E-mail" type="email"
            pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" required>
          <label class="c-form__buttonLabel" for="checkbox">
            <button class="c-form__button" type="button">Send</button>
          </label>
          <label class="c-form__toggle" for="checkbox" data-title="TAP IN"></label>

        </form>
      </div>

然后这是 mailchimp 默认的建议形式：

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,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://my mailchimp subscriptin url" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	
	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- 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_6dcd4cb8ab9377f4951e72570_03d6667079" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

标签： htmlcssemailmailchimpnewsletter