Signup Form
No description available
---
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
No properties available. Make sure the component has a valid .cloudcannon.structure-value.yml file.