startbootstrap-clean-blog-jekyll icon indicating copy to clipboard operation
startbootstrap-clean-blog-jekyll copied to clipboard

Contact form does not work due to recaptcha

Open tmaier opened this issue 6 years ago • 12 comments

I wondered why my contact form does not work.

I checked the network requests. bildschirmfoto 2018-11-10 um 15 28 33

The request itself looked quite ok image

But the HTML returned by formspree does not look that nice. image

As you can see, it requests for a captcha to pass.

Please provide a way how to handle this within the theme.

tmaier avatar Nov 10 '18 14:11 tmaier

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/

tmaier avatar Nov 10 '18 14:11 tmaier

I will have to test this and get back to you - Formspree may have updated something on their end.

davidtmiller avatar Feb 01 '19 06:02 davidtmiller

I'd love to know if you guys have fixed this issue....

reidhock avatar Aug 24 '19 12:08 reidhock

@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 avatar Aug 24 '19 13:08 tmaier

@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.

reidhock avatar Aug 26 '19 05:08 reidhock

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 avatar Sep 02 '19 19:09 yasthil

@yasthil exactly, you need formspree's premium account to make Http requests work correctly. In my case the request returned 401.

MalwareWerewolf avatar Sep 14 '19 08:09 MalwareWerewolf

It looks like the formspree changed their free tier to no longer allow this to work. Can anyone confirm?

davidtmiller avatar Jun 18 '20 20:06 davidtmiller

@davidtmiller I can confirm that Formspree changed the free tier, you need to use the gold or platinum subscription to use HTTP requests:

image

image

MalwareWerewolf avatar Jun 26 '20 10:06 MalwareWerewolf

For anyone interested, I adjusted the contact form to work with Formspree free tier here.

ciraben avatar Sep 23 '20 09:09 ciraben

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:

  1. Copy ciraben's contact.html
  2. Register a Formspree account
  3. Verify my email with Formspree
  4. Make a new form in Formspree
  5. Copy the URL of the new form
  6. In the contact form's HTML tag, replace the URL in action="https://formspree.io/{{ site.email }} with the copied URL
  7. Add name="message" to the textarea tag attribute of the message field.

It works for me now. image Thank you @ciraben

max-torch avatar May 23 '21 10:05 max-torch

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>

maroskukan avatar May 12 '22 19:05 maroskukan