The use case is I use webflow build landing page to collect email, After people sign up, It will redirect to thank you page in new tab, So there is no need using webflow form submit state.
By default, success state is “Thank you! Your submission has been received!”. I don’t need that. I want it just the sign up form, don’t have the success or failure state. Because I have a thankyou page in new tab.
I use jQuery submit() function to redirect in new tab, But I don’t know how to disable webflow built-in form submit state.
Hi there @Anderson_Min, you can put the url to the page to redirect to in the Redirect field in Form settings, but other than that there is no native way to suppress the success and failure state messages.
Many thanks~
I know If I put URL in the Redirect field, It will not open in a new tab. I learn that webflow use ajax to submit. So I add custom code to submit in a new tab.
Is there any way walkaround to disable webflow success/failure state, don’t judge and respond relative information as form submit.
The button that comes with the form is of type “submit”. You can remove the sumit button and add a regular button with the ID you use in your JS code. This way, you will benefit from the input fields, add your own functionlity without triggering the form submittsion.
Did ya find solution? I am also facing same issue and I am pistoff. I can’t hide that Success message.
I see that few users asked about this 4 years ago but I guess developers didn’t worked on that…
HI.
Deleting divs with messages would solve problem, cause it will be nothing to show after submitting. Look for them as below and delete it manually from index.html (or whatever page you need).
<div class="w-form-done">
<div>Thank you! Your submission has been received!</div>
</div>
<div class="w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
It’s been a while since this question was posted, yet no solution is available. I have faced the same problem, so I thought, why not find a solution. I dig up the webflow.js file and found out how they handle the form submission. And Lucky, I have found the solution.
Here is the code which allows you to submit the form to the webflow server(as a native webflow form) but allows you to define your Success and Error scenarios(Instead of the default success and error block).
function makeWebflowFormAjax( form, successCallback, errorCallback, whileSubmitingForm) {
let siteId = $('html').attr('data-wf-site');
let formUrl = "https://webflow.com" + '/api/v1/form/' + siteId;
var payload = {
name: form.attr('data-name'),
source: window.location.href,
test: Webflow.env(),
fields: {},
fileUploads: {},
dolphin: /pass[\s-_]?(word|code)|secret|login|credentials/i.test(form.html()),
};
findFields(form, payload.fields)
whileSubmitingForm()
// call via ajax
$.ajax({
url: formUrl,
type: 'POST',
data: payload,
dataType: 'json',
crossDomain: true,
success: function (resultData) {
if (typeof successCallback === 'function') {
successCallback(resultData);
}
},
error: function (e) {
// call custom callback
if (typeof errorCallback === 'function') {
errorCallback(e)
}
}
});
}
function findFields(form, result) {
result = result || {};
form.find(':input:not([type="submit"]):not([type="file"])').each(function (i, el) {
var field = $(el);
var type = field.attr('type');
var name = field.attr('data-name') || field.attr('name') || 'Field ' + (i + 1);
var value = field.val();
if (type === 'checkbox') {
value = field.is(':checked');
} else if (type === 'radio') {
if (result[name] === null || typeof result[name] === 'string') {
return;
}
value = form.find('input[name="' + field.attr('name') + '"]:checked').val() || null;
}
if (typeof value === 'string') {
value = $.trim(value);
}
result[name] = value;
});
}
function validateForm(form){
if (form[0].checkValidity()){
// A valid form ready for submit
makeWebflowFormAjax(form, successCallback, errorCallback, whileSubmitingForm)
}
else{
form[0].reportValidity()
}
}
function successCallback(resultData){
// Define here What should happen after successful Form Submission
alert('Heyy, Successfully submit the form using Ajax to webflow Server')
}
function errorCallback(e){
// Define here What should happen after Failure of Form Submission
alert('Something went wrong while submitting the form using Ajax to webflow Server')
}
function whileSubmitingForm(){
// Define here What should happen while submitting the form data and waiting for the response
$('#mirror-submit-btn').text('Please wait..')
}
$('#mirror-submit-btn').click(function(){
let form = $('#from-id')
validateForm(form)
})
You need to have normal button or link block, not the submit button inside the form.
Note: This does not handle the file upload, so if submitting file with your form this might not work.
For anyone wondering how to solve this, just mark the whole form with ID and then add custom code to hide the success block and show the main block again, something like this:
