{"id":24292340,"url":"https://github.com/kit/convertkit-svelte","last_synced_at":"2026-02-19T11:32:37.840Z","repository":{"id":57206902,"uuid":"357398428","full_name":"Kit/convertkit-svelte","owner":"Kit","description":"Embed ConvertKit Forms in Svelte.js web apps","archived":false,"fork":false,"pushed_at":"2021-04-13T03:12:22.000Z","size":47,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-10-09T16:08:08.930Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-13T02:19:52.000Z","updated_at":"2021-04-13T03:12:24.000Z","dependencies_parsed_at":"2022-09-08T17:01:46.539Z","dependency_job_id":null,"html_url":"https://github.com/Kit/convertkit-svelte","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Kit/convertkit-svelte","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kit%2Fconvertkit-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kit%2Fconvertkit-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kit%2Fconvertkit-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kit%2Fconvertkit-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kit","download_url":"https://codeload.github.com/Kit/convertkit-svelte/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kit%2Fconvertkit-svelte/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279059889,"owners_count":26095051,"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","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-01-16T15:29:38.257Z","updated_at":"2025-10-15T07:59:50.575Z","avatar_url":"https://github.com/Kit.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eConvertKit Svelte\u003c/h1\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/ConvertKit/convertkit-svelte/main/static/convertkit-svelte.png\" alt=\"ConvertKit Svelte Logo\" width=\"200\" height=\"96\" /\u003e\n  \u003cp\u003eEasily plug convertkit forms to your Svelte projects.\u003c/p\u003e\n\u003c/div\u003e\n\n\nUsing Vue? Try [ConvertKit-Vue](https://github.com/convertkit/convertkit-vue)\n\nUsing React? Try [ConvertKit-React](https://github.com/convertkit/convertkit-react)\n\n**WARNING: THIS PROJECT IS NOT READY FOR USE**\n## Setup\n\n```sh\nyarn add convertkit-svelte\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-svelte'\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\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkit%2Fconvertkit-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkit%2Fconvertkit-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkit%2Fconvertkit-svelte/lists"}