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.
Mailchimp
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 }.
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:
Click the SIGNUP FORMS link.
Mailchimp will give you few options to create your form, but for now choose the second option:
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. Then add a HTML content block to your page and paste the HTML code that you have created on Mailchimp. Mine looked like this:
<pre><code class="html">!-- 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="//photom.us1.list-manage.com/subscribe/post?u=b0044a88892b54baf5a017cc0&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>
</div>
</form>
</div>
<!--End mc_embed_signup--></code></pre>
HTMLAnd that is it! Your newly created signup form is up and running!
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; }
}
CSSThis will result in your form to look like on my example page.
Related articles
Comments (21)
Leave a Reply Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Support me
I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.
Thank you for the information. The smug mug heroes referred me to your link.
However, I have a question. Is it possible to include that people include their name and possible their month of their birthday?
This is important because when I send the email to my database I personalize it with their name plus on the month of their birthday I offer a special to possible have them come to my business.
Also I have a second question if you don’t mind me asking.
How can I create a referral page?
I have a referral program.My clients if they referr me a person that they know need my services for a example a wedding get points that they can exchange for later get free portraits. I need people to input their name, email and referral’s name as well as email and possible phone number with type of event
Thanks for any info you can provide.
Sincerely
Cesar’s Photography
Cesar, you could create a more sophisticated form on Mailchimp and then embed it on your site. Alternatively you may create something more robust using Wufoo forms.
For the referral page – use secondary form – also from Wufoo – it will be easier for you to embed it on your SmugMug website using the Wufoo content block.
I don’t think this works anymore, it looks like MailChimp changed and now you need to add a special code before to connect your site first.
I have tested few forms and they are working fine. Could you please give me an example where this is not working for you?
Mailchimp wants you to add a JavaScript to just before closing tag to connect your domain / account before you can add sign up forms now. Since we do not have access to it nor can we add JavaScript to the site in general we cannot use Mailchimp at all.
Hey Tomek. This is incorrect – see my screenshot: http://cloud.photom.me/9ab6596d123d
Mailchimp still allows you to create HTML/CSS only forms – without JAVASCRIPT.
How do we get an html only code without JavaScript from Mailchimp? My code doesn’t work in snug it and it just says “no html” when I put it in the html block.
Hey Alison, please use the contact page to send me a copy of the code that you are generating on your MailChimp account – I will check it for you.
Tried following your directions, but am doing something wrong. Added the code to the HTML box but says no html present. help please
Seth, Can you please share with me the URL to the page, where you have added the code?
Here is the generated code for a pop up ad.
!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,”script”,”https://chimpstatic.com/mcjs-connected/js/users/6a58ef3d3ab24a3d73384620f/ea5c63036d553958f271fa270.js”);
Seth, there is no possibility to create a popup on SmugMug. You will need to use the embed form instead – as I have described in my tutorial.
Ok even if it isn’t a pop up ad I couldn’t get the code to work. Did you test the one I sent you?
Hey Seth, Yes – I have seen your code and I have replied that this code is not accepted on SmugMug, because it contains JavaScript. You will need to generate new code that only contains HTML and CSS code – as I have mentioned in my tutorial.
Hi! Even when I add your CSS, there is no space between the Email text box and the button. I am trying to figure out how to fix this. Thanks.
Hey Arwin, can you share with me a link to the page, where you have embedded the form?
This tutorial appears to be from 2019 and needs updating! The various tabs and links on Mailchimp have changed. And the tutorial makes no reference to newly supported Mailchimp pop ups. However, I was able to figure it out but got a “No HTML Present” warning after pasting the copied code. Please advise, thanks.
Hey Eric,
Thank you for the comment and yes, sometimes things are changing and I did not have time to update it. But although things may have changed, the tutorial still is correct. You should not use any popups, because they require javascript – which is not supported by SmugMug. As per my tutorial, you have to choose the pure HTML form.
Why is this so difficult to do this properly? Even when I add both the HTML and the CSS code it still has a title on the upper left hand corner of the box. I’d like to screenshoot it for you but no upload.
On another note I see you can go to Mailchimp directly and just have your form created just how you want it, but when I put the code into Smugmug it is not represented how Mailchimp showed it was suppose to look like. Why is this?
Tom, all of the Mailchimp stuff you provide in this article is out-dated. I cannot follow along because I cannot see where “create list” is in the new updated version. I got to edit the HTML to say what I want it to but when I put an email in there and subscribe it prompts an error because there is no page.
I can see that Mailchimp has recently changed the layout of their admin panel, but this does not change the functionality of their product. The items are just placed in a different place. I am working on updating this tutorial – but it may take a while before the new version has been published.
If you are creating a custom – non standard form on Mailchimp – you have a different CSS code that needs to be applied. Can you please send me a link to your SmugMug page, where you have added the Mailchimp form code?