How to Make Subscribe Button Functional with Mailchimp API Key

Report · May 19, 2020

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

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

Report · May 19, 2020

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, the only real Dreamweaver alternative.

Report · May 19, 2020

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.

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&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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 19, 2020

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?

Report · May 19, 2020

This is the simple css I want to use as style

That appears properly on my site as the red triangle i highlighted, ya know

Report · May 19, 2020

Style your API on Mailchimp BEFORE you generate the embed code.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 19, 2020

have no idea how to do this though there is no way

Report · May 20, 2020

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

Report · May 20, 2020

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?

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 20, 2020

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

Report · May 20, 2020

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>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 20, 2020

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.

Report · May 20, 2020

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 21, 2020

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.

Adobe Community

How to Make Subscribe Button Functional with Mailchimp API Key