How to Make Subscribe Button Functional with Mailchimp API Key

Forum|Forum|5 years ago
May 19, 2020
2 replies
2588 views

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?

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

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

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

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

This topic has been closed for replies.

Nancy OShea

Community Expert

You have critcal code errors going on which will never work. See markup validation service below.

https://validator.w3.org/

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.

<!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&amp;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.

Nancy O'Shea— Product User & Community Expert