Back to site

Signup Form

Split signup page section with editable registration fields and social signup buttons.

---
import Form from "@forms/form/Form.astro";
import Input from "@forms/input/Input.astro";
import Submit from "@forms/submit/Submit.astro";
import SignupForm from "@page-sections/ctas/signup-form/SignupForm.astro";
---

<SignupForm agreementText="By creating an account, you agree to our [Terms](/terms/) and [Privacy Policy](/privacy/)." backgroundColor="base" benefits={
  [
    {
      "title": "Faster setup",
      "description": "Start from reusable sections instead of rebuilding each page pattern manually.",
      "iconName": "rocket-launch",
      "iconColor": "green"
    },
    {
      "title": "Team collaboration",
      "description": "Writers, editors, and developers can work from one shared foundation.",
      "iconName": "users",
      "iconColor": "blue"
    },
    {
      "title": "Safer publishing",
      "description": "Structured components keep your content model predictable as the site grows.",
      "iconName": "shield-check",
      "iconColor": "purple"
    }
  ]
} cardEyebrow="Get started" cardHeading="Create your account" cardText="Fill in your details below, or continue with Google or Facebook." colorScheme="inherit" dividerText="Or sign up with" footerLink="/login/" footerLinkText="Log in" footerText="Already have an account?" formAction="#" imageAlt="Historic stone building with a tower" imageSource="/src/assets/images/component-docs/castle.jpg" introEyebrow="New account" introHeading="Create your account and start shipping faster" introText="Join the workspace to collaborate with your team and publish from a more structured system." paddingVertical="5xl" socialButtonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Continue with Google",
      "hideText": false,
      "link": "/api/auth/oauth/google/start?returnTo=/account/",
      "iconName": "social/google",
      "iconPosition": "before",
      "variant": "tertiary",
      "size": "md"
    },
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Continue with Facebook",
      "hideText": false,
      "link": "/api/auth/oauth/facebook/start?returnTo=/account/",
      "iconName": "social/facebook",
      "iconPosition": "before",
      "variant": "tertiary",
      "size": "md"
    }
  ]
}>
  <Form action="#">
    <Input iconName="user" iconPosition="before" label="Full name" name="full_name" placeholder="Alex Morgan" required type="text" />
    <Input iconName="envelope" iconPosition="before" label="Work email" name="email" placeholder="alex@company.com" required type="email" />
    <Input iconName="building-office" iconPosition="before" label="Company" name="company" placeholder="Acme Studio" type="text" />
    <Input iconName="lock-closed" iconPosition="before" label="Password" name="password" placeholder="Create a password" required type="password" />
    <Input iconName="shield-check" iconPosition="before" label="Confirm password" name="confirm_password" placeholder="Re-enter your password" required type="password" />
    <Submit size="md" variant="primary">
      Create account
    </Submit>
  </Form>
</SignupForm>
---
blocks:
  _component: page-sections/ctas/signup-form
  introEyebrow: New account
  introHeading: Create your account and start shipping faster
  introText: Join the workspace to collaborate with your team and publish from a more structured system.
  benefits:
    - title: Faster setup
      description: Start from reusable sections instead of rebuilding each page pattern manually.
      iconName: rocket-launch
      iconColor: green
    - title: Team collaboration
      description: Writers, editors, and developers can work from one shared foundation.
      iconName: users
      iconColor: blue
    - title: Safer publishing
      description: Structured components keep your content model predictable as the site grows.
      iconName: shield-check
      iconColor: purple
  imageSource: /src/assets/images/component-docs/castle.jpg
  imageAlt: Historic stone building with a tower
  cardEyebrow: Get started
  cardHeading: Create your account
  cardText: Fill in your details below, or continue with Google or Facebook.
  formAction: '#'
  formBlocks:
    - _component: building-blocks/forms/input
      label: Full name
      name: full_name
      type: text
      placeholder: Alex Morgan
      required: true
      iconName: user
      iconPosition: before
    - _component: building-blocks/forms/input
      label: Work email
      name: email
      type: email
      placeholder: alex@company.com
      required: true
      iconName: envelope
      iconPosition: before
    - _component: building-blocks/forms/input
      label: Company
      name: company
      type: text
      placeholder: Acme Studio
      required: false
      iconName: building-office
      iconPosition: before
    - _component: building-blocks/forms/input
      label: Password
      name: password
      type: password
      placeholder: Create a password
      required: true
      iconName: lock-closed
      iconPosition: before
    - _component: building-blocks/forms/input
      label: Confirm password
      name: confirm_password
      type: password
      placeholder: Re-enter your password
      required: true
      iconName: shield-check
      iconPosition: before
    - _component: building-blocks/forms/submit
      text: Create account
      variant: primary
      size: md
  agreementText: By creating an account, you agree to our [Terms](/terms/) and [Privacy Policy](/privacy/).
  dividerText: Or sign up with
  socialButtonSections:
    - _component: building-blocks/core-elements/button
      text: Continue with Google
      hideText: false
      link: /api/auth/oauth/google/start?returnTo=/account/
      iconName: social/google
      iconPosition: before
      variant: tertiary
      size: md
    - _component: building-blocks/core-elements/button
      text: Continue with Facebook
      hideText: false
      link: /api/auth/oauth/facebook/start?returnTo=/account/
      iconName: social/facebook
      iconPosition: before
      variant: tertiary
      size: md
  footerText: Already have an account?
  footerLinkText: Log in
  footerLink: /login/
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 5xl
---

Overview

Use Signup Form when you want a proper account-creation page that still lives inside the same editable page-section architecture as the rest of the starter. It supports a richer registration field set than Login Form, along with editable agreement copy and provider buttons.

Properties

introEyebrow string | default: New account

Optional eyebrow above the marketing copy.

introHeading string | default: Create your workspace in a few minutes

Main heading shown beside the signup card.

introText string | default: Set up your account, invite your team, and start publishing with a structured editing workflow.

Supporting copy for the intro panel.

benefits array | default: array

Short proof points displayed in the intro panel.

Item Properties:

title string | default: Benefit title

Short benefit title.

description string | default: Brief supporting detail for this signup-page benefit.

Supporting copy for the benefit.

iconName enum | default: check-circle

Icon shown for this benefit.

iconColor enum | default: blue

Accent color applied to the icon.

Accepted values:
  • default
  • blue
  • green
  • yellow
  • orange
  • red
  • purple
  • pink
  • cyan

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

Image displayed in the intro panel.

imageAlt string | default: Historic stone building with a tower

Alt text describing the intro image.

cardEyebrow string | default: Get started

Optional eyebrow above the signup form card.

cardHeading string | default: Create your account

Heading shown inside the signup form card.

cardText string | default: Fill in your details below, or start with Google or Facebook.

Supporting copy inside the signup form card.

formAction string | default: #

Form action used when the signup form is submitted.

formBlocks array | default: array

Form fields rendered inside the signup form.

agreementText string | default: By creating an account, you agree to our [Terms](/terms/) and [Privacy Policy](/privacy/).

Small consent copy shown below the submit button.

dividerText string | default: Or sign up with

Label shown between the form and social buttons.

socialButtonSections array | default: array

Social sign-up buttons, typically Google and Facebook.

footerText string | default: Already have an account?

Small footer prompt shown below the social buttons.

footerLinkText string | default: Log in

Clickable footer link text.

footerLink string | default: /login/

URL for the footer link.

colorScheme enum | default: inherit

Color scheme theme for the section.

Accepted values:
  • inherit
  • light
  • dark

backgroundColor enum | default: base

Background color behind the section.

Accepted values:
  • none
  • base
  • surface
  • accent
  • highlight

paddingVertical enum | default: 5xl

Vertical padding for the section.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl
  • 5xl
  • 6xl