Mailchimp Email Signup Styling

This topic has 5 replies, 2 voices, and was last updated 4 years, 3 months ago by Aizaz Imtiaz Awan.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
January 19, 2021 at 12:11 am #259544

inputchip
Participant

Hello,

How do I style the Mailchimp email form in the footer to have the button inline with the email field? I also want the button style/color to be the same as the rest of the website. I would also like to style the text so it is the same font as others.

I used this guide, https://xtemos.com/docs/woodmart/faq-guides/mailchimp-signup-form/

Login info in private area.

Attachments:
You must be logged in to view attached files.

January 19, 2021 at 7:45 am #259607
Aizaz Imtiaz Awan
Keymaster
Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.
```
.btns-accent-light .mc4wp-form input[type=submit] {
    float: right;
    margin-top: -62px;
}
```
Best Regards.
January 19, 2021 at 8:23 am #259626

inputchip
Participant

Thank you that seemed to have worked, but how can I get the round button style and matching colors to the rest of my site like in your Retail Demo? Also the email field width needs to be shortened. Please see the screen shot.

Attachments:
You must be logged in to view attached files.

January 19, 2021 at 9:12 am #259644
Aizaz Imtiaz Awan
Keymaster
Hello,

You are Most Welcome.

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.btns-accent-light .mc4wp-form input[type=submit] {
    background-color: indianred;
    border-radius: 20px;
}
```
For the width of the input field try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.
```
.mc4wp-form-fields input[type=email] {
    width: 60%;
}
```
Best Regards.
January 19, 2021 at 6:21 pm #259809
inputchip
Participant
The proper way to make the field and submit button on the same line is editing the MC4WP form to this:
```
<input type="email" name="email" placeholder="Your email address" required />
<input type="submit" value="Sign up"  />
```
This is a much cleaner solution I think instead of adjusting margins and field widths.
January 20, 2021 at 5:53 am #259929

Aizaz Imtiaz Awan
Keymaster

Hello,

We are Glad that you managed to resolve the issue by yourself. You are Great!!!

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.
Author

Posts