{"id":25328665,"url":"https://github.com/kit/convertkit-react","last_synced_at":"2025-06-10T10:09:18.158Z","repository":{"id":42782872,"uuid":"274309569","full_name":"Kit/convertkit-react","owner":"Kit","description":"React-based library to easily plug ConvertKit forms to your React applications","archived":false,"fork":false,"pushed_at":"2023-03-05T02:16:00.000Z","size":965,"stargazers_count":47,"open_issues_count":12,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-09T01:18:29.005Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["josephrexme"],"patreon":"josephrexme","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-06-23T04:36:29.000Z","updated_at":"2024-12-20T19:27:04.000Z","dependencies_parsed_at":"2024-06-20T23:24:20.015Z","dependency_job_id":"d01a063a-8201-4185-9845-34ab43bed2ba","html_url":"https://github.com/Kit/convertkit-react","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kit%2Fconvertkit-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kit%2Fconvertkit-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kit%2Fconvertkit-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kit%2Fconvertkit-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kit","download_url":"https://codeload.github.com/Kit/convertkit-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kit%2Fconvertkit-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259053551,"owners_count":22798439,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-14T02:56:33.620Z","updated_at":"2025-06-10T10:09:18.107Z","avatar_url":"https://github.com/Kit.png","language":"JavaScript","funding_links":["https://github.com/sponsors/josephrexme","https://patreon.com/josephrexme"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eConvertKit React\u003c/h1\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/ConvertKit/convertkit-react/main/static/convertKit-react.png\" alt=\"ConvertKit React Logo\" width=\"200\" height=\"126\" /\u003e\n  \u003cp\u003eEasily plug convertkit forms to your React and Gatsby websites.\u003c/p\u003e\n\u003c/div\u003e\n\nUsing Vue? Try [ConvertKit-Vue](https://github.com/ConvertKit/convertkit-vue)\n\nUsing Svelte? Try [ConvertKit-Svelte](https://github.com/ConvertKit/convertkit-svelte)\n\n## Setup\n\n```sh\nyarn add convertkit-react\n```\n\n## Demos\n\nView 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)\n\n## Usage\n\n```jsx\nimport ConvertKitForm from 'convertkit-react'\n\nconst MY_FORM_ID = 1234567\n\nfunction HomePage() {\n  return (\n    \u003cConvertKitForm formId={MY_FORM_ID} /\u003e\n  )\n}\n```\n\nTo get your form id, go to the form you have created on convertkit and choose the HTML embed option.\n\n![form embed screenshot](https://raw.githubusercontent.com/ConvertKit/convertkit-react/main/static/embed-screenshot.png)\n\nHere you'll pick out your form id from the form action in the embed code:\n\n```html\n\u003cform\n  action=\"https://app.convertkit.com/forms/YOUR_FORM_ID_IS_HERE/subscriptions\"\n\u003e\u003c/form\u003e\n```\n\n#### Passing custom configuration options\n\n```jsx\nfunction HomePage() {\n  const config = {\n    formId: MY_FORM_ID,\n    template: 'mills',\n    emailPlaceholder: 'Enter an email address',\n    submitText: 'Sign up',\n  }\n\n  return (\n    \u003cConvertKitForm {...config} /\u003e\n  )\n}\n```\n\n#### Configuration Options\n\n|   **Property**   |   **Type**   |      **Default**     |    **Description**   |\n| ---------------- | ------------ | -------------------- | -------------------- |\n|     format       |   `String`   |        inline        | inline, modal, slidein, sticky   |\n|     template     |   `String`   |       minimal        | _Templates in the app + minimal_ |\n|    submitText    |   `String`   |      Subscribe       | Text shown in submit button      |\n|    headingText   |   `String`   |  Varies per template | Text shown in heading   |\n|  disclaimerText  |   `String`   |  Varies per template | Text shown in disclaimer area    |\n| emailPlaceholder |   `String`   |      Your email      | Placeholder for email input      |\n| namePlaceholder  |   `String`   |   Your first name    | Placeholder for first name input |\n|    nameLabel     |   `String`   |      First name      | Custom name label                |\n|    emailLabel    |   `String`   |         Email        | Custom email label               |\n|    showLabels    |  `Boolean`   |        `false`       | Shows labels with form inputs or only rely on `aria-label`   |\n|     hideName     |  `Boolean`   |        `false`       | Hides the name input field       |\n|     newTab       |  `Boolean`   |        `false`       | Determines if form should be processed in new tab or current |\n|      stack       |  `Boolean`   |        `true`        | Determines if inputs are stacked or placed inline            |\n|   hideWarnings   |  `Boolean`   |        `false`       | Hide warnings that are shown due to misconfiguration         |\n|   backgroundImage   |  `String`   | default on template | Use a different background image for your form |\n|   backgroundOpacity   |  `Number`   |  0.8   |  Opacity here is the inverse of what is on the app which really measures transparency  |\n|   buttonBackground   |  `String`   |  Varies per template   |  A [valid CSS color][1] string  |\n|   buttonColor   |  `String`   |  Varies per template   |  A [valid CSS color][1] string  |\n\n##### Templates\nThe minimal template has no preconfigured styling, leaving you options to style\nas desired. To get a preconfigured style, use one of the app templates\n(clare, mills, rainier, powell etc) as seen on the app.\n\n##### Content\nTo change the subheader (sometimes referred to as content) you may just add children\ninside the `\u003cConvertkitForm\u003e` component like below:\n\n```jsx\n\u003cConvertKitForm {...config}\u003e\n  \u003cp\u003eSubscribe to get our latest content by email.\u003c/p\u003e\n\u003c/ConvertKitForm\u003e\n```\n\n\n## Contributing\nTo publish a package:\n\n```sh\n./publish X.X.X \"Message about version\"\n```\n\nwhere `X.X.X` is the version number.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkit%2Fconvertkit-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkit%2Fconvertkit-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkit%2Fconvertkit-react/lists"}