Question

我的WordPress网站页脚中有一个嵌入式MailChimp注册表单，在我主题的页面构建器中使用原始HTML小部件。

由于我在这个网站上得到了一些帮助，我设法在同一行上获得了输入字段和订阅按钮。现在我只需要删除字段和按钮之间的一些空白区域并将所有内容放在中心位置。

这是指向我网站的链接，表单位于底部：

http://origamidotme.staging.wpengine.com

这是我表单的代码：

<!-- Begin MailChimp Signup Form -->
<style type="text/css">
#mc_embed_signup{background:#1b1d1f; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
#mce-EMAIL {display:inline-block; float:left; margin: 6px 20px 0 0;}
/* 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://origami.us11.list-manage.com/subscribe/post?u=c46543dec276193775d525c9f&amp;id=85cb8a5e0e" 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" size="100%" placeholder="Your Best Email" 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_c46543dec276193775d525c9f_85cb8a5e0e" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn border-width-0 btn-accent btn-round btn-flat"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->

知道我需要添加什么来使该按钮更接近字段的末尾，然后如何使整个事物在我的页脚中居中？

提前感谢您的帮助。

Answer 1

像这样更新代码：

<!-- Begin MailChimp Signup Form -->
<style type="text/css">
  #mc_embed_signup {
    background: #1b1d1f;
    clear: left;
    font: 14px Helvetica, Arial, sans-serif;
    width: 100%;
  }

  #mce-EMAIL {
    display: inline-block;
    padding: 12px;
  }
  /* 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://origami.us11.list-manage.com/subscribe/post?u=c46543dec276193775d525c9f&amp;id=85cb8a5e0e" 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" size="100%" placeholder="Your Best Email" required>
      <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn border-width-0 btn-accent btn-round btn-flat">
      <!-- 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_c46543dec276193775d525c9f_85cb8a5e0e" tabindex="-1" value=""></div>
    </div>
  </form>
</div>
<!--End mc_embed_signup-->

如何调整嵌入式MailChimp表单的位置

1 个答案: