# convertkit-react

> React library to add convertkit forms to React applications

Latest version **1.5.5** (published 2021-06-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install convertkit-react
pnpm add convertkit-react
yarn add convertkit-react
bun add convertkit-react
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.5 |
| Published | 2021-06-13 |
| First published | 2020-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 967 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 46 |
| Author | Joseph Rex |
| Maintainers | josephrexme |

## Links

- npm: https://www.npmjs.com/package/convertkit-react
- Repository: https://github.com/ConvertKit/convertkit-react
- Homepage: https://github.com/ConvertKit/convertkit-react#readme
- Issues: https://github.com/ConvertKit/convertkit-react/issues
- npm.io page: https://npm.io/package/convertkit-react

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^17.0.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Recent versions

- 1.5.5 (latest) — 2021-06-13
- 1.5.5-beta.0 — 2021-06-13
- 1.5.4 — 2021-06-13
- 1.5.3 — 2021-06-13
- 1.5.2 — 2021-06-13
- 1.5.1 — 2021-06-13
- 1.5.0 — 2021-01-22
- 1.4.7 — 2021-01-18
- 1.4.6 — 2021-01-18
- 1.4.5 — 2021-01-18
- 1.4.4 — 2021-01-18
- 1.4.3 — 2021-01-17
- 1.4.2 — 2020-07-26
- 1.4.1 — 2020-07-13
- 1.4.0 — 2020-07-10
- … 20 more at https://npm.io/package/convertkit-react/versions

## README

<div align="center">
  <h1>ConvertKit React</h1>
  <img src="https://raw.githubusercontent.com/ConvertKit/convertkit-react/main/static/convertKit-react.png" alt="ConvertKit React Logo" width="200" height="126" />
  <p>Easily plug convertkit forms to your React and Gatsby websites.</p>
</div>


Using Vue? Try [ConvertKit-Vue](https://npm.im/convertkit-vue)
## Setup

```sh
yarn add convertkit-react
```

## Demos

View examples on [how to use different templates here](https://codesandbox.io/s/twilight-cookies-ihryz) and [how to style your form with custom styling here](https://codesandbox.io/s/nifty-fog-f8eys)

## Usage

```jsx
import ConvertKitForm from 'convertkit-react'

const MY_FORM_ID = 1234567

function HomePage() {
  return (
    <ConvertKitForm formId={MY_FORM_ID} />
  )
}
```

To get your form id, go to the form you have created on convertkit and choose the HTML embed option.

![form embed screenshot](https://raw.githubusercontent.com/ConvertKit/convertkit-react/main/static/embed-screenshot.png)

Here you'll pick out your form id from the form action in the embed code:

```html
<form
  action="https://app.convertkit.com/forms/YOUR_FORM_ID_IS_HERE/subscriptions"
></form>
```

#### Passing custom configuration options

```jsx
function HomePage() {
  const config = {
    formId: MY_FORM_ID,
    template: 'mills',
    emailPlaceholder: 'Enter an email address',
    submitText: 'Sign up',
  }

  return (
    <ConvertKitForm {...config} />
  )
}
```

#### Configuration Options

|   **Property**   |   **Type**   |      **Default**     |    **Description**   |
| ---------------- | ------------ | -------------------- | -------------------- |
|     format       |   `String`   |        inline        | inline, modal, slidein, sticky   |
|     template     |   `String`   |       minimal        | _Templates in the app + minimal_ |
|    submitText    |   `String`   |      Subscribe       | Text shown in submit button      |
|    headingText   |   `String`   |  Varies per template | Text shown in heading   |
|  disclaimerText  |   `String`   |  Varies per template | Text shown in disclaimer area    |
| emailPlaceholder |   `String`   |      Your email      | Placeholder for email input      |
| namePlaceholder  |   `String`   |   Your first name    | Placeholder for first name input |
|    nameLabel     |   `String`   |      First name      | Custom name label                |
|    emailLabel    |   `String`   |         Email        | Custom email label               |
|    showLabels    |  `Boolean`   |        `false`       | Shows labels with form inputs or only rely on `aria-label`   |
|     hideName     |  `Boolean`   |        `false`       | Hides the name input field       |
|     newTab       |  `Boolean`   |        `false`       | Determines if form should be processed in new tab or current |
|      stack       |  `Boolean`   |        `true`        | Determines if inputs are stacked or placed inline            |
|   hideWarnings   |  `Boolean`   |        `false`       | Hide warnings that are shown due to misconfiguration         |
|   backgroundImage   |  `String`   | default on template | Use a different background image for your form |
|   backgroundOpacity   |  `Number`   |  0.8   |  Opacity here is the inverse of what is on the app which really measures transparency  |
|   buttonBackground   |  `String`   |  Varies per template   |  A [valid CSS color][1] string  |
|   buttonColor   |  `String`   |  Varies per template   |  A [valid CSS color][1] string  |

##### Templates
The minimal template has no preconfigured styling, leaving you options to style
as desired. To get a preconfigured style, use one of the app templates
(clare, mills, rainier, powell etc) as seen on the app.

##### Content
To change the subheader (sometimes referred to as content) you may just add children
inside the `<ConvertkitForm>` component like below:

```jsx
<ConvertKitForm {...config}>
  <p>Subscribe to get our latest content by email.</p>
</ConvertKitForm>
```


## Contributing
To publish a package:

```sh
./publish X.X.X "Message about version"
```

where `X.X.X` is the version number.

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

---
_Source: https://npm.io/package/convertkit-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._