Mailchimp 表单字段内联显示不起作用

Posted 2023-03-24

【中文标题】Mailchimp 表单字段内联显示不起作用

【英文标题】：Mailchimp form field display inline not working

【发布时间】：2021-12-23 05:47:31

【问题描述】：

希望有人能指出我正确的方向，因为我在这个问题上花了太长时间。我在我的网站上添加了一个 Mailchimp 表单，但我希望“输入电子邮件”表单字段与按钮位于同一行。本质上，“加入候补名单”按钮应位于“输入电子邮件”表单字段的右侧。我已经尝试了一些东西，但似乎无法让它发挥作用。提前感谢您的帮助。

第一张图片是我希望表单的样子。第二张图片是当前状态。提前感谢您的帮助！

html 代码：

<!-- Begin Mailchimp Signup Form -->
        <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7_dtp.css" rel="stylesheet" type="text/css">
        <div id="mc_embed_signup">
        <form action="https://tretuser.us20.list-manage.com/subscribe/post?u=1197d33bb52c8de2a2747b690&amp;id=8a796eb2c8" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="form_fields">
            <div id="mc_embed_signup_scroll">
            <label for="mce-EMAIL">Sign up for early access</label>
            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter 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_1197d33bb52c8de2a2747b690_8a796eb2c8" tabindex="-1" value=""></div>
            <div class="clear foot">
                <input type="submit" value="Join Waitlist" name="subscribe" id="mc-embedded-subscribe" class="button">
            </div>
            </div>
        </div>
        </form>
        </div>

CSS 代码：

/* Mailchimp form */
 #mc_embed_signup 
color: white;
justify-content: center;
text-align: center;


#mc_embed_signup label 
font-size: 3em;
 

#mc_embed_signup_scroll .email 
width: 50%;
margin-top: 1.5em;


.form_fields 
display: inline-block;


.button 
background-color: #FAE105;
border: none;
padding: 15px 30px;
border-radius: 5px;
letter-spacing: 1px;
font-size: 16px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;


button:hover 
transform: translateY(-2px);
 

 .email 
border: 1px solid #b4becb;
padding: 15px;
width: 30%;
font-size: 16px;
margin-right: 8px;
border-radius: 5px;
 

.email input:focus 
outline-color: #FAE105;
 

【参考方案1】：

查看例如 Mailchimp 提供的 CSS 并根据自己的喜好进行更改并删除嵌入代码中链接的 CSS 总是一个好主意。

因此，如果您删除 Mailchimp css 的链接：

<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7_dtp.css" rel="stylesheet" type="text/css">

然后用以下内容替换你的 css，它几乎就像你的设计一样结束：

#mc_embed_signup form 
  text-align:center; 
  padding:10px 0 10px 0;

.mc-field-group  
  display: inline-block; 
 /* positions input field horizontally */

#mc_embed_signup input.email 
  font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;
  border: 1px solid #b4becb;
  padding: 15px;
  width: 30%;
  font-size: 16px;
  margin-right: 8px;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
  color: #343434; 
  background-color: #fff; 
  box-sizing:border-box; 
  display: inline-block; 

#mc_embed_signup input.email:focus 
  outline-color: #FAE105;

#mc_embed_signup label 
  display:none; 
  font-size:16px; 
  padding-bottom:10px; 
  font-weight:bold;


#mc_embed_signup .clear 
  display: inline-block;


#mc_embed_signup .button 
  background-color: #FAE105;
  border: none;
  padding: 15px 30px;
  border-radius: 5px;
  letter-spacing: 1px;
  font-size: 16px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  color: #000; 
  box-sizing:border-box; 
  display: inline-block; 
  margin-left: 0.5rem; 
  transition: all 0.23s ease-in-out 0s;

#mc_embed_signup .button:hover 
  cursor:pointer;
  transform: translateY(-2px);

#mc_embed_signup div#mce-responses 
  float:left; 
  top:-1.4em; 
  padding:0em .5em 0em .5em; 
  overflow:hidden; 
  width:90%;
  margin: 0 5%; 
  clear: both;

#mc_embed_signup div.response 
  margin:1em 0; 
  padding:1em .5em .5em 0; 
  font-weight:bold; 
  float:left; 
  top:-1.5em; 
  z-index:1; 
  width:80%;

#mc_embed_signup #mce-error-response 
  display:none;

#mc_embed_signup #mce-success-response 
  color:#529214; 
  display:none;

#mc_embed_signup label.error 
  display:block; 
  float:none; 
  width:auto; 
  margin-left:1.05em; 
  text-align:left; 
  padding:.5em 0;

@media (max-width: 768px) 
  #mc_embed_signup input.email 
      width:100%; 
      margin-bottom:5px;
  
  #mc_embed_signup .clear 
      display: block; 
      width: 100% 
  
  #mc_embed_signup .button 
      width: 100%; 
      margin:0; 
  

【讨论】：

非常感谢！