Add Mailchimp Subscribe Now HTML CSS to my own button

Report · Mar 08, 2021

I want to add the code to make the button in yellow functional. Alternatively, make the subscribe button on the button look like the above.

Here is my button:

Here is the code mailchimp spit out:

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

Any advice would be greatly appreciated. Cheers.

Report · Mar 08, 2021

If you want to make a button on the end of an input you could use Bootstrap has a class to do this: https://getbootstrap.com/docs/4.1/components/input-group/#button-addons . Otherwise you just need to style a button and input so that you remove their inherit margins to move the objects closer to one another.

Report · Mar 08, 2021

Thanks, both of these look hard to do. I'm a total newbie. Can someone do this for me. I can paypal 5-10 dollars, assuming it takes just a few minutes.

Report · Mar 08, 2021

I bassically want the button button and imput field, that is all garbled and out of place, to look like the above styled one that is not functional.

Report · Mar 08, 2021

What is the function that you want to apply to the submitted form? Have you got the code for that? Has the site got a mail server? What is the serverside coding language?

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

Report · Mar 09, 2021

If you're embedding a MailChimp sign-up form into your document, follow MailChimp's instructions to the letter.

1. Create the sign-up form on MailChimp's website.

2. Copy and paste THEIR code into your document.

3. Upload document to your server to test it.

Put MailChimp's CSS code into the <head> of your document.

Put MailChimp's <form> code into the <body> of your document.

It should look like this:

If you want the form styled differently, you'll need to do that manually in the CSS code. But DO NOT tamper with the <form> code otherwise you'll break it.

Good luck with your project!

Nancy O'Shea— Product User, Community Expert & Moderator