Signup Forms are user interface elements used to collect and validate user information when registering for a service, application, or website.
import React from "react";
import { Button, Form, Grid, Input, theme, Typography } from "antd";
import { LockOutlined, MailOutlined, UserOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title, Link } = Typography;
export default function SignUpPage() {
const { token } = useToken();
const screens = useBreakpoint();
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
const styles = {
container: {
margin: "0 auto",
padding: screens.md ? `${token.paddingXL}px` : `${token.paddingXL}px ${token.padding}px`,
width: "380px"
},
forgotPassword: {
float: "right"
},
header: {
marginBottom: token.marginXL,
textAlign: "center"
},
section: {
alignItems: "center",
backgroundColor: token.colorBgContainer,
display: "flex",
height: screens.sm ? "100vh" : "auto",
padding: screens.md ? `${token.sizeXXL}px 0px` : "0px"
},
signup: {
marginTop: token.marginLG,
textAlign: "center",
width: "100%"
},
text: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3
}
};
return (
<section style={styles.section}>
<div style={styles.container}>
<div style={styles.header}>
<svg
width="33"
height="32"
viewBox="0 0 33 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.125" width="32" height="32" rx="6.4" fill="#1890FF" />
<path
d="M19.3251 4.80005H27.3251V12.8H19.3251V4.80005Z"
fill="white"
/>
<path d="M12.925 12.8H19.3251V19.2H12.925V12.8Z" fill="white" />
<path d="M4.92505 17.6H14.525V27.2001H4.92505V17.6Z" fill="white" />
</svg>
<Title style={styles.title}>Sign up</Title>
<Text style={styles.text}>
Join us! Create an account to get started.
</Text>
</div>
<Form
name="normal_signup"
onFinish={onFinish}
layout="vertical"
requiredMark="optional"
>
<Form.Item
name="name"
rules={[
{
required: true,
message: "Please input your Name!",
},
]}
>
<Input prefix={<UserOutlined />} placeholder="Name" />
</Form.Item>
<Form.Item
name="email"
rules={[
{
type: "email",
required: true,
message: "Please input your Email!",
},
]}
>
<Input prefix={<MailOutlined />} placeholder="Email" />
</Form.Item>
<Form.Item
name="password"
extra="Password needs to be at least 8 characters."
rules={[
{
required: true,
message: "Please input your Password!",
},
]}
>
<Input.Password
prefix={<LockOutlined />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item style={{ marginBottom: "0px" }}>
<Button block type="primary" htmlType="submit">
Sign up
</Button>
<div style={styles.signup}>
<Text style={styles.text}>Already have an account?</Text>{" "}
<Link href="">Sign in</Link>
</div>
</Form.Item>
</Form>
</div>
</section>
);
}
import React from "react";
import { Button, Checkbox, Form, Grid, Input, theme, Typography } from "antd";
import { LockOutlined, MailOutlined, UserOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title, Link } = Typography;
export default function SignUpPage() {
const { token } = useToken();
const screens = useBreakpoint();
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
const styles = {
panel: {
backgroundColor: token.colorBgContainer,
borderRadius: screens.md ? token.borderRadiusLG : "0",
boxShadow: screens.md ? token.boxShadowTertiary : "none",
margin: "0 auto",
padding: screens.md ? `${token.paddingXL}px` : `${token.sizeXXL}px ${token.padding}px`,
width: "360px"
},
footer: {
marginTop: token.marginLG,
textAlign: "center",
width: "100%"
},
forgotPassword: {
float: "right"
},
header: {
marginBottom: token.marginXL,
textAlign: "center"
},
section: {
alignItems: "center",
backgroundColor: screens.md ? token.colorBgLayout : token.colorBgContainer,
display: "flex",
height: screens.md ? "100vh" : "auto",
padding: screens.md ? `${token.sizeXXL}px 0px` : "0px"
},
text: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3
}
};
return (
<section style={styles.section}>
<div style={styles.panel}>
<div style={styles.header}>
<svg
width="33"
height="32"
viewBox="0 0 33 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.125" width="32" height="32" rx="6.4" fill="#1890FF" />
<path
d="M19.3251 4.80005H27.3251V12.8H19.3251V4.80005Z"
fill="white"
/>
<path d="M12.925 12.8H19.3251V19.2H12.925V12.8Z" fill="white" />
<path d="M4.92505 17.6H14.525V27.2001H4.92505V17.6Z" fill="white" />
</svg>
<Title style={styles.title}>Sign up</Title>
<Text style={styles.text}>
Welcome to AntBlocks UI! Please fill in the form below to sign up.
</Text>
</div>
<Form
name="normal_signup"
onFinish={onFinish}
layout="vertical"
requiredMark="optional"
>
<Form.Item
label="Full Name"
name="fullName"
rules={[
{
required: true,
message: "Please input your full name!",
},
]}
>
<Input prefix={<UserOutlined />} placeholder="Full Name" />
</Form.Item>
<Form.Item
label="Email"
name="email"
rules={[
{
type: "email",
required: true,
message: "Please input your email!",
},
]}
>
<Input prefix={<MailOutlined />} placeholder="Email" />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: "Please input your password!",
},
]}
>
<Input.Password
prefix={<LockOutlined />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item>
<Form.Item name="agreement" valuePropName="checked" noStyle>
<Checkbox>
I have read and agree to the{" "}
<Link href="">Terms and Conditions</Link>
</Checkbox>
</Form.Item>
</Form.Item>
<Form.Item style={{ marginBottom: "0px" }}>
<Button block type="primary" htmlType="submit">
Sign up
</Button>
<div style={styles.footer}>
<Text style={styles.text}>Already have an account?</Text>{" "}
<Link href="">Sign in</Link>
</div>
</Form.Item>
</Form>
</div>
</section>
);
}
import React from "react";
import { Button, Checkbox, Col, Form, Grid, Input, Row, theme, Typography } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title, Link } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
const styles = {
container: {
alignItems: "center",
backgroundColor: token.colorBgContainer,
display: "flex",
justifyContent: "center",
padding: screens.md ? `${token.sizeXXL * 2}px ${token.paddingLG}px` : `${token.sizeXXL}px ${token.padding}px`
},
footer: {
marginTop: token.marginLG,
textAlign: "center",
width: "100%"
},
forgotPassword: {
float: "right"
},
formHeader: {
marginBottom: token.marginXL,
textAlign: "center"
},
formWrapper: {
maxWidth: "320px"
},
image: {
height: "100%",
objectFit: "cover",
position: "absolute",
width: "100%",
zIndex: "10"
},
imageWrapper: {
display: screens.md ? "block" : "none",
height: "100%",
position: "relative"
},
text: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3
}
};
return (
<Row>
<Col span={screens.md ? 10 : 24}>
<div style={styles.container}>
<div style={styles.formWrapper}>
<div style={styles.formHeader}>
<svg
width="32"
height="32"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.464294"
width="24"
height="24"
rx="4.8"
fill="#1890FF"
/>
<path
d="M14.8643 3.6001H20.8643V9.6001H14.8643V3.6001Z"
fill="white"
/>
<path
d="M10.0643 9.6001H14.8643V14.4001H10.0643V9.6001Z"
fill="white"
/>
<path
d="M4.06427 13.2001H11.2643V20.4001H4.06427V13.2001Z"
fill="white"
/>
</svg>
<Title style={styles.title}>Sign up</Title>
<Text style={styles.text}>
Create a new account to get started with AntBlocks UI.
</Text>
</div>
<Form
name="normal_signup"
initialValues={{
remember: true,
}}
onFinish={onFinish}
layout="vertical"
requiredMark="optional"
>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: "Please input your Username!",
},
]}
>
<Input prefix={<UserOutlined />} placeholder="Username" />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: "Please input your Password!",
},
]}
>
<Input.Password
prefix={<LockOutlined />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
</Form.Item>
<Form.Item style={{ marginBottom: "0px" }}>
<Button block type="primary" htmlType="submit">
Sign up
</Button>
<div style={styles.footer}>
<Text style={styles.text}>Already have an account?</Text>{" "}
<Link href="">Sign in now</Link>
</div>
</Form.Item>
</Form>
</div>
</div>
</Col>
<Col span={14}>
<div style={styles.imageWrapper}>
<img
style={styles.image}
alt="Example"
src="https://images.unsplash.com/photo-1534239697798-120952b76f2b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&q=80"
/>
</div>
</Col>
</Row>
);
}
import React from "react";
import { Button, Divider, Form, Grid, Input, theme, Typography } from "antd";
import { AppleFilled, GithubOutlined, MailOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title, Link } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
const styles = {
footer: {
marginTop: token.marginLG,
textAlign: "center",
width: "100%"
},
formWrapper: {
margin: "0 auto",
maxWidth: "320px",
padding: `${token.sizeXXL}px ${token.padding}px`
},
header: {
marginBottom: token.marginXL,
textAlign: "center"
},
section: {
alignItems: "center",
backgroundColor: token.colorBgContainer,
display: "flex"
},
social: {
display: "flex",
flexDirection: "column",
gap: token.marginXS
},
text: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3
}
};
return (
<section style={styles.section}>
<div style={styles.formWrapper}>
<div style={styles.header}>
<svg
width="33"
height="32"
viewBox="0 0 33 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.125" width="32" height="32" rx="6.4" fill="#1890FF" />
<path
d="M19.3251 4.80005H27.3251V12.8H19.3251V4.80005Z"
fill="white"
/>
<path d="M12.925 12.8H19.3251V19.2H12.925V12.8Z" fill="white" />
<path d="M4.92505 17.6H14.525V27.2001H4.92505V17.6Z" fill="white" />
</svg>
<Title style={styles.title}>Sign up</Title>
<Text style={styles.text}>
Create a new account to get started with AntBlocks UI.
</Text>
</div>
<Form
name="normal_signup"
onFinish={onFinish}
layout="vertical"
requiredMark="optional"
>
<Form.Item
name="email"
rules={[
{
required: true,
type: "email",
message: "Please input your Email!",
},
]}
>
<Input
prefix={<MailOutlined />}
placeholder="Enter your Email"
label="Email"
/>
</Form.Item>
<Form.Item style={{ marginBottom: "0px" }}>
<Button block="true" type="primary" htmlType="submit">
Sign up with email
</Button>
</Form.Item>
</Form>
<Divider plain>OR</Divider>
<div style={styles.social}>
<Button icon={<GithubOutlined />}>Sign up with Github</Button>
<Button icon={<AppleFilled />}>Sign up with Apple</Button>
</div>
<div style={styles.footer}>
<Text style={styles.text}>Already have an account?</Text>{" "}
<Link href="">Sign in</Link>
</div>
</div>
</section>
);
}
