Library · Forms & CTAs

CTA / Free Appraisal Squares

Conversion band — flush square photo left, appraisal enquiry form (underline fields, accent pill submit) right. Field labels are visually hidden but present for screen readers. Tone via the shared contract.

Figma: CTA / Free Appraisal / Squares ↗ View Elementor template in 8020 ↗

Live preview — edit theme bottom-right

---
import CtaFreeAppraisalSquares from "../components/figma/CtaFreeAppraisalSquares.astro";
---
<CtaFreeAppraisalSquares
  image="https://images.unsplash.com/photo-1556912173-3bb406ef7e77?w=1200&q=60"
  imageAlt="Bright open-plan kitchen"
  title="Want to know what your property is worth?"
  subheading="Find out your home's value today"
  tone="base-200"
/>

Props

Name	Type	Required	Description
`image`	`string`	Yes	Photo shown flush on the left half
`imageAlt`	`string`	—
`title`	`string`	Yes	Form heading
`subheading`	`string`	—	Small-caps line under the heading
`fields`	`AppraisalField[]`	—	Form fields; defaults to the appraisal set (name/phone/email/address/suburb)
`ctaLabel`	`string`	—	Submit label (default: 'Enquire Now')
`formAction`	`string`	—	Form action URL (form posts here) (default: '#')
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral"`	—	Background tone — the Figma colour-variant axis

Example with all props

<CtaFreeAppraisalSquares
  image="/images/kitchen.jpg"
  title="Want to know what your property is worth?"
  subheading="Find out your home's value today"
  formAction="/api/enquiry"
  tone="base-200"
/>