Mailchimp 自定义表格

Question

我是新手，我正在尝试创建自定义邮件黑猩猩注册表。

我希望它看起来像这样http://imgur.com/YbwSzA2

我已经开始编写表单了

#mce-FNAME {
	margin: 10px;
	float: left;
	width: 50%;
}
#mce-LNAME {
	margin: 10px;
	float: left;
	width: 50%;
}
#mce-email {
	float: left;
	margin: 10px;
	width: 80%;
}

#mc_embed_signup .button {
	width:20%;
	float:left;
}

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//kayakinguk.us8.list-manage.com/subscribe/post?u=f3759cd613780ba95cc76028b&amp;id=0f3ca35b8b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<h2>Subscribe to our newsletter</h2>
<div class="indicates-required"><span class="asterisk"></span></div>
<div class="mc-field-group">
	<label for="mce-FNAME">First Name  <span class="asterisk"></span>
</label>
	<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
	<label for="mce-LNAME">Last Name  <span class="asterisk"></span>
</label>
	<input type="text" value="" name="LNAME" class="required" id="mce-LNAME">
</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk"></span>
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-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>    <!-- 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="b_f3759cd613780ba95cc76028b_0f3ca35b8b" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

如果有人有任何建议或更改，那就太好了。

Answer 1

冒昧地修改了您的代码和选择器，如果您有任何问题，请随时提出，但这几乎是不言自明的。

PS：建议，使用类来设置 CSS 样式并为 JavaScript 保留 ID

.input {
    margin: 10px 0;
    float: left;
    width: 100%;
    line-height: 25px;
    border: 4px solid #000;
    border-radius: 10px;
}

.input:focus,
.button:focus {
    outline: none;
}
.button {
    margin-top: 34px;
    display: block;
    width: 100%;
    background: transparent;
    border: 4px solid #000;
    padding: 4px;
    height: 35px;
    font-size: 15px;
    border-radius: 10px;
    outline: none;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.button:hover {
    cursor: pointer;
    background: #000;
    color: #fff;
}

.mc_embed_signup {
    width: 100%;
    max-width: 580px;
}

.mc-field-group label {
    display: block;
    font-size: 22px;
}

.row {
    display: block;
    float: left;
    width: 100%;
}

.col-lg-6,
.col-lg-8,
.col-lg-4 {
    float: left;
    padding: 12px;
    box-sizing: border-box;
}

.col-lg-6 {
    width: 50%;
}

.col-lg-8 {
    width: 80%;
}

.col-lg-4 {
    width: 20%;
}


<div id="mc_embed_signup" class="mc_embed_signup">
    <form action="//kayakinguk.us8.list-manage.com/subscribe/post?u=f3759cd613780ba95cc76028b&amp;id=0f3ca35b8b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">

            <h2>Subscribe to our newsletter</h2>

            <div class="row">
                <div class="mc-field-group col-lg-6">
                    <label for="mce-FNAME">First Name:<span class="asterisk"></span></label>
                    <input type="text" value="" name="FNAME" class="input required" id="mce-FNAME">
                </div>
                <div class="mc-field-group col-lg-6">
                    <label for="mce-LNAME">Last Name:<span class="asterisk"></span></label>
                    <input type="text" value="" name="LNAME" class="input required" id="mce-LNAME">
                </div>
            </div><!--row-->


            <div class="row">

                <div class="mc-field-group col-lg-8">
                    <label class="label" for="mce-EMAIL">Email Address<span class="asterisk"></span></label>
                    <input type="email" value="" name="EMAIL" class="required input email" id="mce-EMAIL">
                </div>

                <div class="col-lg-4">
                    <input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button">
                </div>

            </div><!--row-->


            <div class="row" class="hidden">
                <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;">
                    <input type="text" name="b_f3759cd613780ba95cc76028b_0f3ca35b8b" tabindex="-1" value="">
                </div>
            </div><!--row-->



        </div><!--mc_embed_signup_scroll-->
    </form>
</div><!--mc_embed_signup-->

结果：

祝你好运， Michel