Add a subscribe button to your website

Subscribe buttons are a neat, compact alternative (or addition) to embedding a full HTML subscribe form on your site. To set one up just customize the button to suit, then grab the code and drop it into any web page.

We've made subscribe buttons small so they slot into your website's sidebar or footer, but they're capable of collecting lots of subscriber detail if needed. The subscribe form pops up center-page when the button is clicked.

Creating a subscribe button for your website

The instructions in this section are a basic start-to-finish guide for creating a subscribe button. See the customization sections on this page for tips and instructions on that.

To get started, navigate to the subscriber list you want to promote on your site and, in the right sidebar, click Sign up forms as shown here:

On the "Sign up forms" page, click the subscribe button heading to open the following window:

You'll start with a small, blue subscribe button, which is the default style setting. To see how it will work on your website, follow the on-screen prompt and "try it out". When the subscribe form pops up, enter a test name and email then click the second subscribe button to complete the process. Don't worry, the test details you enter won't be added to your list.

On the right of the page is the subscribe button code you'll need to copy-and-paste into your website. Either grab the code now to use it as is, or click Make some changes to the button to customize it.

When you're done customizing the form, click Finish and grab the code.

This takes you back to the page you started on, where you can test changes by clicking the demo button to fill in your new subscribe form:

Like the original demo version, test details entered here will not be added to your list.

When you're happy with the changes, just copy the revised code and paste it into your website, wherever you want the subscribe button to appear.

Button customization

If you want to change how the subscribe button looks, read this section to learn about button customization options.

The subscribe button editing window looks like this:

Changes made on the right are reflected immediately in the preview pane on your left. As shown above, you can change the button from blue to black, set the size to small or large, and change the button label from “Subscribe” to whatever you like.

TIP: If you want the subscribe form in another language, label the button accordingly here. For more details about non-English subscribe buttons see the following section on form customization.

The last customization option is to show, alongside the button, the number of active subscibers on your list. To turn it on, tick the Show a subscriber count checkbox.

When someone completes the sign up process on your site, the subscriber count increases by one to show that the details were submitted successfully. It works this way for both single opt-in and confirmed opt-in lists.

To finish editing the button, click Customize the form.

Form customization

The subscribe button form, which pops up center-screen when the button is clicked, includes a default title and the two default fields, name and email, as shown here:

Here's what you can do to customize the form:

Change the Title to anything you like (maximum length is 70 characters).
Add a Summary or subtitle (maximum length is 120 characters).
Choose which fields to Show and optionally set them as "required". Except for the email field, of course, which is always required.
Change the Button label to something other than "Subscribe".
Select a different Language from the drop-down menu. This changes the name and email field labels. For all other text, see the section below on non-English subscribe buttons.

Custom fields

If you've set up custom fields for the subscriber list (for example: age, interests, city) they will be listed beneath the default fields: Name and Email.

Just tick the checkbox alongside any fields you want included on the form, and click Required if you want to make them mandatory. You can also change the display order of custom fields by clicking the drag handle to the right of the field, to move them up or down.

Non-English subscribe buttons

Selecting a different language automatically changes the default field labels: name and email. It also changes the language of error messages that might be displayed when someone is filling in the form. For example:

"Oops, that's not a number." - Error message displayed when letters are typed into a numeric field.

All other content must be manually changed to your language of choice. Here's a checklist to help you make sure all bases are covered:

Button labels - You need to change both the text on the subscribe button itself, and the button (originally) labeled "Subscribe" on the pop-up form.
Custom field labels - If they were written in English, they will show up on your subscribe form in English. To change them, navigate to your subscriber list page and click Custom fields in the right sidebar. You'll find the fields updated with your changes when you get back to the form.
Verification email content - This applies to confirmed opt-in lists only. The default verification email, sent to people to confirm their subscription, is in English. To edit it, navigate to your subscriber list page and click Customize landing pages in the right sidebar.

Confirmed opt-in lists

The sign up process for subscribe buttons is different to what you get when using an HTML subscribe form. With HTML forms you can use your own custom confirmation pages and also customize the verification email.

When a subscribe button is used with a confirmed opt-in list, a verification email is still sent to the subscriber but there is no message displayed to say, "You've just been sent an email to confirm your email address".

Instead, the subscriber sees a tick icon appear where the button was, as shown here:

Editing an active subscribe button

One of the really cool things about subscribe buttons is that you can make changes to it after it's been added to your website, and updates will be applied automatically – no need to copy the code across again!

To make a change, navigate to the subscriber list details page and click Sign up forms, in the right sidebar, to open thesubscribe button test page. Then click Make more changes to open the editor:

Updates are applied automatically, so you should see the changes reflected on your website within 5-10 minutes.

KEEP TRACK OF SUBSCRIBE BUTTON SUBSCRIBERS

Every time you visit the subscribe button page, pictured above, you'll see how many people have signed up to your list using the subscribe button. The tally displayed doesn't include anyone who subscribed by any other method, and the number will not decrease if people unsubscribe. For full details of subscriber sign ups, refer to the subscriber list details page.

FAQs

Can I make two different buttons for the same subscriber list?

No, because the snippet of code you generate is linked to the button, which is what makes it so easy to update. But you can put the same snippet of code in multiple locations on your website. For example, one in the sidebar and one in the footer.

Why is my subscribe button working for some people and not others?

The subscribe button is not supported in Internet Explorer 6 or 7. Anyone using these outdated browser versions will not be able to see the button. To prevent breaking the web page, there will just be a blank space where the button should be.

TIP: If your email audience are people likely to be using outdated browsers, your best bet is to stick with a regular HTML subscribe form which is supported by almost any browser.

I have the latest version of Internet Explorer and it's still not working. Why?

On any web pages the subscribe button code is added to, you should include the following "X-UA-Compatible" meta tag in the document head to ensure the latest rendering engine is being run.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

How do I stop Flash content from overlapping the pop-up subscribe form?

You just need to add the following "opaque" attribute to your Flash embed code on the page that includes your subscribe button:

<param name="wmode" value="opaque" />

Find more information, read: Flash and the z-index problem, solved at slightlymore.co.uk

We're here to help.

ON THIS PAGE: