14

I am using mailchimps popup subscribe form. I have styled the content in mailchimp as far as I can. I want to add some more CSS to the popup, I have tried adding CSS to the CSS sheet already loading in my site yet the form will not pick it up in the popup even with !important etc.

The code from mailchimp is:

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us8.list-manage.com","uuid":"731f7bb19522a201007a53699","lid":"138afe0d12"}) })</script>

Now, I have tried also adding inline styling in my page for a test, example:

<style>
    #mc-EMAIL {
        border:6px solid pink !important;
    }
</style>

I have noticed my styles for the mailchimp are coming from this however mailchimp say I do not have access to change this CSS file.

My overall question which I am sure someone else must have faced before me:

How do I add CSS to my mailchimp popup form?

Community
  • 1
  • 1
Ryan Collingwood
  • 161
  • 1
  • 5
  • Have you tried adding your CSS inline (if you are able to)? For example
    ...
     – crazymatt Jun 08 '15 at 18:00
  • I have no access to the HTML like your example as it is produced by the JS script, I have also tried in my sites HTML which does not work. Thanks – Ryan Collingwood Jun 08 '15 at 18:13
  • Have you seen this article? http://kb.mailchimp.com/lists/signup-forms/advanced-form-customization – crazymatt Jun 08 '15 at 18:43
  • 2
    Hello, I have seen this yes and we are classed as 'advanced members' already, this article is more referring to the response email customization a user would get from signing up to your mailing list, plus obviously mail out templates. I have spoke with the mailchimp live support regarding my question and they have specifically said I cannot style my own popup with my own CSS, I have styled standard mailchimp forms before (not popup js generated) with no problems. Thank you all the same for the consideration. – Ryan Collingwood Jun 08 '15 at 18:49
  • Gotcha. Bummer they dont allow customization to their popups. Good luck with your project. – crazymatt Jun 08 '15 at 18:58

3 Answers3

2

Is it Mailchimp popup came out with <iframe> tag? If yes I think you can't custom it directly with css.

1. Inject your css to iframe by js.

How to Apply CSS to iFrame

2. Change to use mailchimp API integrate with your custom popup html/css. It might get a lot of effort but easy to maintenance. (can ask me)

Mailchimp API DOC

MailChimp API 3.0 and WordPress HTTP API

GOOD LUCK.

Akegvd
  • 91
  • 5
1

CSS cannot target elements within an iframe from a different domain. You can however use JS, but thats not a CSS answer :)

AlexHighHigh
  • 340
  • 2
  • 10
0

Because it's a iframe you can't change the css. But you can do that with JS. As you can see here.

KasperOfzeau
  • 1
  • 3