Mailchimp form like yours

[Philippe]

Hey Guys!

Just a quick question.  On this demo: https://seventhqueen.com/themes/kleo/stylish-woocommerce/

I really like how the mailchimp form looks.  I noticed that when I imported the demo content, it did not look the same.

Is there a piece of code I’m missing?

Thanks for the tip!

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, do you want it to look exactly like demo or with different colors? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Philippe]

Yep! Exactly like your demo. Just use #00adef for the button ucolor!
Thanks!

[Laura]

Hello, add this to style.css of child theme

COPY CODE

.mc4wp-form-fields input[type="email"] {
    padding: 14px 20px !important;
    height: 52px;
    border-color: #e5e5e5;
    border-style: solid;
    border-width: 1px;
    margin: 0 0 1em;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
    display: inline-block;
}
.mc4wp-form-fields p {
    display: inline-block;
}
.mc4wp-form input[type="submit"] {
    margin: 12px 30px 30px !important;
    background-color: #00adef !important;
    border-color: #00adef;
    outline: none;
    text-decoration: none;
    padding: 14px 20px;
    font-size: 16px;
    min-width: 80px;
    -o-border-radius: 2px;
    transition: all 0.4s ease-in-out 0s;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Philippe]

Almost Perfect!

I just would like to reduce the current gap (between the mail adress bloc & button) by half.
See the screenshot attached.

Thanks !

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, just replace the input submit one with this

COPY CODE

.mc4wp-form input[type="submit"] {
    margin: 12px 15px 30px!important;
    background-color: #00adef!important;
    border-color: #00adef;
    outline: none;
    text-decoration: none;
    padding: 14px 20px;
    font-size: 16px;
    min-width: 80px;
    -o-border-radius: 2px;
    transition: all .4s ease-in-out 0s;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

Basically, changed 30px to 15px

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts