mercury/src/components/NewsLetter.astro

44 lines
No EOL
1.5 KiB
Text

---
import { getLangFromUrl, useTranslations, useTranslatedPath } from '../i18n/utils';
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const translatePath = useTranslatedPath(lang);
const { listmonkInstance, listuuid } = Astro.props;
const inputId = Astro.props.listuuid.substring(0,5)
---
<details>
<summary>{t('subscribe.newsletter')}}</summary>
<small>{t('subscribe.newsletter.description')}</small>
<form method="post" action={`https://${listmonkInstance}/subscription/form`} class="listmonk-form">
<div>
<input type="hidden" name="nonce" />
<input type="email" name="email" required placeholder={t('subscribe.newsletter.email_label')} />
<input type="text" name="name" placeholder={t('subscribe.newsletter.name_label')} />
<input id={inputId} type="checkbox" name="l" checked="checked" value={listuuid} hidden />
<input type="submit" value="Subscribe" />
</div>
</form>
</details>
<style>
input[type="email"], input[type="text"], input[type="submit"] {
display: block;
}
input[type="email"], input[type="text"] {
margin: 0.5rem 0;
background-color: #fefefe;
color: #111;
border: unset;
height: 1.5rem;
}
input[type="submit"] {
background-color: var(--terminal-green);
color: var(--bg-color);
border: unset;
padding: 0.2rem;
height: 1.5rem;
cursor: pointer;
}
</style>