Back to site

CTA Form

No description available

---
import CtaForm from "@components/page-sections/ctas/cta-form.astro";
import Input from "@components/building-blocks/forms/input.astro";
import Textarea from "@components/building-blocks/forms/textarea.astro";
import Submit from "@components/building-blocks/forms/submit.astro";
import Form from "@components/building-blocks/forms/form.astro";
---

<CtaForm formAction="./" heading="Get in touch with us" imageAlt="Contact us." imageSource="/src/assets/images/component-library/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-library/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

No properties available. Make sure the component has a valid .cloudcannon.structure-value.yml file.