StartBootstrap / startbootstrap-clean-blog-jekyll

A Jekyll version of the Clean Blog theme by Start Bootstrap
https://startbootstrap.com/themes/clean-blog-jekyll/
MIT License
2.09k stars 2.68k forks source link

Contact form does not work due to recaptcha #167

Open tmaier opened 5 years ago

tmaier commented 5 years ago

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

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

davidtmiller commented 5 years ago

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

reidhock commented 5 years ago

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

tmaier commented 5 years ago

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

reidhock commented 5 years ago

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

yasthil commented 5 years ago

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."}

MalwareWerewolf commented 4 years ago

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

davidtmiller commented 4 years ago

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

MalwareWerewolf commented 4 years ago

@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

ciraben commented 3 years ago

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

max-torch commented 3 years ago

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

maroskukan commented 2 years ago

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>