Mailchimp Custom Form CSS

Question

I have created a MailChimp form for the footer of my website, I have modified the CSS with a bit of help to get it looking how it does now. I've become stuck now I attached two images the first one is how I want the form to look and the second one is what the current code makes it look like.

Some help to point me in the right direction would be greatly appreciated.

What I want the form to look like

What the form code producess

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

I'll give you a hint: you'll need to override mailchimps own CSS (that's not on the WP style.css)... and keep on trying!!! — maioman, Feb 07 '15 at 22:44
Exactly what @maioman said. If you link to your site, we can show you what you need to edit. — user3781632, Feb 07 '15 at 22:50
@user3781632 https://www.kayakinguk.com/ I've managed to get a few steps closer but still a bit stuck. — Elliott Davidson, Feb 07 '15 at 23:50

user3781632 · Accepted Answer · 2015-02-08T00:21:20.837

1

The "Email Address" label has a class of "label" while the other labels do not. Simply delete this class and it will look like the other two.

Find this line:

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

Change it to this:

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

Where to find it:

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

The .label class that's changing its background color and font properties is a preset found in bootstrap.css on line 5494 in case you're curious.

edited Feb 08 '15 at 00:21

answered Feb 08 '15 at 00:15

user3781632

1,618
2
12
15

Thanks I have managed to style it now how I want it. The is only one issue there seems to be a link of some kind on "First Name:", "Last Name:" & "Email Address:". Not sure why as I haven't added a link. If you have any idea why it's doing that it would be amazing, thanks for your help @user3781632 – Elliott Davidson Feb 08 '15 at 00:27
1

The "link" is a user interface choice by MailChimp. By clicking on the name of the fields, you're automatically able to start tying into the text field without clicking on the text field itself. You can create a custom class and add it to all three labels to disable the links. This post explains how to do it: http://stackoverflow.com/questions/2091168/disable-a-link-using-css. Good luck! – user3781632 Feb 08 '15 at 00:32
Brilliant managed to implement the change and works wonders. Really appreciate the help @user3781632 – Elliott Davidson Feb 08 '15 at 00:47

Mailchimp Custom Form CSS

1 Answers1