Web3 Form
An example contact form that sends submissions to an e-mail inbox via the Web3 Forms API. The form uses basic styling from the TailwindCSS Forms plugin. Adding the siteKey prop enables Cloudflare Turnstile verificaton for spam protection. Note: Turnstile isn’t supported on Web3’s non-paid plans.
How to use
<Section columns={1}>
<Markdown>
# Web3 Form
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</Markdown>
import Web3Form from "~/components/interactive/forms/Web3.astro";
<Web3Form accessKey="d46263ac-da24-498f-b856-bfeaf078a85c" siteKey="0x4AAAAAABhqUtSMp27iLYrQ" />
</Section>Props
| Prop | Type | Description |
|---|---|---|
accessKey | string | Web3 Access key |
siteKey | string | (optional) Enables Cloudflare Turnstile if added |
class | string | (optional) Additional classes applied to the root <form>. |
| (extends) | HTMLAttributes<"form"> | (optional) All standard HTML attributes for a <form>. |
Useful links
About MDX
astro-skeleton uses the @astrojs/mdx integration installed and configured in the astro.config.mjs config file.
Why MDX?
MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into Markdown content for things like interactive charts or alerts.
If you have existing content authored in MDX, this integration will hopefully make migrating a breeze.