react-custom-hubspot-form
v0.1.16
Published
A React hook to render customizable Hubspot forms
Downloads
242
Readme
Customizable HubSpot Form (React Hook)
A React hook to render customizable Hubspot forms
Installation
npm install react-custom-hubspot-form
Usage
Basic implementation
import React from 'react'
import { useHubspotForm } from 'react-custom-hubspot-form'
export default () => {
const { Form } = useHubspotForm({
portalId: '...',
formId: '...',
fields: [
{ name: 'name', label: 'Name', required: true },
{
name: 'movie',
label: 'Favorite movie',
type: 'select',
options: [
'Star Wars: Episode V - The Empire Strikes Back',
'Interstellar',
'Lightyear',
],
value: 'Interstellar',
},
// ...
],
submitLabel: 'Vote now!',
})
return <Form />
}
Custom fields
const { Fields, Form } = useHubspotForm(/* config */)
const [Name, Movie] = Fields // order based on `config.fields`
return (
<Form className="...">
<Name component={CustomField} />
<Movie className="..." />
<button type="submit">Vote now!</button>
<button type="reset">Reset</button>
</Form>
)
Default <Field>
components are documented here.
const CustomField = ({ label, value, className, ...props }) => (
<label htmlFor={props.name} className={className}>
<small>{label}{props.required && <span>*</span>}</small>
<input
id={props.name}
placeholder={label}
defaultValue={value}
{...props}
/>
</label>
)
Custom form (and response)
const { onSubmit, response, result, Fields } = useHubspotForm(/* config */)
if (response?.ok && !!result?.redirectUri) {
window.location.href = result.redirectUri
return <p>Redirecting...</p>
}
if (response?.ok && !!result?.inlineMessage) {
return <div dangerouslySetInnerHTML={{ __html: result.inlineMessage }} />
}
return (
<form onSubmit={onSubmit}>
{Fields.map((Field, key) => (
<Field className="..." key={key} />
))}
<button>Vote now!</button>
</form>
)
Debug
Set config.debug: true
with an apiKey
to retrieve the API endpoint to help with populating config.fields
.
useHubspotForm({
portalId: '...',
formId: '...',
// fields: idk yet...,
debug: true,
apiKey: '...',
})
// open browser console (debug panel) to see the endpoint URL
Config
config
parameters are documented here.
Return values
|value|description|example|
|-|-|-|
|onSubmit
| Submission handler to use in the native <form>
tag | <form onSubmit={onSubmit} />
|
|response
| Response object returned from the HubSpot API | response.ok
|
|result
| Resulting object from a successful response | result.inlineMessage
result.redirectUri
|
|Fields
| Array of inputs as React components used to destructure | const [First, Second, ...theRest] = Fields
|
|Form
| React component with onSubmit
, Fields
and a submit button included by default.Setting children
will override the fields and submit button. | <Form>...</Form>
|