Adding a Mailchimp Signup Form to Your SmugMug Site - Mike Matenkosky

Adding a Mailchimp Signup Form to Your SmugMug Site

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:

Mailchimp Lists

You’ll need to select a list:

Mailchimp Lists Signup Form

Select Embedded Forms:

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

Mailchimp Super Slim

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.

Horizontal

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

Mailchimp Horizontal

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.

Naked

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

Mailchimp Naked

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:

Mailchimp Naked Styled Example

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.

Powered by SmugMug Log In