Question

我是一名程序员，但通过交易而非网络开发人员。我试图用引导程序将一个简单的站点组合在一起，我想嵌入一个mailchimp注册表单。

来自mailchimp的嵌入代码如下所示：

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-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="<snip>" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <label for="mce-EMAIL">Subscribe to our mailing list</label>
    <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;"><input type="text" name="[some long alphanum code]" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>

这样可行，但与引导列或样式没有很好的融合：

我试图摆弄使用引导输入组和尾随按钮的东西，并让它工作，但我有点害怕原始html的这一行：

<!-- 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;"><input type="text" name="[some long alphanum code]" tabindex="-1" value=""></div>

如何重写表单以使用引导网格和按钮，但仍然可以避免机器人注册？

Answer 1

这个haml让我得到了我想要的样式，当我解开蜜罐并尝试提交时，mailchimp将我踢回来。所以看起来它正在发挥作用。

.row
  .col-md-4
    %p.text-muted
      Product isn't out yet. Sign up to our newsletter to stay informed.
  .col-md-8
    %form#mc-embedded-subscribe-form.validate{:action => "<snip>",
                                            :method => "post",
                                            :name => "mc-embedded-subscribe-form",
                                            :novalidate => "",
                                            :target => "_blank"}
      / 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;"}
        %input{:name => "<some alphanum>",
               :tabindex => "-1",
               :type => "text",
               :value => ""}/
      .input-group.input-group-lg
        %input.form-control{:name => "EMAIL",
                            :placeholder => "you@example.com",
                            :required => "",
                            :type => "email",
                            :value => ""}
        %span.input-group-btn
          %button.btn.btn-primary{:name => "subscribe",
                                  :type => "submit",
                                  :value => "Subscribe"}
            Subscribe

在mailchimp嵌入表单中使用bootstrap类？

1 个答案: