4

我试图弄清楚如何将“提交”按钮放置在提交字段右侧的简单 html 电子邮件提交表单上，而不是在字段下方。此表单将连接到我的 Mailchimp 电子邮件列表，这样当有人输入他们的电子邮件时，它会立即添加到 Mailchimp。这是我到目前为止所拥有的。非常感谢您的帮助。

<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.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="http://buzzpoint.us6.list-manage1.com/subscribe/post? u=dc0ba2324b61f63ec1128f785&amp;id=126599f6a4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="mc-field-group">
<label for="mce-EMAIL"> <span class="asterisk"></span>
</label>
<input type="email" value="" name="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>  <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

<!--End mc_embed_signup-->
4

4 回答 4

5

等一下……这是要进入 html 电子邮件吗？

如果是这样，您肯定需要考虑将 html 重写为表格以使其适用于大多数客户端（如果您不相信我，请查看 Outlook 07）。

此外，由于存在保护最终用户的块，任何形式都无法在 html 电子邮件中使用。请考虑将其更改为“立即注册 FooBar”之类的链接。然后将您的表单放在网页上。在最好的情况下，您将获得微不足道的表单完成率，因为用户不习惯自己在电子邮件中填写表单。

就您的原始问题而言，您可以尝试使用float和margin-rightcss 属性来相应地定位按钮。看看这个jsfiddle。

<input style="float:right; margin-right:12px;" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
于 2013-03-12T07:50:44.543 回答
2 
<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.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" style="position: relative;">
  <form action="http://buzzpoint.us6.list-manage1.com/subscribe/post? u=dc0ba2324b61f63ec1128f785&amp;id=126599f6a4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div class="mc-field-group">
      <label for="mce-EMAIL"> <span class="asterisk"></span>
      </label>
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="width: 80%;">
        <input style="width: 15%; float: right; margin-top: -32px;" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
      </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>  
      <div class="clear">
    </div>
  </form>
</div>
于 2013-03-12T08:02:27.243 回答
0 
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button pull-right">

“pull-right”类属于 Bootstrap。

于 2013-03-12T07:51:41.907 回答
0

方法 1：为什么不使用简单的 css id 选择器来定位按钮。方法2：使用webkit box水平对齐你的按钮。方法3：你也可以制作一个0边框的表格来定位你的按钮。

于 2013-03-12T07:52:26.107 回答