search

digitalcraftsman / hugo-agency-theme

Port of Startbootstrap's Agency theme to Hugo
http://themes.gohugo.io/theme/agency/
Apache License 2.0
160 stars 137 forks source link

Contact form action is not compatible with formspree #117

Closed tomgoldstein closed 6 years ago

tomgoldstein commented 6 years ago

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 commented 6 years ago

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

tomgoldstein commented 6 years ago

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 notifications@github.com 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 https://github.com/digitalcraftsman/hugo-agency-theme/issues/117#issuecomment-379334785, or mute the thread https://github.com/notifications/unsubscribe-auth/AeI2H152vRWtx0rvVJNq8AREd6vdluHJks5tl7EUgaJpZM4TKdIS .

tomgoldstein commented 6 years ago

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 notifications@github.com 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 https://github.com/digitalcraftsman/hugo-agency-theme/issues/117#issuecomment-379334785, or mute the thread https://github.com/notifications/unsubscribe-auth/AeI2H152vRWtx0rvVJNq8AREd6vdluHJks5tl7EUgaJpZM4TKdIS .

mpourismaiel commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 notifications@github.com 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 https://github.com/digitalcraftsman/hugo-agency-theme/issues/117#issuecomment-384459294, or mute the thread https://github.com/notifications/unsubscribe-auth/AeI2H8LuYmETinerSD3E4PT8z24BEPR1ks5tsP76gaJpZM4TKdIS .

stp-ip commented 6 years ago

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 commented 6 years ago

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

snowyTheHamster commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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