# Subscription

## Customizing The Subscription Form

**Files:** `src/config/config.toml`, `src/layouts/components/widgets/SubscriptionForm.astro`, `src/i18n/<lang>.json` · **Skill level:** Beginner

<Aside type="caution">
  Techlo includes a Mailchimp subscription form, but **no page shows it as it
  ships**, including the footer. The settings below do nothing until you add the
  component to a page or to the footer.
</Aside>

### The Settings
```toml
# src/config/config.toml
[settings.subscription]
  enable            = true
  title             = ""
  note              = ""
  formAction        = "https://your-account.us1.list-manage.com/subscribe/post?u=YOUR_USER_ID&id=YOUR_LIST_ID&f_id=YOUR_FORM_ID"
  mailchimpTagValue = ""
```

- `enable`: shows or hides the form.
- `title` and `note`: leave these empty to use `subscription.title` and `subscription.note` in each language file. A value here shows in every language.
- `formAction`: your Mailchimp address. It ships as a placeholder. Mailchimp's code shows `&amp;`: change each one to a plain `&`.
- `mailchimpTagValue`: an optional Mailchimp tag.

In the Tina edition, these are under **Subscription** in **Site settings**, and the text is under **Subscription** in **Interface labels**. In the Sanity edition, they are in the same places in the Studio. Adding the component is a code change in every edition.

### Add The Form To The Footer
The component reads its settings from props, so pass it the block from your config. In `src/layouts/components/global/Footer.astro`:

```astro
---

---

<SubscriptionForm {...config.settings.subscription} />
```

### Getting The Mailchimp Form Action URL
<Steps>
  <ol>
    <li>
      <h4>Create a Mailchimp Account</h4>
      <p>
        If you don't already have a Mailchimp account, sign up at
        <a href="https://login.mailchimp.com/signup/?locale=en">mailchimp.com</a> or log in if you have one.
      </p>
    </li>
    <li>
      <h4>Create an Embedded Form</h4>
      <p>
        After logging in, you will see the dashboard. From the left sidebar,
        click the <code>Create</code> button located at the top.
      </p>
      <div style="border: 1px solid black; padding: 5px">
        ![mailchimp tutorial how-to image](/mailchimp-config-1.png)
      </div>
      <p>
        Then click <code>Signup Form</code>, then <code>Embedded Form</code>,
        and fill out the form before clicking <code>Begin</code>.
      </p>
      <div style="border: 1px solid black; padding: 5px">
        ![mailchimp tutorial how-to image](/mailchimp-config-2.png)
      </div>
      <p>
        After you click <code>Begin</code>, you will see a page where you can
        add more fields. Now, from the top right, click the
        <code>Continue</code> button.
      </p>
      <div style="border: 1px solid black; padding: 5px">
        ![mailchimp tutorial how-to image](/mailchimp-config-3.png)
      </div>
      <p>
        You will then see the following page. From the embedded form code, copy
        the <code>form action</code> value and paste it into the
        <code>config.toml</code> file under the <code>formAction</code> option.
      </p>
      <div style="border: 1px solid black; padding: 5px">
        ![mailchimp tutorial how-to image](/mailchimp-config-4.png)
      </div>
      <p>
        <strong>Ready to try?</strong> Fill out and submit the subscription form
        to test it.
      </p>
    </li>
  </ol>
</Steps>

### Do It With AI
```text
Show the Mailchimp subscription form in the footer. Import
src/layouts/components/widgets/SubscriptionForm.astro in src/layouts/components/global/Footer.astro
and pass it config.settings.subscription. Use logical CSS so it works right to left. Then set
formAction in src/config/config.toml to [MY MAILCHIMP URL] and run npm run astro-check.
```