Email signup
The homepage email capture: a pill-shaped input control with an inline 'Join' button, featuring client-side validation and an error tooltip. Without an action, it fires the hc-submit event and leaves the request to you; set status="success" when you are done.
<hc-email-signup id="signup"></hc-email-signup>
<script type="module">
const signup = document.getElementById('signup')
signup.addEventListener('hc-submit', async () => {
signup.status = 'loading'
await new Promise(resolve => setTimeout(resolve, 800))
signup.status = 'success'
})
</script>API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
action, method | string | method: "post" | Submit natively to this URL (unless hc-submit is canceled) |
name | string | "email" | Field name |
placeholder | string | "orpheus@hackclub.com" | |
label | string | "Email address" | Accessible label |
button-label | string | "Join" | |
invalid-message, success-message | string | Copy for the error and success states | |
status | "idle" | "loading" | "success" | "idle" | Request state |
error | string | Show an error tooltip, e.g. after a failed request |
Events
| Name | Description |
|---|---|
hc-submit | Cancelable. detail: { email } |
CSS parts
| Name | Description |
|---|---|
form | |
input | |
button | |
error | |
success |