A React component for embedding Paperform forms.
npm install react-paperform-co
or
yarn add react-paperform-coimport { PaperformEmbedded } from 'react-paperform-co';
export default function App() {
return (
<PaperformEmbedded
paperformId="contact-paperform"
prefill={{
'9cqkm': 'Danny'
}}
prefill-inherit
spinner
onPageChange={(...a) => console.log('onPageChange!', a)}
onSubmit={(...a) => console.log('onSubmit!', a)}
/>
);
}import { PaperformPopup } from 'react-paperform-co';
export default function App() {
return (
<PaperformPopup
paperformId="contact-paperform"
prefill={{
'9cqkm': 'Danny'
}}
prefill-inherit
onSubmit={(...a) => console.log('onSubmit!', a)}
onClose={() => console.log('onClose!')}
/>
);
}- PaperformEmbedded
- PaperformPopup
- PaperformSubmissionDataItem
- PaperformSubmission
- PaperformChangePageEvent
- PaperformProps
- PaperformEmbeddedProps
- PaperformPopupProps
Renders a paperform embedded form
propsPaperformEmbeddedProps
Renders a paperform popup
propsPaperformPopupProps
Row of the fulled form data.
Type: string
Type: string
Type: string
Type: string
Type: string
Type: string
The submission data is an array of objects, each representing a row of the form data.
The submission data is an array of objects, each representing a row of the form data.
Type: Array<PaperformSubmissionDataItem>
paperformId is the ID of the form.
Type: string
The submission ID is a unique identifier for the submission.
Type: string
Type: 0
Event fired when the page of the form is changed.
paperformId is the ID of the form.
Type: string
Type: number
Type: number
Base props for the Paperform components.
To use pre-filling directly through the element, you may pass hardcode values. For example, you might pre-fill UTM parameters here instead of placing them in the URL's query string.
Type: (Record<string, string> | string)
To pre-fill a form by using the query string of the page it's embedded on, you may pre-fill by inheritance, setting this attribute on the element you're using to embed the form. This lets you dynamically pre-fill the form based on the current query string.
Type: boolean
When changing pages on an inline, embedded form, the page is automatically scrolled to the top of the form.
However, if the page the form is embedded on has a fixed header or the form consistently sits lower on the page than the top, page changes may cause the scroll position to be lower than expected and may cause confusion for respondents as to where the form went.
Setting the scroll-offset to a number of pixels offsets what is considered the "top" and enables page changes to more reliably alter the scroll position to where it needs to be.
Type: number
When changing pages on an inline, embedded form, the page is automatically scrolled to the top of the form.
If you want to disable this behavior entirely, you can set no-scroll equal to "1".
Type: boolean
Use this to include a spinner (loading indicator) while the form is loading.
Type: boolean
Delay loading an inline, embedded form until the form has scrolled into view on the screen.
Type: boolean
This attribute applies to guided mode only.
The height of the embedded form may be restricted to a specific height. The value can be any valid CSS unit (px, %, em, rem, vw, vh, ...).
This is commonly used to reduce the amount of space a guided mode form takes, including the spacing between the centered form content and any buttons.
The height may never be larger than the viewport.
Type: string
Show a border around an inline, embedded form.
Type: boolean
Change the color of the border around an inline, embedded form.
The color value can be any valid CSS color.
If the border attribute is not present, this attribute will not do anything.
Type: string
Fires when the form is submitted, including the submission data.
Type: function (submission: PaperformSubmission): void
Fires when the page changes in a form, including the currentPage and totalPages in each response.
Type: function (event: PaperformChangePageEvent): void
Set the title of the embedded form's iframe.
This can be useful for accessibility purposes.
Type: string
Unknown dev attribute.
Type: string
Extends PaperformProps
Props for the Paperform embedded form.
The ID of the form to embed.
Type: string
Extends Pick<PaperformEmbeddedProps, 'paperformId' | 'spinner' | 'dev' | 'prefill' | 'prefillInherit' | 'onSubmit'>
Props for the Paperform popup form.
Callback function to be called when the popup is closed by user.
Does not fire when the popup component was removed by the parent component.
Type: function (): void
MIT