Docs

[scotshurdler]

Hi Folks,

Mailchimp form is a really useful tool for the site I’m building but the button type on it is really unattractive, is it possible to have something a little slicker, nothing too fancy as the button type?
I’ve attached an image of one I’ve seen which is much slicker looking..

Many Thanks!
N

[Nico]

Hi There,

Thanks for writing in.

Yes, it is possible. Use the class of the mailchimp to add the custom CSS in your customizer’s custom CSS.

You could send us your URL so we could suggest code to recreate the design.

Hope it helps.

Thanks.

[scotshurdler]

This reply has been marked as private.

[Zeshan]

Hi N,

Thanks for the URL!

Can you point us to the page where you have added the Mailchimp form? I’ve checked a few pages but couldn’t find the form anywhere.

Meanwhile, you can style the button of form under “Appearance (Form)” in your form settings (see: http://prntscr.com/ajaxj4).

Thank you!

[scotshurdler]

Sorry I missed this earlier, it’s on the ”contact” page 🙂

Thanks!

N

[Prasant Rai]

Hello N,

Thanks for updating the thread!

You can add this under Custom > CSS in the Customizer:

.x-subscribe-form input[type="submit"] {
    width: 40%;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: #4876FF !important;
    border-color: #4876FF !important;
}

.x-subscribe-form-54 .submit:hover {
    border-color: #4876FF !important;
}

Let us know how it goes.

Thanks.

[scotshurdler]

Thanks for that, a nice effect to the botton! It doesn’t seem to pull the button along side the email field, is that possible?

Many Thanks!

N

[Rad]

Hi there,

Yes, possible, please add this CSS as well.

.x-subscribe-form-54  fieldset {
    display: inline;
}
.x-subscribe-form-54 .x-subscribe-form input[type="text"], .x-subscribe-form input[type="email"] {
    margin-bottom: 0;
}

Cheers!

[scotshurdler]

The strangest thing is happening with it, seems to be cutting off the button regardless of where we place it, any ideas?

Many Thanks!

N

[Jade]

Hi N,

Please update this code:

.x-subscribe-form input[type="submit"] {
    width: 40%;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: #4876FF !important;
    border-color: #4876FF !important;
}

to

.x-subscribe-form input[type="submit"] {
    width: 100%;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: #4876FF !important;
    border-color: #4876FF !important;
}

Hope this helps.

[scotshurdler]

wonderful thanks!

🙂

N

[Nico]

Happy to hear that.

Feel free to ask us again.

Have a great day! 🙂

[Author]

Posts