Contact Form 7 NOT working

mymakarim · 6 August 2020 15:25

I have recently build my 2nd website “componentity.com” with Frontity. but Contact Form 7 does not work.
Check out this link https://componentity.com/contact and look at the console.

Uncaught TypeError: Cannot read property 'startsWith' of undefined
at onClick (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1)
at Object.l (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at d (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22
at g (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at it (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at at (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at lt (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at dt (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at z (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)

/about/:1 Mixed Content: The page at ‘https://componentity.com/about/’ was loaded over HTTPS, but requested an insecure favicon ‘http://codenawis.com/componentity/wp-content/uploads/2020/08/componentity-fav.png’. This request has been blocked; the content must be served over HTTPS.
Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22 Uncaught TypeError: Cannot read property ‘startsWith’ of undefined
at onClick (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1)
at Object.l (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at d (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22
at g (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at it (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at at (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at lt (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at dt (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at z (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
VM77 react_devtools_backend.js:2273 TypeError: Cannot read property ‘inputVals’ of undefined
at Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:51
at p (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1)
at t (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1)
at Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1
at Qo (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Di (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Ri (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Mi (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at yl (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at su (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
overrideMethod @ VM77 react_devtools_backend.js:2273
4VM77 react_devtools_backend.js:2273 TypeError: Cannot read property ‘invalidFields’ of undefined
at Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:51
at p (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1)
at t (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1)
at Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1
at Qo (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Di (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Ri (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Mi (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at yl (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at su (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
overrideMethod @ VM77 react_devtools_backend.js:2273
6VM77 react_devtools_backend.js:2273 TypeError: Cannot read property ‘inputVals’ of undefined
at Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:51
at Object.addHiddenInputs (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1)
at Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:51
at p (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1)
at t (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1)
at Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1
at Qo (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Di (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Ri (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Mi (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
overrideMethod @ VM77 react_devtools_backend.js:2273
Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:51 Uncaught (in promise) TypeError: Cannot read property ‘inputVals’ of undefined
at Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:51
at p (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1)
at t (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1)
at Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:1
at Qo (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Di (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Ri (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at Mi (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at yl (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)
at su (Componentity - From CodeNawis.module.930f5284ca6a3ea01329.js:22)

mburridge · 6 August 2020 15:56

Hi @mymakarim

I’ve just installed frontity-contact-form-7 in a new project and didn’t encounter any issues.

Can you share a link to a repo of your project so that we can take a look at your code.

mymakarim · 6 August 2020 16:38

Well, in the README.md of the npm package it was written that just install the package and no additional code has to be written.

Anyways this is the repository link

This is my website
https://componentity.com/contact

Note: I guess it might be because my main website https://codenawis.com/componenity is using a free SSL (Sometimes shows NOT secure)

dominique · 6 August 2020 16:45

What version of the package are you running?

I think you’ll need to update the package for Contact Form 7, I think I’ve encountered this problem as well and it’s solved. See: https://github.com/imranhsayed/frontity-contact-form-7/issues/31

mymakarim · 6 August 2020 16:51

Solved @dominique @mburridge
Thank you

mburridge · 6 August 2020 16:54

@mymakarim

Thanks for the link to the repo, your code looks good. I just remembered that there’s an issue with the latest version of Contact Form 7. As @dominique suggests, you can install the frontity-contact-form-7 package manually from here, instead of via npm.

Alternatively use an earlier version of the Contact Form plugin. Go the advanced part of the Contact Form 7 plugin page and scroll down to the bottom. You can choose which version you want to download - choose any version earlier than 5.2.

HardikDevani · 1 March 2021 07:16

Hello @imranhsayed

i’m using Frontity-Contact-Form-7 Package…
whenever i’m submitting CF7 than after submit form going to blank screen

there was received success response but showing blank page and also coming some error in console, see below attachment.

https://prnt.sc/10a1mgo
https://prnt.sc/10a1mx9

so have any solution for this issue?

Thank you.

kasper · 13 March 2021 21:51

I get the same error as @HardikDevani. I’m runing cf7 from the github repo, and v5.1 of the plugin.

I have also tried with the cf7 package from npm, combined with both v5.1, v5.2 and v5.4, and also the cf7 package from github with v5.1, v5.2 and v5.4. I get the white screen every time, after I fix a bug that is present in both packages.

Have you changed the url of state.source.api recently? Because in the index of the cf7 package on line 89, it gets the cf7 rest api url as:

const url = ${state.source.api}/contact-form-7/v1/contact-forms/${ id }/feedback;

But this gives an invalid cf7 rest api url because the state.source.api returns the url with a / at the end, so that line actually outputs for example:

https://wp.site.com/wp-json//contact-form-7/v1/contact-forms/1/feedback

A double //.

So when i noticed that, I went in and changed it myself. So now that error is gone, but now i get the white screen error.

Does anyone have a fix?

HardikDevani · 15 March 2021 04:44

Hello @kasper,

I think you getting double slash “//” after URL, please see this error in response into Network using inspect element, now i can submit my form, so white screen error isn’t related to CF7

i also getting this white screen error into local and on live.

you want to change in package file as mention above
it is fixed - Contact us - Aaradhana Textile Development site

kasper · 16 March 2021 15:37

Hi @HardikDevani,

Do you have a repo for your website?

HardikDevani · 17 March 2021 04:44

Hello @kasper

Sorry, it is a private client project repository so we can’t provide it. I will fix your problem if you can provide me your repo. We got your mail submission from our contact page See below screenshot url. Screenshot by Lightshot

Thanks

kasper · 17 March 2021 08:39

Hi @HardikDevani

I have fixed it as well. I commented out this line, as it was deleting the current message, so when the Message component tried to get the message, it was an empty object, and not a string with the message.

floriandupuis1996 · 6 May 2021 10:24

I notice an error today with the frontity-contact-form-7 npm package

{“code”:“rest_no_route”,“message”:“Aucune route correspondante \u00e0 l\u2019URL et \u00e0 la m\u00e9thode de requ\u00eate n\u2019a \u00e9t\u00e9 trouv\u00e9e.”,“data”:{“status”:404}}

This is what my network is saying when I click on the send button. Any issue with Contact Form 7 update ?

kasper · 6 May 2021 10:45

Hi @floriandupuis1996

I have released a new cf7 package, that works with the lastes version of Frontity and the plugin.

floriandupuis1996 · 6 May 2021 11:23

Alright sounds good I will try

kasper · 7 May 2021 13:39

Hi @floriandupuis1996!

How did it go, did you get it to work?

gideonjb · 9 June 2021 21:17

Hi @kasper

I just installed your recent version of the frontity wpcf7 package. I’m getting a 404 error when I submit, but my main concern is that the browser is also attempting to navigate to the submission link, and I’m wondering if that is expected behavior?

kasper · 10 June 2021 10:22

Hi @gideonjb,

Thats weird, do you have a repo I can look at?

kasper · 10 June 2021 11:09

My website is running that latest version, and it works fine.

alex.fernando.801 · 21 June 2021 18:57

Hello @kasper ,

Thanks for providing a new fixed package of CF7. Unfortunately, when I try to use it, I can see an email on my inbox but the form shows a ‘processing’ message, instead of a ‘successful’ message.

On the other hand, I have another contact form that doesn’t work. it doesn’t send a message to my email imbox. Probably is because I’m using a ‘Select’ field on it , and … it isn’t supported by this package?

Thanks in advance for your reply.