正文 

当前位置： 首页 > 问答 >

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

     2023-03-24     111

关键词：

【中文标题】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 的链接：

&lt;link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7_dtp.css" rel="stylesheet" type="text/css"&gt;

然后用以下内容替换你的 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;

【讨论】：

非常感谢！

从 Mailchimp 设计注册表单 -> 有些东西不起作用

】从Mailchimp设计注册表单->有些东西不起作用【英文标题】：Stylingsign-upformfromMailchimp->somethingsdon\'twork【发布时间】：2021-11-1603:44:08【问题描述】：网址：https://bucksfoodpartnership.org/newsletter-sign-up/目前，根据Mailchimp的默认设置... 查看详情

在 Wordpress 中将 Mailchimp 表单实现到我的页脚时，100% 宽度不起作用

】在Wordpress中将Mailchimp表单实现到我的页脚时，100%宽度不起作用【英文标题】：100%widthnotworkingwhenimplementingaMailchimpformintomyfooterinWordpress【发布时间】：2021-11-1703:50:09【问题描述】：所以我一直在尝试在我的网站上实现Mailchimp表... 查看详情

使用 Django 和 Mailchimp 的电子邮件订阅表单在部署后不起作用 (DigitalOcean)

】使用Django和Mailchimp的电子邮件订阅表单在部署后不起作用(DigitalOcean)【英文标题】：AnemailsubscriptionformwithDjangoandMailchimpdoesn\'tworkafterdeployment(DigitalOcean)【发布时间】：2021-03-2009:14:14【问题描述】：我用Django和Mailchimp构建了一个... 查看详情

复选框链接-显示内联和浮动左边不起作用(代码片段)

我正在将一个Mailchimp注册表单连接到我的Wordpress网站https://thetekworks.com-但是GDPR复选框没有按照我的预期执行...查看我的隐私政策的链接应该出现在我的复选框之后但它出现在一个新行上。我尝试使用浮动和显示标签来纠正这个... 查看详情

Mailchimp 时事通讯订阅在 html 中不起作用

】Mailchimp时事通讯订阅在html中不起作用【英文标题】：Mailchimpnewslettersubscribenotworkinginhtml【发布时间】：2017-10-1809:18:21【问题描述】：我通过此处的链接“Subscribetonewsletter,mailchimp”在我的网站上输入了订阅表单，但是当我尝试... 查看详情

Mailchimp 表单未提交

】Mailchimp表单未提交【英文标题】：Mailchimpformnotsubmitting【发布时间】：2015-03-0402:38:52【问题描述】：我正在尝试将MailChimp集成到一个简单的网站中，通过表单提交电子邮件以获取更多信息。然而，即使在整合到现有网站表单之... 查看详情

淘汰可见绑定样式显示内联不起作用

】淘汰可见绑定样式显示内联不起作用【英文标题】：KnockoutVisibleBindingStyleDisplayInlinenotworking【发布时间】：2014-03-2117:33:17【问题描述】：我在淘汰赛中使用visible绑定。我想将h3html元素设置为display:inline。但是，在绑定发生后，... 查看详情

laravel 中的表单提交不起作用并显示令牌不匹配异常

】laravel中的表单提交不起作用并显示令牌不匹配异常【英文标题】：Formsubmissioninlaravelisnotworkingandshowtoken-mismatchException【发布时间】：2018-04-1011:04:17【问题描述】：我是新的laravel学习者。我在laravel5.4中创建了一个表单并添加了... 查看详情

Django 中的内联表单验证

】Django中的内联表单验证【英文标题】：InlineFormValidationinDjango【发布时间】：2010-10-2700:53:15【问题描述】：我想在管理员更改表单中强制设置整个内联表单集。因此，在我当前的情况下，当我在发票表单（在管理员中）上点击... 查看详情

重力表单插件 - 动态填充表单字段不起作用

】重力表单插件-动态填充表单字段不起作用【英文标题】：Gravityformsplugin-dynamicallypopulatingformfieldisn\'tworking【发布时间】：2012-11-0604:12:46【问题描述】：我的重力表格表格出现了一些问题。这是一个多页表单，我需要使用第1页... 查看详情

AJAX Mailchimp 注册表单集成

】AJAXMailchimp注册表单集成【英文标题】：AJAXMailchimpsignupformintegration【发布时间】：2012-01-1513:51:23【问题描述】：有没有办法将mailchimpsimple（一个电子邮件输入）与AJAX集成，所以没有页面刷新，也没有重定向到默认mailchimp页面。... 查看详情

Mailchimp 在一页上嵌入两个表单

】Mailchimp在一页上嵌入两个表单【英文标题】：Mailchimptwoembeddedformsononepage【发布时间】：2020-09-2004:26:05【问题描述】：我想在一页上使用两个mailchimp嵌入式表单。第二种形式不起作用。这是第一种有效的形式：<!--BeginMailchimpSi... 查看详情

Django 表单在 html 模板中不起作用，它只是显示按钮

】Django表单在html模板中不起作用，它只是显示按钮【英文标题】：Djangoformarenotworkinginhtmltemplateitsjustshowbutton【发布时间】：2021-10-3118:46:29【问题描述】：我正在尝试在Django模板中创建一个表单，但它只是没有显示字段。我的文... 查看详情

Java：Swing 中的 HTML/CSS，内联显示不起作用

】Java：Swing中的HTML/CSS，内联显示不起作用【英文标题】：Java:HTML/CSSinSwing,displayinlinenotworking【发布时间】：2011-11-1019:01:46【问题描述】：我正在尝试使用HTML/CSS在SwingJButton中显示复杂的字符串。我正在使用Swing支持的CSS1属性。问... 查看详情

为啥thinkphp中字段映射不起作用

参考技术AThinkPHP的字段映射功能可以让你在表单中隐藏真正的数据表字段，而不用担心放弃自动创建表单对象的功能，假设我们的User表里面有username和email字段，我们需要映射成另外的字段，定义方式如下：ClassUserModelextendsModelpr... 查看详情

Bootstrapvalidator 在动态输入字段中不起作用

...】：我使用Bootstrapvalidator来验证具有多个动态输入字段的表单。显示的输入字段数量取决于选中的组合框（select）的值，然后通过Ajax显示多个输入字段。在第一次Bootstrapvali 查看详情

更新 mailchimp 电子邮件订阅不起作用

】更新mailchimp电子邮件订阅不起作用【英文标题】：updatemailchimpemailsubscriptionisnotworking【发布时间】：2019-11-1820:04:40【问题描述】：以下是我在Mailchimp中创建或更新订阅的代码。functionmailchimp_ajax_subscription()$data=isset($_POST[\'formData\... 查看详情

MailChimp 内容块拖放不起作用

】MailChimp内容块拖放不起作用【英文标题】：MailChimpcontentblocksdrag&dropnotworking【发布时间】：2013-10-2115:00:15【问题描述】：我必须在MailChimp服务中编辑现有的自定义模板，其中内容块的拖放不起作用。模板有很多嵌套表，所以... 查看详情