Form
Groups form fields into one submission area.
---
import Form from "@forms/form/Form.astro";
import Hidden from "@forms/hidden/Hidden.astro";
import Input from "@forms/input/Input.astro";
import Select from "@forms/select/Select.astro";
import SelectOption from "@forms/select/SelectOption.astro";
import Submit from "@forms/submit/Submit.astro";
import Textarea from "@forms/textarea/Textarea.astro";
---
<Form action="/contact">
<Input label="Full Name" name="name" placeholder="Enter your full name" required type="text" />
<Select label="City" name="city">
<SelectOption label="Auckland" value="auckland" />
<SelectOption label="Wellington" value="wellington" />
<SelectOption label="Christchurch" value="christchurch" />
<SelectOption label="Hamilton" value="hamilton" />
<SelectOption label="Dunedin" value="dunedin" />
<SelectOption label="Tauranga" value="tauranga" />
</Select>
<Textarea label="Message" name="message" placeholder="Tell us about your project..." required />
<Hidden name="form-source" value="contact-page" />
<Submit variant="primary">
Send Message
</Submit>
</Form>---
blocks:
_component: building-blocks/forms/form
action: /contact
formBlocks:
- _component: building-blocks/forms/input
label: Full Name
name: name
type: text
placeholder: Enter your full name
required: true
- _component: building-blocks/forms/select
label: City
name: city
options:
- value: auckland
label: Auckland
- value: wellington
label: Wellington
- value: christchurch
label: Christchurch
- value: hamilton
label: Hamilton
- value: dunedin
label: Dunedin
- value: tauranga
label: Tauranga
- _component: building-blocks/forms/textarea
label: Message
name: message
placeholder: Tell us about your project...
required: true
- _component: building-blocks/forms/hidden
name: form-source
value: contact-page
- _component: building-blocks/forms/submit
text: Send Message
variant: primary
---Overview
Groups input fields and buttons into a form that can submit data to a URL.
Properties
action string | default: ./
Where to send the form-data when the form is submitted. The URL that processes the form submission.
formBlocks array | default: array
The form blocks to render inside the form.
Slots
default
The contents of the Form.
Used only when the contentSections property is not set.