Building your subscriber base

Now that you've got a newsletter up and running, you can think about how to add more subscribers so more people can read and engage with what you write. You might spread the word about your newsletter through social media, other publications, or simple word of mouth. However you start, potential subscribers need a place to go where they can find your newsletter and subscribe.

There are three main ways you can grow your subscriber base without writing a single line of code:

• sharing your newsletter's unique Buttondown URL
• embedding an HTML form on a webpage
• embedding an iFrame on a webpage

Every newsletter has a unique URL. When someone loads that URL, a page with the option to subscribe to your newsletter appears.

Your newsletter's URL is https://buttondown.com/username, where "username" is replaced with the username of your Buttondown account. You can use this link anywhere on the internet, like in emails or blog posts, to give folks a place to go when they want to subscribe or read your past emails.

Buttondown exposes a URL endpoint that you can point any <form> tag at to get an HTML-friendly form. This is great for platforms like Wordpress or Cargo that are very HTML-friendly, as well as static site generators or JAMStack sites. Additionally, you can style this form to your heart's content.

Below is an example of a basic form that uses this endpoint:

<form
  action="
          https://buttondown.com/api/emails/embed-subscribe/YOUR-BUTTONDOWN-USERNAME
         "
  method="post"
  class="embeddable-buttondown-form"
>
  <label for="email">Email</label>
  <input type="email" name="email" placeholder="you@example.com" />
  <input type="hidden" value="1" name="embed" />
  <input type="submit" value="Subscribe" />
  <p>
    <a href="https://buttondown.com" target="_blank">
      Powered by Buttondown.
    </a>
  </p>
</form>

If you want a seamless, pre-styled way to include a subscription option on your site, the iFrame may be the tool for you. Here's an example:

<iframe
  scrolling="no"
  style="
         width: 100% !important;
         height: 220px;
         border: 1px #ccc solid !important;
        "
  src="https://buttondown.com/YOUR-BUTTONDOWN-USERNAME?as_embed=true"
></iframe>

You can attach tags to subscribers as they sign up — either by adding a tag query parameter to your newsletter's URL or by including hidden <input name="tag"> elements in your embedded form. See the tags reference for the full set of options (subscribe forms, the API, automations, and letting subscribers manage their own tags via Portal).

On your Buttondown subscribe form

Buttondown's subscription form doesn't ask for any metadata by default. All it needs is a subscriber's email address and, if you're running a paid newsletter, their payment information.

If you want to collect more information, though, you can add custom subscribe form inputs. You can find these in your subscribing settings. Inputs have three attributes:

1. A key, which corresponds with the key that will be set in the metadata for your subscriber.
2. A label, which is the text that will be displayed to the user.
3. Whether or not the metadata is required. If the metadata is required, then the input is required to be filled out by the subscriber.

Using HTML

Here's an example that uses HTML:

<!-- An example of a Buttondown subscription form with metadata support. -->

<form
  action="https://buttondown.com/api/emails/embed-subscribe/YOUR-BUTTONDOWN-USERNAME"
  method="post"
  class="p-4 antialiased"
>
  <div class="pb-3">
    <label for="email" class="block pb-2 text-gray-300 font-semibold text-sm"
    >Email Address</label
      >
      <input
        id="email"
        type="email"
        name="email"
        required
        placeholder="jane@example.com"
        class="w-64 mr-2 py-2 px-3 bg-gray-400 rounded-sm focus:outline-hidden focus:bg-white"
      />
    </div>

    <div class="pb-2">
      <label for="message" class="block pb-2 text-gray-300 font-semibold text-sm"
      >First name</label
        >
        <input
          id="first-name"
          type="text"
          name="metadata__first-name"
          required
          placeholder="John"
          class="w-full mr-2 py-2 px-3 bg-gray-400 rounded-sm focus:outline-hidden focus:bg-white"
        />
      </div>

      <div class="pb-2">
        <label for="message" class="block pb-2 text-gray-300 font-semibold text-sm"
        >Last name</label
          >
          <input
            id="last-name"
            type="text"
            name="metadata__last-name"
            required
            placeholder="Doe"
            class="w-full mr-2 py-2 px-3 bg-gray-400 rounded-sm focus:outline-hidden focus:bg-white"
          />
        </div>
        <br />

        <button
          type="submit"
          class="py-2 px-6 bg-indigo-600 rounded-sm text-white font-bold"
        >
          Send
        </button>
      </form>

Set inputs with the name of metadata__<key>, as you can see in the code sample above:

<input
  id="first-name"
  type="text"
  name="metadata__first-name"
  required
  placeholder="John"
/>

These inputs can be freeform text, like above, or hidden inputs if you want to invisibly augment your subscription forms with metadata. For example, you can imagine setting metadata for everyone who accesses your newsletter from a particular tag or webpage.

Another example is below:

<form
  action="
          https://buttondown.com/api/emails/embed-subscribe/YOUR-BUTTONDOWN-USERNAME
         "
  method="post"
  class="embeddable-buttondown-form"
>
  <label for="email">Email</label>
  <input type="email" name="email" placeholder="you@example.com" />
  <label for="first-name">First name</label>
  <input
    id="first-name"
    type="text"
    name="metadata__first-name"
    required
    placeholder="John"
  />
  <input type="hidden" value="1" name="embed" />
  <input type="submit" value="Subscribe" />
  <p>
    <a href="https://buttondown.com" target="_blank">
      Powered by Buttondown.
    </a>
  </p>
</form>

You can read our docs to learn more about metadata.

If you need to change a subscriber's address, you can go into the Notes screen for that subscriber and tap their address to change it.