Forms

---
import Button from '@components/Button.astro';
import Flow from '@components/Flow.astro';
import Icon from '@components/Icon.astro';

interface Props {
	id: string;
	withRecaptcha?: boolean;
	withSubmitButton?: boolean;
}

const { id, withRecaptcha = false, withSubmitButton = false } = Astro.props;
---

<Flow as="form" goform action={`https://goform.app/s/${id}`} method="post">
	<slot />
	{
		withSubmitButton && (
			<Flow space="xs">
				<Button type="submit">
					Send
					<Icon class="fill-current w-5 h-5" name="send" slot="end" />
				</Button>
			</Flow>
		)
	}
	<slot name="end" />
</Flow>

<script src="https://goform.app/validate.js" is:inline></script>
{
	withRecaptcha && (
		<script src={`https://goform.app/recaptcha/${id}`} is:inline />
	)
}

We use Goform to handle forms. The Astro Starter Kit comes with some components to make building those forms a little easier.

Usage

---
import Goform from '@components/Goform.astro';
---

<Goform id="goform-id" withRecaptcha withSubmitButton>...</Goform>

You can then build your form using HTML or the input components provided. It’s recommended you use the provided components for styling consistency.

---
import Goform from '@components/Goform.astro';
import TextInput from '@components/Form/TextInput.astro';
import TextAreaInput from '@components/Form/TextAreaInput.astro';
---

<Goform id="example" withRecaptcha withSubmitButton>
	<TextInput name="name" label="Name" />
	<TextInput name="email" label="Email" type="email" />
	<TextInput name="phone" label="Phone" type="tel" optional />
	<TextAreaInput name="message" label="Message" />
</Goform>