How to Make Subscribe Button Functional with Mailchimp API Key

Forum|Forum|5 years ago
May 19, 2020
2 replies
2610 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

T

timothyi34297763Author

Inspiring

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?

Nancy OShea

Community Expert

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.

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.

Nancy O'Shea— Product User & Community Expert

BenPleysier

Community Expert

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/

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded