embed form on page css question

[Ant]

I am trying to embed a form (from mailchimp) on an existing page. Here's a portion of the beginning code i pasted onto the page:

 

-------------------

 

<!-- Begin MailChimp Signup Form -->

<link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">

<style type="text/css">

#mc_embed_signup{background:; clear:left; font:14px Helvetica,Arial,sans-serif; }

/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.

We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

</style>

<div id="mc_embed_signup">

 

 

-------------------

 

The page has it's own external stylsheet. (obviously)

 

When I embed the form supplied by mailchimp it has it's own stylsheet attached. (see code above)

 

The problem is the sites css also has a few similar classes to the embedded form.

 

So I had to change some of the forms classes to be slightly different becuase if I don't the pages css overrides the forms css.

 

My question is why doesn't the form ignore the main sites css? Isn't the forms stylesheet attached properly? Maybe I don't remember the rules of "cascading" when it comes to css, i.e. which one takes precedence over the other.

 

Do the forms css styles need to be inline to take control over the main sites external stylesheet?

 

A.

[Andrea]

If your stylesheet is listed first and the mailchimp one further down, it should overwrite what's in yours.

 

Alternatively, you could just copy theirs, make any changes, and use your own version.

[Ant]

Thanks Andrea.

 

So even though my mailchimp style sheet is last in the flow it gets overridden by the first in the head of the page?

 

I thought about copying theirs and pasting their styles into my core stylesheet.

 

A.

[Andrea]

Starting at the top of your head section - if your stylesheet shows up first and the mailchimp one is further down towards the closing head tag, then mailchimp should overwrite yours.

 

Is that how you have it and it's not working?

[Ant]

Andrea, it probably is working but on the surface it looks messed up.

 

The problem is I am using a wordpress theme and there is so much CSS that I didn't write it's hard to decipher everything.

 

It takes me a while to get acquainted with all the css before I can fully start manipulating the themes and stylizing them myself.

 

So I'm sure it's working but there are probably conflicting classes/ID that have the same name and somethings clashing.

 

Or it's some sort of buggy thing going on with the theme/CMS/CSS.

 

You reminded me of the rules of stylesheets (cascading) so that's help in itself.

 

Thanks for helping me.

 

A.

[newseed]

When you want to use a Mailchimp form WITHOUT the formatting then you just need the html portion only. You can then style that form yourself.

 

<form action="(ADD THE MAILCHIMP ACTION URL HERE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<p>
<input class="search" type="email" name="EMAIL" id="mce-EMAIL" value="Enter Your Email Address" onclick='this.value = ""' placeholder="email address" required>
<input class="submit" type="submit" name="subscribe" id="mc-embedded-subscribe" value="">
</p>
</form>

 

You can also set up Mailchimp to use your own custom Thank You and Welcome pages.

Edited March 31, 2012 by Eddie