Styling Mailchimp list builder

Support
#1

Hello!

I have been trying to style the Mailchimp email list builder. I have it set up properly (with the right API code), but I want to style it differently. What I want, is to have the button appear in the box, such as shown on https://zezame.io.

How can I achieve this?

Thanks!

#2

Hi There,

Thanks for writing in! In the example url, it uses a custom styling to create the box which contains the email field and the button. We can copy the css and apply it to your email form in your site. Please put the email form in your site and provide us the url in your next reply so that give a solution tailored for your specific needs.

Regards.

#3

That’s great, thanks so much for the help!

The url I want to put it in is the following: http://yourup.org/get-started/

(PS: it’s supposed to become a copy of the page I shared earlier, meant to then later copy the database back to the zezame.io domain). That will not affect any settings, right?

#4

Hi There,

Please add the zezame-left class to your column contains the mailchimp form:

After that add this custom CSS under Theme Options > CSS:


.zezame-left form {
    background: white;
    width: 100%;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 6px 7px 10px black;
    margin-top: 22px;
    }
.zezame-left .mc4wp-form-fields p {
    margin: 0;
}
.zezame-left .mc4wp-form-fields p:nth-child(1) {
    width: 63%;
    float: left;
}
.zezame-left form input[type="email"] {
    border: none;
    font-family: open-sans;
    color: black;
    box-shadow: none;
    margin: 0;
    outline: none;
}

.zezame-left form input[type="submit"] {
    background-image: url(https://zezame.io/wp-content/uploads/2018/07/button.png);
    border: none;
    color: white;
    font-family: open-sans-medium;
    width: 35%;
    padding: 7px;
    background-size: 100% 100%;
    border-radius: 9px;
}
#5

I managed! Thank you for the amazing service!

#6

You’re most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.