After being annoyed that webflow doesn’t allow custom or blank form actions out of the box (big no-no) and after some investigating, I came up with the following code to cancel the default webflow form handling and replace it by your own:
Paste this in Site Settings > Custom Code > Footer Code to affect the entire site, or Page Settings > Footer Code for forms in that page only.
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
// === Custom Form Handling ===
// unbind webflow form handling
$(document).off('submit');
// new form handling
$('form').submit(function(evt) {
evt.preventDefault();
alert("Your custom action here");
});
});
</script>
Pro Tips:
You can use Chrome’s “event listener” tab in the developer menu to look for functions bound to your DOM
You can also use this trick from stack to print all attached functions of a DOM element to the console as a nested object:
var elem = $('#someid')[0];
var data = jQuery.hasData( elem ) && jQuery._data( elem );
console.log(data.events);
We love how easy you make it to build quick prototypes and websites, and also how easy you make more complex things for new users like form submission … BUT please don’t silo in your users and allow more advanced web developers (who are already on a paying plan) to access functions when needed out of the box (like custom form actions ! - really there are countless questions on the forum about this topic).
Thank you & keep up the good work !
Hey @T-Fab, first, thanks for the nice example of customizing the submit.
I think this is both a Pro custom tip, and also a Wish List item, to allow for the default form handling to be turned of, or to perhaps give the ability to specify a function to call when the form is submitted.
Alternatively, if the goal is to create a form, and then manipulate those form elements and submission behavior with your own script, a solution may be just to drag the form input elements from the Add Element panel to the page, without the form block.
To do this, hold the Alt key while dragging a form element to the page.
I totally hear you and I think it would be a good idea to build the option to control the form submit actions in a few more ways.
Indeed good to know this ALT function, but I wish it would be a lot more obvious. I also searched the forums about custom form submissions and only came up with super complex ways to do it, like embeds etc.
On a note: I think it rather belongs in Tips & Tricks, because, although the last part might be a direct request, most of the post is about how to get a custom form to work and would indeed help people like me desperately looking for such a solution (unfortunately 2 categories seem not possible).
PS: I added an additional post on the wish list category.
You can also target specific form actions using the target parameter in the form settings. This is how you can make a form go to mail chimp or another service. I have actually even used the built in forms to trigger a php form to email custom script to bypass webflow’s form service and it worked well.
Hey @T-Fab - An example of what @DFink was referring to
in regard to using custom form actions in the submit button, and
using an external script to process your form outside of Webflow,
would be something like as follows:
You can modify the form action rather simply straight from the designer,
however the “hidden” input’s that follow, are what I use to set preferences in my php emailer.
It requires hidden input’s in your form that designate things such as where to send the email, etc…
I’ve had to manually edit my html file and add these lines every time I export a new version of my Site,
but I’m about to experiment with a couple of different ideas, such as embedding html objects, etc.
Hello. Thanks for the code. But i can’t find answer will it work if i unbind webflow form submit in webflow.push and run my custom submit in document ready.
and custom code will be in page code. webflow.push in global?
@T-Fab speaking of silo’d users, im in that very boat! Webflow’s hosting is too expensive for my clients- so like many I pay for a lite plan and export code to be hosted elsewhere- webflow is great in many ways and not so great in this way when it comes to forms- i like how my form is styled and before i go off building that over again i figured let me see what the experts have to say
whenever i submit the form - it generated a GET request -
i tried configuring the form block with the POST and action target per this guide
but -no dice this didn’t change anything
i’ve gotten as far as realizing that by having a Form Block in my code no matter what i do to change the method and post of the html form it gets superceded by webflow’s native form functionality which creates a GET request when i submit the form.
that’s where this script comes into play:
after adding this to the site footer - i get the alert popup for my custom action -woohoo no more GET requests that i couldn’t for the life of me figure out where they were coming from -
But this is where i get stuck - how do i have the submit function correctly POST the form data to the required action target.
i’m not entirely sure how i should go about that with the JS- sorry in advance as i am still a hatchling web developer and have been stumped by how to setup the JS.
is there an easy way to have the new form handling script just trigger the html <form "action="" method="post" ... > that i have setup in the html code of the form block?
Btw @cyberdave i have tried using alt + inserting input text elements with no luck - see the img
appreciate any advice in advance on how to get a simple form working on the exported site using the script
This is a frustration I also have with Webflow because the Webflow CMS is not geared to my needs. A database like MySQL just works better for me. I discovered Xano that offers that database functionality, Still getting data from a Webflow form into a Xano table was not apparent until I saw this video from Xano on YouTube.
Webflow does not have an image file upload functionality as robust as Uploadcare and the CMS is not as flexible as Xano.
I have not figured out yet how to set up form submissions from different pages. But the form submission JSON payload does contain the name of the form, I’ll have to set up custom APIs that test for each form name or button and call subsequent functions and endpoints to get the job done.
With Webflow, Uploadcare and Xano I can get images uploaded by users on the fly and stored in Xano. (Actually Xano stores the imageURL that’s in the Uploadcare CDN at Amazon.) But it works.
I was successful at completing the Webflow form submission Webhook into Xano, and putting data into the correct table at Xano.
I did this through conditional statements on the Xano side, and dot notion for the form name to filter with if then statements. This for unique (as in multiple or different) Webflow forms.
How did you come along on your efforts @david78737 ?
I don’t understand any of this code stuff. I wish I did.
What I would like to do, is when one radio button from each Group is selected (‘Sex’ and ‘Age Range’) then the form is automatically submitted and I can remove the ‘Submit’ button.
Hey Dave, thank you very much for your input in this topic.
I have a specific need of being able to post different form handlers inside a cms collection page, this would mean to dynamically change the ACTION field on the form settings in every item, but it seems there’s no native way of achieving this. My best bet would be through a JS code similar to what T-Fab posted originally, but I wanted your opinion on this, if it’s not much trouble. Thank you in advance.
