convertkit-react v1.5.5

Using Vue? Try ConvertKit-Vue

Setup

yarn add convertkit-react

Demos

View examples on how to use different templates here and how to style your form with custom styling here

Usage

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.

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

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

Passing custom configuration options

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

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

Configuration Options

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:

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

Contributing

To publish a package:

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

where X.X.X is the version number.