html - Mailchimp 超薄订阅表格 - 水平布局

标签 html css forms magento mailchimp

我想在最小尺寸为 320 像素的 960 像素宽的响应式 magento 网站上获取此表单。

我非常喜欢它的行为/风格类似于 VintageStyler 上的时事通讯形式- 如果您加载页面并滚动到底部,您将看到用于电子邮件提交的时事通讯注册表单。我想让我的表单显示在一行中,并且响应迅速,就像这个一样。

查看我当前的表格> The Signup Form - 目前我希望以一种长的水平格式看到“3 行”- 直到它出现在较小的屏幕上

这是 mailchimp 提供的“超薄”表单,包含所有样式,而不是从他们的远程 CSS 中拉取

下面是我使用的代码

<head>
<!-- Begin MailChimp Signup Form -->
<style type="text/css">
    #mc_embed_signup{/*background:#fff;*/ clear:left; font:14px Helvetica,Arial,sans-serif;  width:960px;}
#mc_embed_signup form {display:block; position:relative; text-align:left; /*padding:10px 0 10px 3%*/}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
/* Button Code */#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
#mc_embed_signup .button:hover {background-color:#777;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}     
#mc_embed_signup .clear {clear:none; display:inline;}

#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup input.email {display:block; padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:35%; min-width:130px;}
#mc_embed_signup input.button {display:block; width:35%; margin:0 0 10px 0; min-width:90px;}

#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;}
</style>
</head>
<body>
<div id="mc_embed_signup">
<form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <label for="mce-EMAIL">Stay Connected with Tuga Sunwear</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="#" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe Now" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
</body>
<!--End mc_embed_signup-->

如果您想尝试一下并发回此处,那就太棒了。我似乎无法弄清楚为什么内联 block 和摆脱 float 不会解决这个问题。

再次感谢!

最佳答案

您确实在寻找有关响应式设计的教程,因此我建议您仔细阅读其中涉及的内容。但这是您需要的基本示例:http://codepen.io/pageaffairs/pen/JDrhG

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
    *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
    #mc_embed_signup{ clear:left; font:14px Helvetica,Arial,sans-serif; width: 80%; margin: 0 auto;}
    #mc_embed_signup form {display:block; position:relative; text-align:left;}
    #mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
    #mc_embed_signup input:focus {border-color:#333;}
    #mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
    #mc_embed_signup .button:hover {background-color:#777;}
    #mc_embed_signup .small-meta {font-size: 11px;}
    #mc_embed_signup .nowrap {white-space:nowrap;}     
    #mc_embed_signup .clear {clear:none; display: inline-block; width: 31%; vertical-align: top;}

    #mc_embed_signup label {display:inline-block; font-size:16px; padding-bottom:10px; font-weight:bold; width: 31%;vertical-align: top;}
    #mc_embed_signup input.email {display:inline-block; padding:8px 0; margin:0 10px 10px 0; text-indent:5px; width:34%;vertical-align: top;}
    #mc_embed_signup input.button {display:block; width:100%; margin:0 0 10px 0;}

    @media screen and (max-width: 780px) {
        #mc_embed_signup {width: 100%;}
        #mc_embed_signup label, #mc_embed_signup input.email, #mc_embed_signup .clear {display: block; width: 100%;}
    }
</style>
</head>
<body>
<div id="mc_embed_signup">
    <form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <label for="mce-EMAIL">Stay Connected with Tuga Sunwear</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="#" tabindex="-1" value="">
        </div>
        <div class="clear">
            <input type="submit" value="Subscribe Now" name="subscribe" id="mc-embedded-subscribe" class="button">
        </div>
    </form>
</div>
</body>

不过,您需要将它与您的布局集成,因此需要进行一些更改。

关于html - Mailchimp 超薄订阅表格 - 水平布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24643279/

相关文章:

PHP插入数据

forms - 没有获取使用 go 发送的表单数据

javascript - 垂直滚动条在 Chrome 中消失( Bootstrap 选项卡)

javascript - 将 javascript 添加到用于谷歌分析的扩展 django 模板

html - 在我的网站上实现恒定的页眉/页脚?

css - 带有 Bootstrap 4.0 alpha 布局的 React-big-calendar 丑陋

javascript - 我如何在 Vue 上使用 Sass 来使用 Tailwind

javascript - 如何将默认的谷歌地图信息窗口滚动条移动到关闭按钮的右侧?

HTML 表单输入自动缩进

java - 使用单选按钮上的 onclick 函数生成动态表