Framer

Buttondown forms are easy to build and can drive newsletter subscriptions directly from your website. If you need a website, Framer is a sleek, no-code tool that can help you build one.

This topic explains how to embed a subscription form for your newsletter in Framer.

To complete this process, you must have:

• A Framer site
• A Buttondown account

First, you must retrieve the HTML code for a subscription form from Buttondown.

1. In Buttondown, navigate to Settings, and then Embedding.
2. Scroll down to the "Form" section and find HTML code for adding a subscription form.
3. Copy this code to your clipboard.

1. In Framer, click Insert. Scroll through the dropdown menu until you arrive at "Utility."
2. Click Embed.
3. Click the new embed block and look at the properties panel that pops up.
4. Scroll down to the "Embed" section and switch your "Embed" type to "HTML."
5. Paste the HTML form code from Buttondown into the HTML field.

You've done it! Your new Buttondown form should now be embedded in your Framer site.

As your subscriber base grows, you may want to organize it by assigning tags to individual subscribers. You can use these tags to sort your subscriber base, as well as to send out targeted email blasts.

You can automatically add tags to any new subscribers by modifying the HTML code you used to create your subscription form. All you have to do is add a new <span class="bg-gray-200 font-mono p-0.5 rounded-sm">input</span> tag that matches the following format.

<input type="radio" id="Fettuccine" name="tag" value="Fettuccine" />
<label for="Fettuccine">Fettuccine Alfredo</label>

Here's an example of how your HTML code might look with three new tag options.

<form
  action="
    https://buttondown.com/api/emails/
  "
  method="post"
  class="embeddable-buttondown-form"
>
  <label for="email">Email</label>
  <input
    type="email"
    name="email"
    placeholder="you@example.com"
  />
  <label for="email">What Is Your Favorite Pasta Dish?</label>
  <br />
  <input type="radio" id="Fettuccine" name="tag" value="Fettuccine" />
  <label for="Fettuccine">Fettuccine Alfredo</label>
  <input type="radio" id="Carbonara" name="tag" value="Carbonara" />
  <label for="Carbonara">Spaghetti Carbonara</label>
  <input type="radio" id="penne" name="tag" value="penner" />
  <label for="penne">Penne alla Vodka</label><br />
  <br />
  <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>

Here's what that code looks like when it's rendered in your Framer site.

You can add as many tags as you want. To learn more about tags, read Building your subscriber base.

You may want to style your form so that it matches your website's brand and styling. You can do that in Framer by referencing their "Creating Custom Forms" doc.