Jump to content

embed form on page css question


Recommended Posts

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. */


<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?



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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">
<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="">


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

Edited by Eddie
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...