Customizing Form Submit Action

[T-Fab]

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);

---

A word to @webflow & @cyberdave :

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 !

[cyberdave (Dave Sloane)]

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.

[samliew (samliew.com)]

To do this, hold the Alt key while dragging a form element to the page.

Thanks for the tip. Didn’t know you can do this.

[T-Fab]

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.

[DFink (Dave)]

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.

[T-Fab]

Could you give an example of this method ?

[Studio2bDesigns]

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:

<form action="/scripts/FormMail.cgi" data-name="Email Form" data-redirect="success.html" id="email-form" method="post" name="email-form" redirect="success.html">
      <input type=hidden name="recipient" value="youremail@yourdomain.com">
      <input type=hidden name="subject" value="YourDomain Website Inquiry!">
      <input type=hidden name="redirect" value="http://www.yoursite.com/success.html">

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.

Hope that helps a little.
-Bryce
Studio2bDesigns.com

[Aaron]

Great tip! Never new about the ALT Drag thing with forms!

[bigNY (Nik)]

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?

[mkyigitoglu (Kenan Yigitoglu)]

Thanks for that! I’ve created my custom form validation script with this tip.

[Dan_Pustelnik]

@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

all im looking to do is have my form submit with a method=POST to a mailchimp target action (“https://algodesignlp.us7.list-manage.com/subscribe/post”) - so far every forum solution i’ve tried has failed -

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

MailChimp form integration Integration | Webflow University

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:

@T-Fab

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>

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