Fill out the form below and we'll get back to you as soon as possible.
CTA Form
Side-by-side CTA with copy and form on one side and image on the other.
Get in touch with us
---
import Form from "@forms/form/Form.astro";
import Input from "@forms/input/Input.astro";
import Submit from "@forms/submit/Submit.astro";
import Textarea from "@forms/textarea/Textarea.astro";
import CtaForm from "@page-sections/ctas/cta-form/CtaForm.astro";
---
<CtaForm formAction="./" heading="Get in touch with us" imageAlt="Contact us." imageSource="/src/assets/images/component-docs/sunset.jpg" subtext="Fill out the form below and we'll get back to you as soon as possible.">
<Form action="./">
<Input label="Name" name="name" required type="text" />
<Input label="Email" name="email" required type="email" />
<Textarea label="Message" name="message" required />
<Submit variant="primary">
Send message
</Submit>
</Form>
</CtaForm>---
blocks:
_component: page-sections/ctas/cta-form
heading: Get in touch with us
subtext: Fill out the form below and we'll get back to you as soon as possible.
formAction: ./
formBlocks:
- _component: building-blocks/forms/input
label: Name
name: name
type: text
required: true
- _component: building-blocks/forms/input
label: Email
name: email
type: email
required: true
- _component: building-blocks/forms/textarea
label: Message
name: message
required: true
- _component: building-blocks/forms/submit
text: Send message
variant: primary
imageSource: /src/assets/images/component-docs/sunset.jpg
imageAlt: Contact us.
---Overview
Use when you need a form alongside visual content, with colorScheme and backgroundColor props to blend into different sections.