Contact form action is not compatible with formspree

[tomgoldstein]

Formspree rejects the email submissions from my browser (chrome). This can be fixed by replacing the line (in contact.html)

<form  action="https://formspree.io/{{ with (or .Site.Params.contact.email .Site.Params.email)}}{{.}}{{ end }}" method="POST" name="sentMessage" id="contactForm">

with

<form  action="https://formspree.io/{{ with (or .Site.Params.contact.email .Site.Params.email)}}{{.}}{{ end }}" method="POST" name="sentMessage">

i.e., by removing the 'id' tag from the form element. I'm not 100% sure why the id tag would cause this problem, or whether this is the best fix, so I'm submitting an issue rather than a pull request.

[stp-ip]

The "id" is used to make the contact form async. Without the "id" it won't touch js code. Any error messages?

[tomgoldstein]

When I include the id tag in the form element, and press the "send message" button, it fails and displays the error message "Message could not be send. Please contact us at XXXXXXXX instead." The email also gets never relayed via formspree. When I remove the id tag, everything works totally fine. Also...I just noticed a typo. The standard error message should be "Message could not be senT." But your current contact file says "Message could not be senD." Let me know if you want me to run any further tests, or provide you with code to look at. I'm not an experienced web developer - truth be told I have a very limited knowledge of javascript, otherwise I debug this myself and push a solution.

…

On Fri, Apr 6, 2018 at 2:16 PM, Michael Grosser ***@***.***> wrote: The "id" is used to make the contact form async. Without the "id" it won't touch js code. Any error messages? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#117 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AeI2H152vRWtx0rvVJNq8AREd6vdluHJks5tl7EUgaJpZM4TKdIS> .

[tomgoldstein]

I meant to say "The email also never gets relayed via formspree." On Sat, Apr 7, 2018 at 3:13 PM, Tom Goldstein <tom.a.goldstein@gmail.com> wrote:

…

When I include the id tag in the form element, and press the "send message" button, it fails and displays the error message "Message could not be send. Please contact us at XXXXXXXX instead." The email also gets never relayed via formspree. When I remove the id tag, everything works totally fine. Also...I just noticed a typo. The standard error message should be "Message could not be senT." But your current contact file says "Message could not be senD." Let me know if you want me to run any further tests, or provide you with code to look at. I'm not an experienced web developer - truth be told I have a very limited knowledge of javascript, otherwise I debug this myself and push a solution. On Fri, Apr 6, 2018 at 2:16 PM, Michael Grosser ***@***.***> wrote: > The "id" is used to make the contact form async. Without the "id" it > won't touch js code. Any error messages? > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#117 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AeI2H152vRWtx0rvVJNq8AREd6vdluHJks5tl7EUgaJpZM4TKdIS> > . >

[mpourismaiel]

I'm not sure why this happens and I'm afraid I can't reproduce it anywhere. Would you please do the following and let me know the results?

Search for $('form[id=contactForm] #error').show(); and add a debugger; before it. Then submit the form with developer console ope (right click>inspect) and before the error show up it should pause. Go to the console and write arguments, expand the result and take a screenshot.

[jensibunga]

I had the same problem, it turns out this was the response from formspree:

status 400

{
  "error": "To prevent spam, only Gold accounts may create AJAX forms."
}

[stp-ip]

Then it's a recent change from formspree. Solution would be to disable async code for formspree. That would prevent the issue, but make for a horrible interaction for users and for people having a gold account for formspree.

[tomgoldstein]

Would you still like me to run the debugger as asked above? Or does this resolve the issue? Interestingly, when I removed the id tag I have no problems at all. I realize this makes no sense though because the ID tag should be needed for javascript :)

…

On Wed, Apr 25, 2018 at 6:55 PM, Michael Grosser ***@***.***> wrote: Then it's a recent change from formspree. Solution would be to disable async code for formspree. That would prevent the issue, but make for a horrible interaction for users and for people having a gold account for formspree. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#117 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AeI2H8LuYmETinerSD3E4PT8z24BEPR1ks5tsP76gaJpZM4TKdIS> .

[stp-ip]

No need for the debugger I assume. As with the ID tag. That would support this error. Without the ID tag the ajax js code isn't triggered and the form would default to being a non ajax form as far as I can see.

[jwynn6]

Is there a solution to this yet? I'm having the same issue.

[snowyTheHamster]

i get the error: Message is not sendable due to captcha not loadable. Please contact us at xxx@yyy.com.
The "send message" button is greyed out i cant even click it.

Do i need to set something up other than typing in my email address ?

[stp-ip]

@jwynn6 in terms of solutions. Get a gold account to enable ajax support in formspree or use netlify contact form integration or use a self-hosted email gateway such as caddy mailout.

@snowyTheHamster is the code available somewhere. Assumption would be, that you have noscript or something running, preventing google to load the recaptcha code.

[snowyTheHamster]

hi @stp-ip thanks for the reply.
it's here https://github.com/snowyTheHamster/demo
The code is mostly untouched from the default.

[stp-ip]

@snowyTheHamster you need to configure recaptcha from Google within your config.toml.

There should also be support to just let netlify handle all of the form stuff. Should be a config option.

Also we are about to release v0.11 of Syna, which could be seen as an iteration of the Agency theme. You can try v0.11.0-beta already. There should be minor changes for the release and might have a few changes down the line, but as long as your submodule is pointing to a tag, shouldn't affect you.

Closing this as the actual issue is fixed (needs a gold formspree account).

[stp-ip]

We just released v0.11.0 for Syna. https://github.com/okkur/syna/releases/tag/v0.11.0