如何使自定义 mailchimp 表单内联

Question

我的公司网站有一个选择加入表单，但它不会内联。

我需要姓名、电子邮件和订阅都在一行中。有什么想法吗？

我不确定它是否与 bootstrap 配合得不好。

HTML

<div class="container-fluid">
        <div class="row">

            <div class="horizontal-mailchimp">

                <div id="mc_embed_signup">
                    <form action="//growthitude.us12.list-manage.com/subscribe/post?u=7325f579d436346d635d003a4&amp;id=75cff09018" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

                        <div id="mc_embed_signup_scroll">

                            <div class="mc-field-group">
                                <label for="mce-FNAME">First Name </label>
                                <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="name">
                            </div>

                            <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address </label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="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 style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7325f579d436346d635d003a4_75cff09018" tabindex="-1" value=""></div>

                            <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

CSS

.horizontal-mailchimp .mc-field-group,
.horizontal-mailchimp .clear {
     display: inline-block;
}

.horizontal-mailchimp label {
     display: none;
     height: 1px;
     text-indent: -9999px;
}

.horizontal-mailchimp {
     background: red;
     margin: 20px auto;
     padding: 20px;
     text-align: center;
}

@media only screen and (max-width: 768px) {

     .horizontal-mailchimp .mc-field-group,
     .horizontal-mailchimp .clear,
     .horizontal-mailchimp input {
          display: block;
          width: 100%;
     }

     .horizontal-mailchimp .mc-field-group {
          margin-bottom: 5px;
     }

}

提前致谢

Answer 1

https://plnkr.co/edit/e0ELyGgwvVMgCt4k86Zo?p=preview

它在大屏幕上按预期工作，但当您的宽度低于 768px 时，它会将 mailchimp 放入 display:block 而不是 display:inline-block

@media only screen and (max-width: 768px) {

 .horizontal-mailchimp .mc-field-group,
 .horizontal-mailchimp .clear,
 .horizontal-mailchimp input {
   display:inline-block;
 }

 .horizontal-mailchimp .mc-field-group {
      margin-bottom: 5px;
 }

}

我所做的只是在@media 标签下将显示更改为内联块。

Answer 2

给你，你只需要将 class "c-field-group" 给主要父 div 提交按钮并移动那个 div 到电子邮件主要父 div 的正下方并添加此 css 代码：

#mc_embed_signup .mc-field-group { clear: none !important; width: auto !important; }

如下所示：

.horizontal-mailchimp .mc-field-group,
.horizontal-mailchimp .clear {
     display: inline-block;
}

.horizontal-mailchimp label {
     display: none;
     height: 1px;
     text-indent: -9999px;
}

.horizontal-mailchimp {
     background: red;
     margin: 20px auto;
     padding: 20px;
     text-align: center;
}

@media only screen and (max-width: 768px) {

     .horizontal-mailchimp .mc-field-group,
     .horizontal-mailchimp .clear,
     .horizontal-mailchimp input {
       display:inline-block;
     }

     .horizontal-mailchimp .mc-field-group {
          margin-bottom: 5px;
     }

}
#mc_embed_signup .mc-field-group {
    clear: none !important;
    width: auto !important;
}

<html>

<head>



    <!-- FONT AWESOME -->


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">



    <!-- GOOGLE FONTS -->


    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">


    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <!-- Begin MailChimp Signup Form -->
    <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">


</head>


<body>


   
    <div class="container-fluid">
        <div class="row">

            <div class="horizontal-mailchimp">

                <div id="mc_embed_signup">
                    <form action="//growthitude.us12.list-manage.com/subscribe/post?u=7325f579d436346d635d003a4&amp;id=75cff09018" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

                        <div id="mc_embed_signup_scroll">

                            <div class="mc-field-group">
                                <label for="mce-FNAME">First Name </label>
                                <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="name">
                            </div>

                            <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address </label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="email">
                            </div>
             
             <div class="mc-field-group"><input 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 style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7325f579d436346d635d003a4_75cff09018" tabindex="-1" value=""></div>

                            
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>








</body>

</html>

如何使自定义 mailchimp 表单内联

How to make custom mail chimp form inline

html

css

forms

twitter-bootstrap

mailchimp