Copy link to clipboard
Copied
Can someone help me make this code functional
I like the css subscribe button from this html template
I have mailchimp subscribe code that is functional but I want to style with the above css, can someone help me?
<!-- Newsletter Area Start -->
<section class="royal-newsletter-area section_15">
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-7">
<div class="royal-newsletter-left">
<h4>Newsletter</h4>
<form>
<p>
<input type="email" name="newsletter" placeholder="Enter Your Email Address" id="newsletter" >
<button type="submit" ><i class="fa fa-send"></i></button>
</p>
</form>
</div>
<div class="royal-newsletter-left">
<h4>Newsletter</h4>
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; 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">
<form action="https://touch-the-universe.us17.list-manage.com/subscribe/post?u=17254369a831ab340dcc39d21&id=27..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_17254369a831ab340dcc39d21_2769e73a04" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<div class="col-md-5 col-sm-5">
<div class="royal-newsletter-right">
<h4>follow us on</h4>
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter Area End -->
Copy link to clipboard
Copied
Not sure why you hve two forms in your document.
But to answer your question, you are much better off going to Mailchimp for your question about Mailchimp.
https://mailchimp.com/developer/guides/
Copy link to clipboard
Copied
You have critcal code errors going on which will never work. See markup validation service below.
HINT: Get your Mailchimp API functioning first, then worry about how it looks.
From where I sit, it looks just fine as is. See below.
Mailchimp Embed Form
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MailChimp Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Begin Mailchimp CSS-->
<link href="https://cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style>
#mc_embed_signup {
background: #fff;
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>
</head>
<body>
<div id="mc_embed_signup">
<form action="https://touch-the-universe.us17.list-manage.com/subscribe/post?u=17254369a831ab340dcc39d21&id=27..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_17254369a831ab340dcc39d21_2769e73a04" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</form>
</div><!--End mc_embed_signup-->
</body>
</html>
Post back if you have any questions.
Copy link to clipboard
Copied
The red is the css from the site template that i like and want to keep the button
The blue is the functional mailchimp API
I just want to style the blue one to match the css of the red one, does that make sense?
Copy link to clipboard
Copied
This is the simple css I want to use as style
<form>
<p>
<input type="email" name="newsletter" placeholder="Enter Your Email Address" id="newsletter" >
<button type="submit" ><i class="fa fa-send"></i></button>
</p>
</form>
That appears properly on my site as the red triangle i highlighted, ya know
Copy link to clipboard
Copied
Style your API on Mailchimp BEFORE you generate the embed code.
Copy link to clipboard
Copied
have no idea how to do this though there is no way
Copy link to clipboard
Copied
This is all the code you need for the form:
<!-- Start mc_embed_signup -->
<section id="mc_embed_signup">
<h4>Newsletter</h4>
<form action="https://touch-the-universe.us17.list-manage.com/subscribe/post?u=17254369a831ab340dcc39d21&id=27..." method="post" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter Your Email Address" required>
<button type="submit" class="submit" ><i class="fa fa-send"></i></button>
</form>
</section>
<!--End mc_embed_signup-->
This is all the css you need for the form:
#mc_embed_signup {
font-family: helvetica, sans-serif;
display: flex;
align-items: center;
width: 40%;
margin: 0 auto;
}
#mc_embed_signup h4 {
margin: 0;
padding: 0 10px;
color: #fff;
font-weight: 400;
}
#mc_embed_signup .email {
padding: .75em 10px;
flex: 1;
font-size: 14px;
}
#mc_embed_signup .submit {
border: none;
background-color: #00a3c8;
color: #fff;
padding: 1em 35px
}
#mc_embed_signup .submit i {
font-size: 22px;
}
#mc_embed_signup form {
display: flex;
align-items: center;
flex: 1;
}
Get rid of the default Mailchmp css file link otherwise that will corrupt the forms presentation.
By the way the action link in your form is returning an error.......the page cant be found.
Copy link to clipboard
Copied
Os,
You removed the hidden field from original MailChimp code which prevents spambot submissions. I certainly wouldn't use the form without the honeypot, would you?
Copy link to clipboard
Copied
I'm not familar with the ins and outs of Mailchimp, would need to study it a bit more
Re-instate the spam catcher after the email input field:
<div class="alienAlert" aria-hidden="true">
<input type="text" name="b_17254369a831ab340dcc39d21_2769e73a04" tabindex="-1" value="">
</div>
The only thing I would do is remove the inline css and put it in a css selector
.alienAlert {
position: absolute;
left: - 5000px;
}
Personally I would not include the tabindex or aria either. I cant stand working with ugly messy bloated code.
Even the name of the spam input is meaningless and action link is ridiculously verbose, like a lot of rubbish you see these days and why even include novalidate as an attribute of the form tag IF you know you're not going to validate it before leaving your website, seems dumb to me as things obviously get validated on the Mailchimp side.........unless of course....
Copy link to clipboard
Copied
It is HIGHLY recommended that one use the MailChimp embed code as provided. Changing code that's not sufficiently understood without adequate prior testing is a recipe for problems later.
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_17254369a831ab340dcc39d21_2769e73a04" tabindex="-1" value="">
</div>
Copy link to clipboard
Copied
Most of that Mailchimp code is complete junk, probably accounts as to why I missed the bloody obvious because it was buried knee deep in a load of other unnecessary code garbage/comments making it difficult to read, still I guess you're a pro at that given you use Bootstrap, must come as second nature to you. I'm more used to working with streamlined and orderly code which uses meaningful names and classes with no obviscated bilge.
Crazy shite, they get you to link to a css style sheet yet then go on to stuff the code with inline styling, absolute trash in my opinion.
Copy link to clipboard
Copied
This isn't a beauty contest. MailChimp is a service. Embeds are "stupid-user proof." BTW, hiding the honeypot from humans with inline code is nothing new.
Copy link to clipboard
Copied
That's obviously the reason for the mostly 'stupid code' then. It's not to the standard I would expect so I'm hardly gong to sit here and not make that point. Web-development is all about going up a level, not sinking down a level. Its about steamlined code that is easy to manage and maintain but as I said we all have different standards of acceptability.
Using inline css to do anything is nothing new (but its not good practice). I'm just puzzled as to why its not in the linked Mailchimp css file, there's no reason why it should not be as its just the default position.