Adding a Mailchimp Signup Form to Your SmugMug Site

• Demo

If you have a Mailchimp account, you can add a signup form to your SmugMug site. This tutorial deals with embedding your Mailchimp signup form to your SmugMug website. If you need help with creating your signup form, visit the Mailchimp Form Builder.

When you are logged into your Mailchimp account, look for Lists:

You’ll need to select a list:

Select Embedded Forms:

There are 5 style; Classic, Super Slim, Horizontal, Naked and Advanced. You want either Super Slim, Horizontal or Naked. If your form uses more fields then e-mail, you will need to use the Naked style.

NOTE: If you’re wanting to add a Mailchimp pop-up signup form, Mailchimp uses Javascript and SmugMug doesn’t support Javascript at this time.

Super Slim

You need to copy/paste that HTML code to your SmugMug’s page using a HTML/CSS block in the HTML section.

You need to remove this part:

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

Then you’ll need to copy this Super Slim CSS from Mailchimp and paste that to your CSS section of the HTML/CSS block. It will now look similar to this:

Horizontal

You need to copy/paste that HTML code to your SmugMug’s page using a HTML/CSS block in the HTML section.

You need to remove this part:

<link href="//cdn-images.mailchimp.com/embedcode/horizontal-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>

Then you’ll need to copy this Horizontal CSS from Mailchimp and paste that to your CSS section of the HTML/CSS block. It will now look similar to this:

Naked

You need to copy/paste that HTML code to your SmugMug’s page using a HTML/CSS block in the HTML section.

Then you'll need to copy this Naked CSS from Mailchimp and paste that to your CSS section of the HTML/CSS block. It will now look similar to this:

Customizing

The CSS you entered in your CSS section is basic. If you need help with changing colors, placement etc, post your question at the D-Grin Forum.