[contact] Make netlify form asynchronous

[stp-ip]

Is this a BUG REPORT or FEATURE REQUEST?: bug

What happened: Currently form submission redirects to a separate page.

What you expected to happen: Use async form submission.

[stp-ip]

Current issue is that with moving to async submissions don't show up in the netlify backend. Needs more investigation.

[Szasza]

The issue may occur due to this line: https://github.com/okkur/syna/blob/eb206a014b7f52a96a78e0914be7d8b74d4f7389/layouts/partials/fragments/contact.html#L24

If the email is set in the config, the data-has-formspree will always be present and will be true.

As a test, I have modified the line to {{- if and (in .Params.post_url "formspree.io") (isset .Params "email") -}} and the form was submitted via AJAX as expected.

[stp-ip]

Good catch. The issue is that formspree is the default and therefore wouldn't be set within the .post_url. So something like this might be more accurate: {{- if and (not (isset .Params "post_url")) (isset .Params "email") -}}

Happy for a PR on the fix, that works for async, netlify and formspree as default.

Sidenote: There is a general plan to split up the contact form into multiple per provider fragments in the long run.

[Szasza]

Thank you for the quick response, it is much appreciated.

I will create a PR tomorrow, just want to register an account with netlify and formspree to be able to test the fix.

Splitting up the contact form is a good idea, it may also be good to provide support for the invisible and disclaimer-only captcha at some point.

Thank you again.

[Szasza]

@stp-ip this task's Formspree-related part may need a bigger change. As far as I can see, Formspree uses randomly generated form URLs for form submission, not email addresses.

At this point, if I don't set a post URL but provide an email in the contact fragment config, the generated URL will be https://formspree.io/EMAIL_ADDRESS_HERE. If I set up a new form in Formspree however, the form URL is something along the lines of https://formspree.io/f/RANDOM_CHARACTERS_HERE.

Before introducing bigger, potentially breaking changes to the contact form, I would like to ask if you think I am missing/overlooking something.

Thank you.

[stp-ip]

Interesting. So formspree changed their endpoint. It was email address before and now a non guessable url.

That means formspree could be handled the same way as any other post_url method I assume and we can remove the formspree specific code and clarify the change in a changelog as well as in the docs. That would also prepare us to split the contact fragment into netlify and general post endpoint supporting ones later on.

[stp-ip]

As this should be fixed as well from what I can see. Happy to get an additional confirmation on this so :)