TheFormcomponent renders a form that can contain other subcomponents, such asInput,Select, andButton. Use this component to enable users to submit data to HubSpot or an external system.
Label:the input label.
Text input:anInput component with a placeholder value of First name.
Label:the select input label.
Select input:aSelect component with value of Customer.
Button:aButton component to submit the form's information.
import { Form, Input, Button } from '@hubspot/ui-extensions';
const Extension = () => {
return (
<Form onSubmit={() => { console.log('Form submitted!')}} preventDefault={true}>
<Input
label="First Name"
name="first-name"
tooltip="Please enter your first name"
description="Please enter your first name"
placeholder="First name"
/>
<Input
label="Last Name"
name="last-name"
tooltip="Please enter your last name"
description="Please enter your last name"
placeholder="Last name"
/>
<Button
onClick={() => {
console.log('Submit button clicked');
}}
variant="primary"
type="submit"
>
Submit
</Button>
</Form>
);
}
Prop
Type
Description
onSubmit
Function
The function that is called when the form is submitted. It will receive a RemoteEvent as an argument and its return value will be ignored.
preventDefault
Boolean
When set to true, event.preventDefault() will be invoked before the onSubmit function is called, preventing the default HTML form behavior.
Usage examples
A form to submit customer information to an external database.
A form to place a product order on behalf of a customer.
Guidelines
DO: include text inputs when a user should be able to submit any value.
DO:include select inputs when a user should only be able to select from a set of values.
DO:include descriptions and placeholder text to provide context to users.
DO:always position the submit button at the bottom of the form.
Sales Hub
Service Hub
