▼
Streaming live at 10am (PST)

Customizing Form Submit Action

#1

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 !

#2

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.

#3

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

#4

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.

#5

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.

#6

Could you give an example of this method ?

#7

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

#8

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