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

Question

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

多亏了我在这个网站上的一些帮助，我设法让输入字段和订阅按钮在同一行。现在我只需要删除字段和按钮之间的一些空白 space 并将所有内容居中。

这是我网站的 link，表格就在底部：

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 表单的位置

How to adjust position of embedded MailChimp form

html

css

wordpress

forms

mailchimp