Webflow form - Do not send empty checkboxes

Hi Anthony,
trying to obtain something similar - did you ever make this work like you wanted?
Really in need of some good news on this issue, as my client has +300 products to choose from, so the form data output cannot show all form fields:-)
Hope that you did manage to get yours done and will share how you did it?!
Many greetings from Louise in Denmark

1 Like

Hi @Louise_Christensen,

Back in the days I could not write javascript so I did not solved my problem.
Now I’ve learnt how to write simple javascript so I gave it a try.
I made a codepen for you to have a look at.

Codepen:
https://codepen.io/anthonysalamin/pen/yWzJOG

The idea is to prevent the default send behaviour on button click.
Then execute a function that checks any empty inputs, then remove them from the form element. Then only continue the default send behaviour by invoking the submit(); function. It seems to work well on codepen, it should work on your Webflow project too.

Try add the respective class and id to your inputs, form and submitt button elements as shown on the HTML of my codepen. Then wrap the javascript inside its <script> tag and copy paste the code before the end of the </body> tag in the custom code section of the page.

Hope that helps,
Anthony

Below the code snipet:
I commented each steps for you to understand what’s going on.

// on document ready
document.addEventListener("DOMContentLoaded", event => {
  // define form element
  let form = document.getElementById("wf-form-contact");
  console.log(form);
  // define submit button
  let submitButton = document.getElementById("submitButton");
  console.log(submitButton);

  // on button click
  submitButton.addEventListener("click", event => {
    console.log("button clicked");
    // prevent the form from being sent
    event.preventDefault();
    // disable empty inputs 🧠
    disableEmptyInputs();
    // submit cleaned form
    form.submit();
    /*
    // for development only
    setTimeout(function() {
      form.submit();
    }, 1000);
    */
  });
});

// disableEmptyInputs() declaration
function disableEmptyInputs() {
  // create an array of all targeted inputs
  let inputs = document.getElementsByClassName("inputsField");

  // for every input of the array
  for (let i = 0; i < inputs.length; i++) {
    let input = inputs[i];

    // check if the input value is empty or null
    if (input.value === "" || null) {
      // disable empty input
      input.disabled = true;
      console.log(input);
    } // end of if statement
  } // end of for loop
} // end of disableEmptyInputs() declaration

// go get an 🍦
2 Likes

oohhh wow…I’m blown away by the help that you and others provide in here! Thank you SO MUCH for your help on this, I’m excited to give your code a try!! :slight_smile:
I’m definately not into Java, after I took one course at the university, but I reckon I have to overcome that, like you did:-)
and you wrote comments and icons - I love it, thank you!!
If I have any time left over tonight (at home with three kids) I will try it and if it works, I’ll buy you an ice cream! I will let you know how I manage or perhaps ask you a question!
Thanks again for your time and help, this is just freaking AWESOME, if only the rest of the world were like you guys in here, it would be a nicer place, right!

Hi again, sorry for perhaps asking a stupid question :-/
I have already used a webflow form for this - with a collection inside of it…
the form you wrote in HTML, should I put this in custom html here:

Here’s my shared link:https://preview.webflow.com/preview/allegaarden?utm_source=allegaarden&preview=d56fa89f5d62d73c0298a3a04d9789c0

I’m a bit confused as to where to add your scripts :grimacing:

hope you have time to give a quick answer as I’m so eager to try your beautiful scripts!

perhaps this is a break-through?!


I see another codepen now than yesterday…so just tried the new id’s, class etc…but the action? Should I “turn off” the default webflow form action or?

Hi Louise,

There are no silly questions, only silly answers - hope mine will make sense :slight_smile:
The HTML form I wrote in my codepen was just to reproduce the Webflow form structure.

I made a quick Webflow project for you to have a look at.
However, unlike codepen, it seems Webflow has its own default behaviour with submit button…

We first need to unbind that default behaviour from webflow, then run our script.
Classes and IDs are to be setup in the css panel of the elements.

Javascript is to be, for now, copy pasted within the custom code area at page level.
As you can see, I modified the script to unbind Weblfow default behaviour but no luck so far.
Here is the post I inspired myself from.

We might need the precious insights of @cyberdave, @T-Fab or @webdev maybe ? :slight_smile:

Read-only link here:
https://preview.webflow.com/preview/empty-input-test?utm_source=empty-input-test&preview=59510b7dfb5d41285b53bea87cd7bfcb

Updated codepen here:
https://codepen.io/anthonysalamin/pen/yWzJOG
PS: if you open the console, you can see what the script is doing to your empty inputs.




Thank you for being so nice Anthony!

so…as I see it…it’s all about the action now right? I need to make this override the custom action from webflow, am I right?
what about the method? get/post?
I also read the old post from T-Fab, just tried to add that (probably wrong) to cancel the default webflow form handling.
This was not included in your code, was it?

Here’s my share link, if you would be so kind to look at it…https://preview.webflow.com/preview/allegaarden?utm_source=allegaarden&preview=d56fa89f5d62d73c0298a3a04d9789c0

it’s the page called: produkter (I have made a copy under “produkter_u_formblock” to try Dave’s suggestion of dragging form elements without formblock)…

Ooohhh boyyy this is really a tricky one, but I have faith that one of you clever code geniuses can break this puzzle!!
HOPING for some great news!!
Again thank you so much for helping me out here! I am beyond grateful!

Did you see this one as well:

Hi Anthony
if it is not possible to make it work - is it possible to make the input from filled out forms a different color?
So that owner of chicken farm (yes this is the case) can quickly get the overview of the order (when the mail will contain +300 lines):slight_smile:
AND is it possible to show the filled out fields to the client, once he/she pushes “order/summit”? This is their old form (the table)=> http://www.allegaardenskylling.dk/cm25/

Hope that you will still help me out - looking forward to hearing from you again.
Thanks for all your help on this!

Hi @Louise_Christensen,

There is an alternative to Webflow email submission. Back then, I used a Webflow / Zapier integration where the user would fill in a webflow form and would then receive an email confirmation not from Webflow but from Zapier… with the data from Webflow but formated in a nice way.

With Zapier, you can parse (analyse) the data submitted from Webflow which allow you to add “steps” before sending an email out back to your client. So it would be possible, with Zapier, to analyse the empty input and delete them from the email sent at the end.

It should be doable with a zapier conditional step and/or custom code. The entire process however, isn’t really trivial.

OKAY - this is super information, thank you very much Anthony! thank you a lot for all your kind help on this issue!! I owe you an ice cream!! :slight_smile:

Anthony, just spoke to client and she got so mad… :-/
They have the place up for sale, so she’s not really willing to pay for Zapier… so I’m thinking that I have to pay for it:-/ Do you think the starter plan is enough for this one?
Do you have experience with Cognitoforms?

Hi @Louise_Christensen,

I believe you would need at least a starter plan to access premium features like filters and formater. Reguarding the Cognitoforms, I have never heard of it yet.

Ok - thanks Anthony! and you mentioned that I still might need some custom code to make it work with Zapier, right?

yes, to detect parsed empty input field.

Okay - is that hard to do or was that exactly what you did with your previous project?

The Zapier integration is not that easy to set up, I found the process quite tricky actually.

To be able to parse the email sent from Webflow, you need to setup a Zapier parse box (a sort of mailbox to receive email from Webflow)

Then use that parse box to “teach” Zapier how to correctly parse the email received from Webflow.

Then on your Zapier zap, you will be able to access the parsed email to recognise where and when filter out empty fields with custom code.

Once the tempty field are filtered out, you can reformat your email before sending it automatically to your client or which ever adress you like.

peewww sounds pretty hard to me…but as long as I know it is 100% doable, then I feel better…
so you did this with your project with the “Starter plan”?

Just wondering: do you know if it is possible to manipulation the data outform to show lines in columns and make the input have another color?
Just wanted to hear if I somehow can make the standard webflow form work for my client…so that all lines are shown, but in columns and e.g. red font color on the input values?
THANKS!

It is not possible to format forms with Webflow unfortunately.
Zapier should give you this flexibility however.