Highlighted

How to Make Subscribe Button Functional with Mailchimp API Key

Participant ,
May 19, 2020

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

Views

999

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to Make Subscribe Button Functional with Mailchimp API Key

Participant ,
May 19, 2020

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

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 19, 2020

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/


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 19, 2020

Copy link to clipboard

Copied

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 FormMailchimp 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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
May 19, 2020

Copy link to clipboard

Copied

blyuu.png

 

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
May 19, 2020

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 19, 2020

Copy link to clipboard

Copied

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

 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
May 19, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
May 20, 2020

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 20, 2020

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?

 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
May 20, 2020

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 20, 2020

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>

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
May 20, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 20, 2020

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. 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
osgood_ LATEST
LEGEND ,
May 21, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...