How to disable webflow form submit state success and failure

Hi,

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.

<script>
$(document).ready(function(){
    $("#wf-form-Email-Form-4").submit(function(){
        window.open('http://www.aprilxcl.com', '_blank');
        $('.w-form-done').css('display: none !important;');
    });
    
    
    
});
</script>

The .w-form-done display none don’t work.

Is there a way to display webflow form submit state.
This is a test demo
vvideo.webflow.io

This is sharable link
https://preview.webflow.com/preview/vvideo?preview=efe8bfc696ef16c728379465aa22b616

Thanks in advance

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.

I hope this helps,
Dave

Hi Cyberdave,

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.

Hi @Anderson_Min, thanks for your reply. I am checking further with the team to see if there is a custom code workaround.

This is also a good idea for our Wishlist.

When I have some feedback, I will give an update.

Hi @cyberdave,

Added in the wishlist.
https://wishlist.webflow.com/ideas/WEBFLOW-I-1349

Thanks

1 Like

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.

1 Like

Hi @cyberdave

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. :crossed_fingers:

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.

@cyberdave @Anderson_Min

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:

document.getElementById('loginForm').children[0].style.display = 'flex';
document.getElementById('loginForm').children[1].style.display = 'none';

I also added a loading gif in the success block to look like it is waiting for a server response

Thanks for the smart solution!