Also, in the UseBasin dashboard, on the"Edit" page - one should tick “Submit to this form via AJAX” at the bottom and click save.
@Joe_Hohman - maybe that should be added to the top post where you describe how to set it up?
1 Like
@Diarmuid_Sexton, Did you run into an issue with that option unchecked? I noticed that Basin seemed to use the AJAX method automatically when .json was added to the end of the URL.
1 Like
I think you might be right actually.
However, my test forms weren’t delivering every time but they seem to be now - could have been some other issue though.
1 Like
@Joe_Hohman Thanx a lot! Works great! 
1 Like
@Diarmuid_Sexton This might be relevant to you - if your forms were not delivering every time, I faced the same issue and problem was that input field for the e-mail must had a name “email” in lowercase, not uppercase, hope this helps a bit!
Below is the code to get FILE UPLOADS working with native interactions when using a third party service i.e. UseBasin.
This is the embed code for a single file upload:
<input class="form-field" type="file" id="Single-Upload" >
And this is the embed code for a multiple file upload:
<input class="form-field" type="file" id="Multi-Upload" name="attachments[]" multiple>
It also gets the “Waiting Text” - i.e. “Sending…” from the Submit Button in Webflow and displays it while the form is submitting.
It also disables the submit button while the form is submitting to prevent multiple submissions (as shown previously by @Joe_Hohman)
And here’s the link to the jsfiddle containing this same script as below.
<script>
// USEBASIN FORM - AJAX SUBMISSION
$('form[action^="https://usebasin.com"]').each(function(i, el) {
form = $(el);
form.submit(function(e) {
// stop the form from submitting
e.preventDefault();
form = $(e.target);
// get the form's action parameter and add ".json" to the end
action = form.attr('action') + '.json';
// disable all buttons in form
$(e.target).find('input[type=submit]').attr("disabled", true);
// set "waiting text" from button - i.e. "Sending..." once form is being submitted
var dataWait = $(e.target).find('input[type=submit]').attr("data-wait");
$(e.target).find('input[type=submit]').attr("value", dataWait);
// submit the form via ajax
$.ajax({
url: action,
method: "POST",
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function(data) {
if (data.success) {
// successful submission - hide the form and show the success message
parent = $(form.parent());
parent.children('form').css('display', 'none');
parent.children('.w-form-done').css('display', 'block');
//enable all buttons in form
$(e.target).find('input[type=submit]').attr("disabled", false);
} else {
// failed submission - log the output to the console and show the failure message
console.log(data);
parent.find('.w-form-fail').css('display', 'block');
// enable all buttons in form
$(e.target).find('input[type=submit]').attr("disabled", false);
}
},
error: function() {
// failed submission - show the failure message
parent.find('.w-form-fail').css('display', 'block');
// enable all buttons in form
$(e.target).find('input[type=submit]').attr("disabled", false);
}
});
});
});
</script>
3 Likes
I’ve also updated the code to include a redirect after successful form submission. If the redirect URL is set, it will redirect, if it’s not set, it will show the native success message.
<script>
// 3RD PARTY FORM - WITH FILE UPLOAD AND NATIVE INTERACTIONS (INCLUDES REDIRECT & SUBMIT BUTTON WAITING TEXT)
$('form[action^="https://usebasin.com"]').each(function(i, el) {
form = $(el);
form.submit(function(e) {
// STOP THE FORM FROM SUBMITTING
e.preventDefault();
form = $(e.target);
// GET THE FORM'S ACTION PARAMETER AND ADD ".JSON" TO THE END
action = form.attr('action') + '.json';
// DISABLE ALL BUTTONS IN FORM
$(e.target).find('input[type=submit]').attr("disabled", true);
// GET REDIRECT URL
var dataRedirect = $(e.target).attr("redirect");
// GET & SET "WAITING TEXT" FROM BUTTON - I.E. "SENDING..." ONCE FORM IS BEING SUBMITTED
var dataSubmitText = $(e.target).find('input[type=submit]').attr("value");
var dataWait = $(e.target).find('input[type=submit]').attr("data-wait");
$(e.target).find('input[type=submit]').attr("value", dataWait);
// SUBMIT THE FORM VIA AJAX
$.ajax({
url: action,
method: "POST",
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function(data) {
if (data.success) {
if (dataRedirect !== undefined){
// SUCCESSFUL SUBMISSION - REDIRECT TO PAGE (IF SET)
window.location.href = dataRedirect;
} else {
// SUCCESSFUL SUBMISSION - HIDE THE FORM AND SHOW THE SUCCESS MESSAGE
parent = $(form.parent());
parent.children('form').css('display', 'none');
parent.children('.w-form-done').css('display', 'block');
//enable all buttons in form
$(e.target).find('input[type=submit]').attr("disabled", false);
$(e.target).find('input[type=submit]').attr("value", dataSubmitText);
}
} else {
// FAILED SUBMISSION - LOG THE OUTPUT TO THE CONSOLE AND SHOW THE FAILURE MESSAGE
console.log(data);
parent.find('.w-form-fail').css('display', 'block');
// ENABLE ALL BUTTONS IN FORM
$(e.target).find('input[type=submit]').attr("disabled", false);
$(e.target).find('input[type=submit]').attr("value", dataSubmitText);
}
},
error: function() {
// FAILED SUBMISSION - SHOW THE FAILURE MESSAGE
parent.find('.w-form-fail').css('display', 'block');
// ENABLE ALL BUTTONS IN FORM
$(e.target).find('input[type=submit]').attr("disabled", false);
}
});
});
});
</script>
4 Likes
Updated to include live demo and cloneable showcase. Includes:
- File upload
- Redirect
- Waiting Text
- Show native Success / Error Message
Live demo - https://third-party-form-native-features.webflow.io/
Cloneable Showcase - https://webflow.com/website/third-party-form
JSFiddle of script used - https://jsfiddle.net/diarmuids/0qafw1kn/
5 Likes
Thank you so much for helping with this!
I’m now getting a successful form submission, but for some reason the file is not coming through.
Before trying your script, I was only using this line for the upload field:
<input class="form-field" type="file" id="Multi-Upload" name="attachments[]" multiple>
It was submitting fine, but I was only seeing the name of the uploaded file in basin, not the actual file:
Now, with your script I’m not seeing the “Attachments” field at all. Why do you think that is? Should I be giving that field a specific ID? I’ve been scratching my head about this for a few weeks now. Reached out for Basin for help too…
So my sample form is working perfectly - copy that over and use it. I’ve just sent a test with single file upload and multiple file uploads and they all came through.
Here is the usebasin backend setup just in case you’ve an issue there:
Setup
Edit
Emails
1 Like
If basin is only receiving the name of the file, but not the file itself, you may need to set the “enctype” parameter on your form. To do this, select the form element in Webflow (not the form wrapper), and add a custom parameter called “enctype” with the value “multipart/form”. Hope this helps!
1 Like
Hi Joe, thank you for chiming in!
That didn’t work. Here’s the full line of code:
<input class="form-field" type="file" id="Multi-Upload" name="attachments[]" enctype="multipart/form-data" multiple>
I am not seeing the “attachment” field at all in Basin.
I noticed that you have Submit via AJAX turned on. I didn’t have that at first.
Turning it on didn’t help unfortunately.
I’m going to delete it and start from scratch using your settings. Hopefully that works.
Sorry, actually I realized later that you were submitting via AJAX so the multipart/form-data thing isn’t necessary at all.
Just want to say thank you to Diarmuid for helping with this solution! Everything works smoothly now. Just follow his steps.
Is there any way to use Usebasin or any other solution to make an invisible reCAPTCHA?
Basin supports both click and invisible reCAPTCHA. Choose and use one only.
1 Like
Thanks Jeff!
Are there step by step instructions for this somewhere? My developer and I weren’t able to figure it out.
1 Like
Hi Jeff,
I spent over 5 hours trying every variation and reading every single comment on every forum, and it’s still not working for me.
The regular reCAPTCHA works, just not the invisible one.
Here is a quick video where I’m sure someone can quickly point out what I’m doing wrong:
The page I am testing it on is https://www.doorloop.com/demos
The page is broken because of the code that seems to break the page.
Thank you in advance for your time and help!