startbootstrap-clean-blog-jekyll
startbootstrap-clean-blog-jekyll copied to clipboard
Contact form does not work due to recaptcha
I wondered why my contact form does not work.
I checked the network requests.
The request itself looked quite ok
But the HTML returned by formspree does not look that nice.
As you can see, it requests for a captcha to pass.
Please provide a way how to handle this within the theme.
A poor mans version could be to get rid of the ajax at all and to use features, like _next
provided by formspree to show a success message
-
_next
: https://formspree.io/docs/
I will have to test this and get back to you - Formspree may have updated something on their end.
I'd love to know if you guys have fixed this issue....
@reidhock, you could replace all the ajax magic with a simple HTML-only form using formspree.
I think this is what I did at my webpage: https://tobiasmaier.info/contact/ If you have the time, can you create a PR?
@tmaier I'm very new to github... I don't know what "creating a PR" means haha. I will def try what you said tho.
I've done the same as @reidhock.
Formspree does not allow form submissions using ajax from free accounts.
After changing the ajax call to include a dataType attribute:
$.ajax({ url: "//formspree.io/{{ site.email }}", type: "POST", dataType: "json", data: { name: name, phone: phone, email: email, message: message }
I received the following response:
{"error":"To prevent spam, free forms cannot submit via AJAX."}
@yasthil exactly, you need formspree's premium account to make Http requests work correctly. In my case the request returned 401.
It looks like the formspree changed their free tier to no longer allow this to work. Can anyone confirm?
@davidtmiller I can confirm that Formspree changed the free tier, you need to use the gold or platinum subscription to use HTTP requests:
For anyone interested, I adjusted the contact form to work with Formspree free tier here.
For anyone interested, I adjusted the contact form to work with Formspree free tier here.
This took me a step in the right direction. What I did was:
- Copy ciraben's contact.html
- Register a Formspree account
- Verify my email with Formspree
- Make a new form in Formspree
- Copy the URL of the new form
- In the contact form's HTML tag, replace the URL in
action="https://formspree.io/{{ site.email }}
with the copied URL - Add name="message" to the textarea tag attribute of the message field.
It works for me now.
Thank you @ciraben
Thanks @ciraben and @max-torch. As you described few things need to be adjustment. My approach was:
Add the following lines to _config.yml
formspree:
form_id: <your-formspree-form-id>
Adjust the form action url in contact.html
to
action="https://formspree.io/f/{{ site.formspree.form_id }}"
And in same file add textarea name which was missing, therefore not processed by formspree.
<textarea name="message" rows="5" class="form-control" placeholder="Message" id="message" required
data-validation-required-message="Please enter a message."></textarea>