How to Make Your Subscription Form Look Cool

Welcome back to our MailChimp subscription service series. This is the last in the current five-part series. If you missed the previous posts or if you would like a review, you can find them here.

If there are other MailChimp topics you’d like us to present (or any other tech related topics), let us know. We’re always happy to consider new course clinic topics.

Recap

So far, we’ve talked about how to set up a signup form for potential subscribers, including why that’s important to your marketing program, your readers, and you. We created a subscriber list, made a signup form to put on your blog or website, and learned how to add fields to that signup form.

As I’ve mentioned along the way, it’s never too late to begin building your email list. And once you have the forms set up, you can change the appearance of all of them easily.

Why Bother With Appearance?

Making your forms look more like your blog or website gives the process a seamless appearance. It’s a good way to begin building your brand or to begin getting it out in front of readers if you’ve already established a brand.

It’s also a good way to set your website or blog and everything attached to it apart from the crowd. You can keep the default settings for your signup forms. They won’t be any less efficient if they’re plain rather than pretty. But why would you want to let them be plain when making them pretty is so easy?

Fair Warning

I could write another month’s worth of posts on changing the appearance of signup forms in MailChimp. There’s a lot of ways to make your signup form unique, engaging, and, well let’s just say it, pretty.

So what I’m going to do with this post is give you a brief rundown on the basic settings. If you have specific questions or would like to see something explained in more detail, leave a comment in the comment box below. I will answer your questions. Who knows, you may be responsible for the next tech clinic!

Design Options

When you sign into your MailChimp account and go to the signup form page, you’ll land on the same page you used to create your form. This is where you make any changes to the form you created.

About halfway down the page, you’ll see your form as it currently looks. Just above that are three tabs, Build it, Design it, Translate it. You used the Build it to create your form.

These are the three main categories for working with your form. Build it is the tab you choose to create your form. Design it is the tab to choose if you want to change the appearance of an existing form. If you need to change the language of a form, click the Translate it tab. To make your form pretty, you want to click the “Design it” tab, shown below.

MailChimp Design Options, Screen Shot 1

Two rows of options appear below the three main tabs. In the illustration above, the options apply to designing the page. The option list changes depending on the main tab you’ve selected. In the illustration above, the option list is for designing.

The first row under the Design It tab is a list showing the parts of the form. The page is the entire form. The body is the part of the form that contains the fields, your header, and the subscribe buttons. The forms are the fields themselves. Yes, you can make each one different if you want to.

The second row also contains tabs for various parts of the form. A different list shows if you click the “body setting” and again if you click the “forms setting” tab.

Notice the part of the form outlined in red? The outlined area is the part of the form affected by the tab selections. In this illustration, the Page tab is selected. The background part of the page has also been selected.

MailChimp Design Options, Screen Shot 1

In this illustration, the body part of the form has been selected.

MailChimp Design Options, Screen Shot 1b

And in this illustration, the Forms tab is selected. Clicking on a tab highlights the part of the form associated with that tab.

MailChimp Design Options, Screen Shot 5

Changing Color

Any time you see a small colored square paired with a box containing # and any combination of numbers or letters, you can change the color. The square box shows the existing color. The numbers and/or letters behind the hashtag is the html code for the existing color. If you know the html code for the color you want in that area, simply type it behind the hasttag and you’re done.

In this case, the Forms tab is clicked. The part of the signup form connected to that tab is the part shown in the previous illustration, the subscribe button.

That button has text in it, so you can also change the color of the text.

MailChimp Design Options, Screen Shot 4b

If you don’t know anything about html, don’t worry. Click on the box showing the html code and another box appears. It shows a range of colors from black to white and all the variations for whatever color you choose. The default is set at red, but you can change that by moving a slider bar along the height of the vertical “rainbow” to the left. The color in the color range box changes based on whatever color you select from the vertical slider.

To try different colors within the color range box, click on the box, right click and hold, and move the mouse around. A small white circle appears at the mouse point (green arrow) in the illustration below). Whatever color is inside that circle appears in the small color box and on the form. When you find something you like, unclick and the color is applied.

Changing color is the same wherever you are allowed to change color.

MailChimp Design Options, Screen Shot 4

TIP: When you find a color you like, jot down the html code. Type that code into other areas you want to be the same color.

Changing Text

Whenever you click on a tab and see the line marked with the red arrow in the illustration below or something like it, you can change the appearance of the text. In this illustration, you can change the line height, the font style, font size, text color, and padding (the amount of white space around the text).

The part of the form to which these changes will apply is outlined in red in Mailchimp.

For most of these items, your choices are limited by the options in the drop down menu (line height, font family, and font size). You can change the text color here in the same way I described above. You can also change the padding by simply typing a number in the appropriate box.

MailChimp Design Options, Screen Shot 3

In this illustration, the font size drop down menu is activated. The field to which any changes will be applied is also outlined in red.

MailChimp Design Options, Screen Shot 6

In this illustration, I’ve changed the font size to 48, the bottom margin to 48 and the top margin to 30.

These are very basic text settings you can make with any of the text on the form.

MailChimp Design Options, Screen Shot 7

One of the nicer things about the MailChimp form is that you can change some parts of text with a few simple changes. The field labels are the names of each field. Things like “First Name,” “Last Name,” and “Email” are field labels.

This illustration shows the options for field labels. What a lot of choices! If you have a very large form, that would be a lot of changes.

MailChimp Design Options, Screen Shot 8

Here’s the neat thing. All the fields are highlighted. That means if you make one change, it applies to all the fields.

MailChimp Design Options, Screen Shot 9

Here’s the form with changes to the field labels. I changed the line height from 1-1/2 space to double space; font family from Arial to Comic Sans MS,  and text color from black to blue.

MailChimp Design Options, Screen Shot 10

The same basic process applies to any place where you can change text.

One Place That’s Different

There always seems to be at least one exception to the rule, doesn’t there? When it comes to dressing up your forms, this little box (red arrow) is the exception.

The default setting is a blank box. If you don’t do anything with it, it doesn’t show up on your form. There’s nothing wrong with that and you may not want any more information on the form than is absolutely necessary.

But you can put a line of text here. You can insert links and even an image into this area. To make changes to this field, click on the field itself or on the “edit” button to the right of the field.

MailChimp Design Options, Screen Shot 11

An editing screen opens as a popup. Options are displayed along the top. Making changes here is a lot like making changes on most blog posts. Hover over a button to see what it does.

If, after you’ve made a bunch of changes, you decide you don’t like them, simply click on the “Clear Styles” button (second to last button) to revert to the previous settings.

MailChimp Design Options, Screen Shot 12

Conclusion

The mind boggling news is that you can change almost everything on your forms. Even the MailChimp logo at the bottom can be changed. Just click on Monkey Rewards and you can choose from six different badge styles and determine badge alignment.

The good news is that it’s easy to make most changes.

My recommendation? Start with the most basic first and work your way through them in small batches. See what works for you and what doesn’t. Personally, I like to make a few changes and save them, then look at the form by clicking on the subscribe button. If the first impression of the new changes works for me, I leave them. If they don’t, I change them. Yes, it takes longer, but it’s easier to remember what changes were made if you made just a couple rather than a couple dozen.

This concludes the series on MailChimp signup forms. If you have any questions, ask them in the comment box below. If you’d like clarification on something, let us know.

Do you have a topic you’d like to have me address? Let me know.

Leave a Reply

Your email address will not be published. Required fields are marked *