EarlyBird Help CenterForm
Form is used for email_capture, contact and payment options in order to submit the request data to the server.
Example Usage:
jsx
<div id="newsletter">
<Form
class="max-w-3xl mx-auto space-y-5"
{...newsletter.form} // This line of code is mandatory
>
{/* name can only be either `email` or `name` */}
<Form.Item name="name" required={true}>
<Form.Input
type="text"
class="bg-transparent w-full h-10 rounded-md px-4 py-2 border border-slate-300/80"
placeholder={newsletter.form.name_placeholder}
/>
</Form.Item>
{/* name can only be either `email` or `name` */}
<Form.Item name="email" required={true}>
<Form.Input
type="email"
class="bg-transparent w-full h-10 rounded-md px-4 py-2 border border-slate-300/80"
placeholder={newsletter.form.email_placeholder}
/>
</Form.Item>
<Form.Button class="relative w-full sm:w-auto h-10 rounded-md px-5 py-1 bg-slate-950 text-white">
{newsletter.form.button_text}
</Form.Button>
</Form>
</div><div id="newsletter">
<Form
class="max-w-3xl mx-auto space-y-5"
{...newsletter.form} // This line of code is mandatory
>
{/* name can only be either `email` or `name` */}
<Form.Item name="name" required={true}>
<Form.Input
type="text"
class="bg-transparent w-full h-10 rounded-md px-4 py-2 border border-slate-300/80"
placeholder={newsletter.form.name_placeholder}
/>
</Form.Item>
{/* name can only be either `email` or `name` */}
<Form.Item name="email" required={true}>
<Form.Input
type="email"
class="bg-transparent w-full h-10 rounded-md px-4 py-2 border border-slate-300/80"
placeholder={newsletter.form.email_placeholder}
/>
</Form.Item>
<Form.Button class="relative w-full sm:w-auto h-10 rounded-md px-5 py-1 bg-slate-950 text-white">
{newsletter.form.button_text}
</Form.Button>
</Form>
</div>json
[
{
name: 'newsletter',
title: 'Newsletter',
fields: [
{
name: 'form',
title: 'Subscribe',
type: 'email_capture',
fields: [
{
name: 'name_placeholder',
title: 'Name placeholder',
type: 'text',
default: 'Your name',
ai: true
},
{
name: 'email_placeholder',
title: 'Email address placeholder',
type: 'text',
default: 'Your email address',
ai: true
},
{
name: 'button_text',
title: 'Button text',
type: 'text',
default: 'Subscribe',
ai: true
}
]
}
]
}
][
{
name: 'newsletter',
title: 'Newsletter',
fields: [
{
name: 'form',
title: 'Subscribe',
type: 'email_capture',
fields: [
{
name: 'name_placeholder',
title: 'Name placeholder',
type: 'text',
default: 'Your name',
ai: true
},
{
name: 'email_placeholder',
title: 'Email address placeholder',
type: 'text',
default: 'Your email address',
ai: true
},
{
name: 'button_text',
title: 'Button text',
type: 'text',
default: 'Subscribe',
ai: true
}
]
}
]
}
]Form.Item
name
Type: string
The Form.Item name can only be either email, name, subject or message.
required
Type: boolean
The Form.Item is required to be filled out by customers.
Form.Input
The Input component is used for inputting long text.
type
Type: string
The Form.Input type can only be either text or email.
Form.Textarea
The Textarea component is used for inputting long text.
rows
Type: number
Textarea rows, default is 3.
Form.Button
The Button component is used to submit the form.
rootClassName
Type: string
Change the classname of the button's parent element.