Mailchimp 自定义表单 CSS

Question

我为我网站的页脚创建了一个 MailChimp 表单，我在一些帮助下修改了 CSS 以使其看起来像现在一样。现在我陷入困境，我附上了两张图片，第一张是我希望表单的外观，第二张是当前代码使其看起来的样子。

如果能帮我指明正确的方向，我们将不胜感激。

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


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

.mc4wp-form .input:focus,
.mc4wp-form .button:focus {
    outline: none;
}
.mc4wp-form .button {
    color:#ffffff;
    margin-top: 34px;
    display: block;
    width: 100%;
    background: #2451f4;
    height: 30px;
    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;
}

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

.mc4wp-form {
    width: 100%;
    max-width: 470px;
}

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

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

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

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

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

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

Answer 1

"Email Address" 标签的 class 为 "label"，而其他标签则没有。只需删除此 class，它就会像其他两个一样。

找到这一行：

<label for="mce-EMAIL" class="label">Email Address:</label>

改成这样：

<label for="mce-EMAIL">Email Address:</label>

在哪里可以找到它：

<form action="https://www.kayakinguk.com/" method="post"><div class="mc-field-group col-lg-6">
    <label for="mce-FNAME">First Name:</label>
    <input type="text" id="mce-FNAME" class="input required" name="FNAME" value="">
</div>
<div class="mc-field-group col-lg-6">
    <label for="mce-LNAME">Last Name:</label>
    <input type="text" id="mce-LNAME" class="input required" name="LNAME" value="">
</div>

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

正在更改其背景颜色和字体属性的 .label class 是第 5494 行 bootstrap.css 中的预设，以防您好奇。

Mailchimp 自定义表单 CSS

Mailchimp Custom Form CSS

html

css

wordpress

mailchimp