convertkit / convertkit-react Goto Github PK

View Code? Open in Web Editor NEW

45.0 45.0 3.0 965 KB

React-based library to easily plug ConvertKit forms to your React applications

JavaScript 77.66% CSS 22.31% Shell 0.02%

convertkit-react's People

Contributors

Stargazers

Watchers

Forkers

theshteves annferracane scottarnold

convertkit-react's Issues

Unexpected identifier React

Hi there,

This looks super handy for me to create a form in my Next.js landing page.

However, following the instructions and importing ConvertkitForm I get the following:

/Users/stef/apps/unjank/unjank-website/node_modules/convertkit-react/bin/convertkit-form.js:1
import React from 'react';
       ^^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at eval (webpack-internal:///convertkit-react:1:18)
    at Object.convertkit-react (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:337:1)
    at __webpack_require__ (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:23:31)
    at eval (webpack-internal:///./pages/index.js:11:74)
    at Module../pages/index.js (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:314:1)
    at __webpack_require__ (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:23:31)
    at Object.4 (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:325:18)
    at __webpack_require__ (/Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:23:31)
    at /Users/stef/apps/unjank/unjank-website/.next/server/static/development/pages/index.js:91:18
/Users/stef/apps/unjank/unjank-website/node_modules/convertkit-react/bin/convertkit-form.js:1

And in VS Code I see the following notice on the line where the import statement is:

Could not find a declaration file for module 'convertkit-react'. '/Users/stef/apps/unjank/unjank-website/node_modules/convertkit-react/bin/convertkit-form.js' implicitly has an 'any' type.
  Try `npm install @types/convertkit-react` if it exists or add a new declaration (.d.ts) file containing `declare module 'convertkit-react';`ts(7016)

However, I can't see you're actually using Typescript, sot that's a little baffling! I'm using a standard Next.js app with a single page and I have other import statements from other libraries working fine, and the rest of the page compiles and renders as normal.

I have this line at the top of my Next.js page component:

import ConvertKitForm from 'convertkit-react'

And then I'm using the component like this in the page:

<ConvertKitForm formId={1537XYZ} template={'clare'} submitText="Join the waiting list" />

(XYZ are numbers in the actual code).

Hope you can help because this looks perfect for my needs.

Cheers!

reCaptcha Iframe loads without proper styling preventing users from verifying

When ConvertKit decides to display a reCaptcha, the iFrame fails to load properly resulting in a cut-off input form (see screenshot below). Additionally, errors in the dev console (screenshot below) suggest the iFrame does not set the proper tags which may explain the display issue.

manifest.webmanifest:1 Manifest: Line: 1, column: 1, Syntax error.
three.cjs:50825 WARNING: Multiple instances of Three.js being imported.
5232 @ three.cjs:50825
[Report Only] Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

[Report Only] Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

[Report Only] Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

[Report Only] Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

[Report Only] Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

dd3ed6e5-5e75-41f8-be47-85df9032abf2:1 [Report Only] Refused to load the script 'https://cdn.convertkit.com/assets/gdpr-14b4f28cd9abaa6e8fd99b7f2c7490130cc95f58638b26b70239eb47ae592a61.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

dd3ed6e5-5e75-41f8-be47-85df9032abf2:1 [Report Only] Refused to load the script 'https://www.recaptcha.net/recaptcha/api.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

VM42:1 [Report Only] Refused to load the script 'https://app.convertkit.com/cdn-cgi/challenge-platform/scripts/invisible.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

(anonymous) @ VM42:1
about:blank:1 [Report Only] Refused to load the script 'https://app.convertkit.com/cdn-cgi/challenge-platform/h/g/scripts/jsd/b5e45436/invisible.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

api.js:1 [Report Only] Refused to load the script 'https://www.gstatic.com/recaptcha/releases/4q6CtudrwcI-LSEYlfoEbDXg/recaptcha__en.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

(anonymous) @ api.js:1
dd3ed6e5-5e75-41f8-be47-85df9032abf2:48 [Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-EM3PzB6rbUinZ6wSYCkYK+ljQIH/MrHDTXcp8HSD5Y0='), or a nonce ('nonce-...') is required to enable inline execution.

dd3ed6e5-5e75-41f8-be47-85df9032abf2:74 [Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-SgJWzQmk/nnYYjrwSSCNn6+qi9mr8lc5KWVRFRVGb6Y='), or a nonce ('nonce-...') is required to enable inline execution.

dd3ed6e5-5e75-41f8-be47-85df9032abf2:74 [Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-1kpvLpadmwVAgBkWkRAB5Wu2FXuyLlgO4RpHWpES3cs='), or a nonce ('nonce-...') is required to enable inline execution.

handler @ dd3ed6e5-5e75-41f8-be47-85df9032abf2:74
invisible.js:1 [Report Only] Refused to create a worker from 'https://app.convertkit.com/cdn-cgi/challenge-platform/h/g/scripts/pica.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

eE @ invisible.js:1
about:blank:1 [Report Only] Refused to create a worker from 'https://app.convertkit.com/cdn-cgi/challenge-platform/h/g/scripts/pica.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

invisible.js:1 [Report Only] Refused to connect to 'https://app.convertkit.com/cdn-cgi/challenge-platform/h/g/cv/result/7bec4b676c0f664d' because it violates the following Content Security Policy directive: "connect-src 'none'".

eD @ invisible.js:1

Is this repository still being maintained?

Is this repository still being maintained? I would like to try to use https://www.npmjs.com/package/convertkit-react again in my MERN application. If so, it would be very useful as there is no solution on-board at CK for SPA applications. Thank you~

Missing templates & options

I tried to setup using "poplar" and it's not working. It looks like all the newer designs are missing.

Also you can't edit the background image for template. It seems a lot of the options in the visual designer are missing.

Are you planning on adding Type definitions?

Hi!

Awesome package, really like the fact that it just works!
Are you still maintaining it?

Are you planning on offering type definitions?
I'm getting the

Could not find a declaration file for module 'convertkit-react'.

and I think it would be very beneficial to add this.

× Error: Invalid hook call.

Trying to bring Convertkit form into a React application. Directly using the JavaScript embed provided by CK <script async data-uid="e9274113f5" src="https://astounding-creator-7935.ck.page/e9274113f5/index.js"></script> does not work as-is in React. Using convertkit-react, the connection is made but the template is not being brought in. I am getting: Error: Invalid hook call.

The example usage does not show the code in relation to the render() function.

This is the standalone form https://astounding-creator-7935.ck.page/e9274113f5

import Container from 'react-bootstrap/Container'
import ConvertKitForm from 'convertkit-react'

const MY_FORM_ID = 2248904
class Convertkit extends React.Component {   

      render() {  
        const config = {
            formId: MY_FORM_ID,
            template: 'cocoa',
            // emailPlaceholder: 'Enter an email address',
            // submitText: 'Sign up',
          }
          
          return (
                <Container className="section">
                    <p>Yo</p>
                    <ConvertKitForm {...config} />

                </Container>                                  
        )
    }
}

export default Convertkit;```

Doesn't seem to render in Gatsby and errors in CodeSandbox

Hi, thanks for this.

I tried this out this morning and it wouldn't render in my Gatsby project so I tried in a CodeSandbox and that gave a reference error "React is not defined"

I have imported the lib and used the example from the README, it seems that earlier versions work 0.0.1-0.0.3 but nothing more recent.

Reproduction here: https://codesandbox.io/s/strange-rubin-q8246?file=/src/App.js

Thanks

Issue on Next 12 - CommonJS script issue

Hello

I recently updated a project of mine to Next 12 and then also updated the converkit-react library to 1.5.5.

When I startup the project and load my page with the form on it I now get the following error.

error - unhandledRejection: ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/workspaces/project/node_modules/convertkit-react/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

I do not think I am going anything special. This is a vanilla next project and I import the form with the following.

import ConvertKitForm from 'convertkit-react';

I am not sure what might be going wrong here but I see in the project history there was a release specifically for Next around commonjs a few releases back.

Maybe something has changed with Next 12?

Console error in Next.js

Following the readme. This came up in console from the basic example.

Is there anyone who could provide some help with this with steps to fix this?

Thanks!

error - ReferenceError: require is not defined in ES module scope, you can use import instead

This file is being treated as an ES module because it has a '.js' file extension and '/node_modules/convertkit-react/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Is this library still being maintained?

Looks like there are several open issues that haven't been addressed in a long while. Is this library still being maintained?

Support for reCaptcha?

Hello!

I am wondering if there is a configuration option that can be used to enable invisible reCaptcha on the forms?

If not, any idea how that could be added/supported?

Support setting the 'success message'

I'm using the cocoa model, it has support to change by prop for 'Show a success message'?

Support setting the button color

Using the Clare template but I really need to set the color of the button, is it something you support / will support?

Customize template options

Hey team. Currently, the only way I can specify a template is with a string:

<ConvertKitForm
    template="mills"
    headingText="Sign up for the waitlist"
    formId={1}
  />

I may be missing something, but how would we go about customizing the template options? For example, say we want to disable the powered_by option? It does't look like there's a way

Avoiding redirect after signup without using template

Right now I don't seem to be able to avoid a redirect to the convert kit post signup page unless I use one of the templates such as 'clare' -- is there anything that I'm missing, or if not, could you consider this a feature request?