CTA Form

Side-by-side CTA with copy and form on one side and image on the other.

Get in touch with us

Fill out the form below and we'll get back to you as soon as possible.

---
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.

Properties

heading string | default: Get in touch

Headline for the CTA.

subtext string | default: Fill out the form below and we'll get back to you as soon as possible.

Supporting copy beneath the headline.

formAction 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.

imageSource string | default: /src/assets/images/component-docs/dunedin-cliff.jpg

Image displayed alongside the CTA content.

imageAlt string | default: CTA image

Alt text describing the CTA image.

reverse boolean | default: false

Reverse the order so image appears before the form.

colorScheme enum | default: inherit

Color scheme theme for the CTA.

Accepted values:

inherit
light
dark

backgroundColor enum | default: base

Background color for the CTA.

Accepted values:

none
base
surface
accent
highlight