react-paperform-co v1.0.0

react-paperform

A React component for embedding Paperform forms.

Installation

npm install react-paperform-co
or
yarn add react-paperform-co

Usage

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
  • Parameters
• PaperformPopup
  • Parameters
• PaperformSubmissionDataItem
  • display_label
  • key
  • label
  • raw
  • scopes
  • type
  • value
• PaperformSubmission
  • data
  • form_id
  • submission_id
  • total
• PaperformChangePageEvent
  • form_id
  • currentPage
  • totalPages
• PaperformProps
  • prefill
  • prefillInherit
  • scrollOffset
  • noScroll
  • spinner
  • lazy
  • height
  • border
  • borderColor
  • onSubmit
  • onPageChange
  • title
  • dev
• PaperformEmbeddedProps
  • paperformId
• PaperformPopupProps
  • onClose

PaperformEmbedded

• See: https://paperform.co/help/articles/embedding-guide/

Renders a paperform embedded form

Parameters

• props PaperformEmbeddedProps

PaperformPopup

• See: https://paperform.co/help/articles/embedding-guide/

Renders a paperform popup

Parameters

• props PaperformPopupProps

PaperformSubmissionDataItem

Row of the fulled form data.

display_label

Type: string

key

Type: string

label

Type: string

raw

Type: string

scopes

Type: Array[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)

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

• See: https://paperform.co/help/articles/embedding-guide/

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

• See: https://paperform.co/help/articles/embedded-form-submission-handling-draft/

Fires when the form is submitted, including the submission data.

Type: function (submission: PaperformSubmission): void

onPageChange

• See: https://paperform.co/help/articles/embedded-form-submission-handling-draft/

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

• See: https://paperform.co/help/articles/embedding-guide/

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'>

• See: https://paperform.co/help/articles/embedding-guide/

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