1. Home
  2. Customization
  3. Add a Newsletter Signup Form to your SmugMug site

Add a Newsletter Signup Form to your SmugMug site


A great way to gain followers on your SmugMug site is to offer a free newsletter. A newsletter is a great way to keep your customers informed of promotions, deals or even your latest image post.


This tutorial is divided into three sections – the first section is about creating an account on a great newsletter service – MailChimp. The second and last section is about embedding your signup form on your SmugMug site.


For the first part of the tutorial we will need to start with MailChimp – this is one of my favourite services that provides a very easy way to create beautiful looking newsletters without using any code { drag and drop editor }. You will need an account on MailChimp to store all the email addresses of your subscribers. They offer a free subscription as well {Send 12,000 emails to 2,000 subscribers for free. No contracts, and no credit card required. It’s free forever}.


Great! Now your MailChimp account is active – you have to create your first mailing list { this is a list where all the email addresses of your subscribers will be saved }. To create a new mailing list →  please login to MailChimp →  click LISTS →  CREATE LIST { button located on the top right side of the page }.

Mailchimp - Create a New List

Once your form is created, you will need to generate a HTML code that is supported on SmugMug, which will allow you to embed the signup form on your SmugMug account.

At the end of the list creation process you will see a screen like this one:

Mailchimp Embed Code

Click the SIGNUP FORMS link.

Mailchimp will give you few options to create your form, but for now choose the second option:

Mailchimp Embedded forms

At the top of the page you will see few types of forms that you can generate – please choose the SUPER SLIM tab:

Copying HTML Code

Now copy the HTML code, which appears at the bottom of the page { make sure you are copying the whole code}.

Embedding Mailchimp form on a SmugMug page

Open a page on your SmugMug site, where you would like to embed the newsletter signup form.

Creating Page on SmugMug

I have written a short tutorial on how to create a page on SmugMug – check it out.

Now add a HTML content block to your page and paste the HTML code that you have created on Mailchimp.  Mine looked like this:

<!-- 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. */
<div id="mc_embed_signup">
<form action="//photom.us1.list-manage.com/subscribe/post?u=b0044a88892b54baf5a017cc0&amp;id=60aa78d3e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<label for="mce-EMAIL">Subscribe to our mailing list</label>
	<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_b0044a88892b54baf5a017cc0_60aa78d3e1" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

<!--End mc_embed_signup-->

And that is it! Your newly created signup form is up and running!

Signup Form

There are a few ways on how to customise the form – but I will leave that for another tutorial.

CSS Code to make the form look good – updated!

Open the same html content block, where you have added the MailChimp embed code and then paste the CSS code below to the CSS tab of the HTML content block:


#mc_embed_signup form {text-align:center; padding:10px 0 10px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
#mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
#mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
#mc_embed_signup .button:hover {background-color:#777; cursor:pointer;}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
@media (max-width: 768px) {
    #mc_embed_signup input.email {width:100%; margin-bottom:5px;}
    #mc_embed_signup .clear {display: block; width: 100% }
    #mc_embed_signup .button {width: 100%; margin:0; }

This will result in your form to look like on my example page.


Updated on December 13, 2018

Was this article helpful?

Related Articles


    1. Hey There. I have not played with the form customization yet, but from what I remember – you should be able to change the transparency of the form on MailChimp. I would have to test this.

  1. If you move the CSS code from to to the CSS tab of an HTML/CSS content widget, the formatting looks just like it does on MailChimp’s site – sort of. It looks right when you view it while in the development window but when you Preview it on Smugmug, it looks terrible and has lost all the formatting. Not sure why.

    1. Hey Kent thank you for sending this over. The code that you have sent contains JAVASCRIPT, which is not allowed on SmugMug. Embedding external CSS documents as well would not work – this is why you are experiencing this behaviour. But there is an easy solution for this

      You can make the form look much better by connecting your MailChimp account to Wufoo and then embedding the wufoo form on your SmugMug site, using the Wufoo form content block – I even have an old tutorial that I have written about this for you – please check it out:


      Do let me know how did it work for you.

          1. Tomasz, Thanks I got there from your article although things have changed on Wufoo a bit. To make it Wufoo really blend in, you have to purchase Wufoo which is not cheap. I wish SmugMug would support MailChimp directly. This is just another reason why I’m considering moving to my own WordPress website. 🙁 But thanks again for your help.

          2. I am not sure what you mean. I am using Wufoo myself – the free version and it works perfectly fine. It is your choice if you go with WordPress. I tried few times and always came back to SmugMug. Photos on SmugMug looks better and you can upload full res images to it – not to WordPress. You have to create display, compressed images – which for me it is already a pain in the backside. But good luck with that and I hope that you find WordPress more suitable for your needs.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.