Question

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

我已开始编写表格

＆＃13;

#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;
}

＆＃13;

<!-- 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-->

＆＃13;

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

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-->

结果：

enter image description here

祝你好运， Michel

Mailchimp自定义表格

1 个答案: