File upload + Native Form Settings + Interaction for Third Party Forms i.e. (UseBasin)

Community resources Webflow Tips
1

Third party form endpoint (i.e. usebasin.com) with all Webflow native settings.:

  1. File upload
  2. Redirect
  3. Waiting Text
  4. Show native Success / Error Message (courtesy of Joe Hohman)

Live demo - https://third-party-form-native-features.webflow.io/

Cloneable Showcase - https://webflow.com/website/third-party-form

JSFiddle of script used - Edit fiddle - JSFiddle - Code Playground

For more info on setup see original post here

1 Like
2

Really great, I was looking for something like this! But I got a problem and I hope you know how to solve it. I cloned your project en linked it to my Basin account, but when I test the form I only see the name, emailadres and the message. The files wont show up on Basin. Any idea why?

Kind regards,
Noah

3

I don’t know - keep testing it. Do it again from start to finish. Check that your basin account type supports file uploads.

Also, read all the comments from this thread.

I’ve just tested it on my end and it worked (see screenshot below)

image
image641Ă—677 7.96 KB

4

Hi everyone,

A quick note: file uploads are supported on our paid plans.

Also, we’ve finally come up with a simple solution to submit forms to Basin. Simply add “data-basin-form” to your form element, and Basin will take care of the rest! Basin JS will:

  1. Submit your form to Basin via AJAX
  2. Add invisible reCAPTCHA v2 to prevent spam (make sure to enable reCAPTCHA in your form settings on usebasin.com)
  3. Display a success or error div. It supports Webflow’s native form interactions (success and error messages)

Demo: Basin JS + Webflow - Easily configure Invisible reCaptcha and AJAX forms - YouTube
Webflow example: Webflow Integration - Basin Docs (Basin JS AJAX integration with reCAPTCHA v2 (BETA))
Docs: Basin JS - Basin Docs

I hope that this will help someone out and feel free to reach out and provide us feedback on this script.

Cheers!