react-paperform-co
v1.0.0
Published
Paperform.co components for react with types
Downloads
599
Readme
react-paperform
A React component for embedding Paperform forms.
Installation
npm install react-paperform-co
or
yarn add react-paperform-coUsage
Embedded
import { 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)}
/>
);
}Popup
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!')}
/>
);
}API
Table of Contents
- PaperformEmbedded
- PaperformPopup
- PaperformSubmissionDataItem
- PaperformSubmission
- PaperformChangePageEvent
- PaperformProps
- PaperformEmbeddedProps
- PaperformPopupProps
PaperformEmbedded
Renders a paperform embedded form
Parameters
propsPaperformEmbeddedProps
PaperformPopup
Renders a paperform popup
Parameters
propsPaperformPopupProps
PaperformSubmissionDataItem
Row of the fulled form data.
display_label
Type: string
key
Type: string
label
Type: string
raw
Type: string
scopes
type
Type: string
value
Type: string
PaperformSubmission
The submission data is an array of objects, each representing a row of the form data.
data
The submission data is an array of objects, each representing a row of the form data.
Type: Array<PaperformSubmissionDataItem>
form_id
paperformId is the ID of the form.
Type: string
submission_id
The submission ID is a unique identifier for the submission.
Type: string
total
Type: 0
PaperformChangePageEvent
Event fired when the page of the form is changed.
form_id
paperformId is the ID of the form.
Type: string
currentPage
Type: number
totalPages
Type: number
PaperformProps
Base props for the Paperform components.
prefill
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)
prefillInherit
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
scrollOffset
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
noScroll
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
spinner
Use this to include a spinner (loading indicator) while the form is loading.
Type: boolean
lazy
Delay loading an inline, embedded form until the form has scrolled into view on the screen.
Type: boolean
height
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
border
Show a border around an inline, embedded form.
Type: boolean
borderColor
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
onSubmit
Fires when the form is submitted, including the submission data.
Type: function (submission: PaperformSubmission): void
onPageChange
Fires when the page changes in a form, including the currentPage and totalPages in each response.
Type: function (event: PaperformChangePageEvent): void
title
Set the title of the embedded form's iframe.
This can be useful for accessibility purposes.
Type: string
dev
Unknown dev attribute.
Type: string
PaperformEmbeddedProps
Extends PaperformProps
Props for the Paperform embedded form.
paperformId
The ID of the form to embed.
Type: string
PaperformPopupProps
Extends Pick<PaperformEmbeddedProps, 'paperformId' | 'spinner' | 'dev' | 'prefill' | 'prefillInherit' | 'onSubmit'>
Props for the Paperform popup form.
onClose
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
License
MIT