Streaming live at 10am (PST)

Webflow form - Do not send empty checkboxes

#1

Hi there,

I was wondering, if there were a way to ask webflow form not to send empty or unchecked checkboxes per email when a user fills in a form.

I guess my question is:
how to get webflow to remember and send me only the things the user checked or filled ?

Bonus question:
is there a way to tell webflow to write something else than “true” in the email when a checkbox is ticked ? I work for a swiss theater and people speak french… :slight_smile: Instead of “true”, I’d love to write “réservé”. Not sure if that’s possible ?

Thank you !
Anthony

#2

Umm, I guess it really depends on the use of it, as there are various factors to keep in mind.

Would you be so kind and provide with share link? As this would enable people to suggest the better solution.

#3

Hi @Throatscratch,

sure thing, here is my read-only link

Bellow are some screenshot to better explain my sittuation:

#4

Thanks for sharing. Just to clarify on that specific page, when someone “makes reservation” - sorry I don’t know French - user should be able to select only one option right?

#5

Sure thing.

Nope, the idea of those checkboxes, is to allow the user to make multiple choices at a time, meaning the user can already book different date of the event in one single reservation.

Right now, if he doesn’t click on one of the available checkbox, that unchecked checkbox will appear in the email with the value of “false”. Which is probably expected behaviour. But I don’t want to remember the client which date he didn’t chose :slight_smile: therefore I wish to not display those unchecked checkboxes names and values in the confirmation email.

#6

Hmm, I don’t think I can come up with a solution ( Sorry )
Recently I did something similar to your site - where on the application form I had to pull Dates from CMS - and when the user submits the form, it posted its value. The major difference here is that I needed only one option, not multiple and I used radio buttons instead.

As far as I know, Checkbox will send it’s value - from webflow’s end as true or false by default.

As for the required, i used JS with a logic of removing attribute “required”. Script goes along like this

<script>
// Required validation
$(function(){
    var chbxs = $(':radio[required]');
    var namedChbxs = {};
    chbxs.each(function(){
        var name = $(this).attr('name');
        namedChbxs[name] = (namedChbxs[name] || $()).add(this);
    });
    chbxs.change(function(){
        var name = $(this).attr('name');
        var cbx = namedChbxs[name];
        if(cbx.filter(':checked').length>0){
            cbx.removeAttr('required');
        }else{
            cbx.attr('required','required');
        }
    });
});
</script>

I think u might need to tweak script a bit to fit yours, but hopefully, you get the idea. I am definitely not a pro,i hope someone can help you out better.

1 Like
#7

You… could probably use custom code to delete empty checkboxes upon form submission.

#8

Okies, this is as best as i can get. This is a hack - resulting only removing the unwanted false / true statements.

You can check out the demo page I made

Sharelink: https://preview.webflow.com/preview/magic-land-of-design?preview=1eb54eaf554f2dad777e5073677ef6d6

it’s in the various forms page, check the custom scripts.

**Live Preview to check required fields **: http://magic-land-of-design.webflow.io/various-forms

The result you get in email:


Here Deadpool and Old Boi is selected.

Code is found on g00gl and modified accordingly, I am not the author of scriptage. Therefore there might be better shorter and more logical solutions.
Hope this helps

1 Like
#9

Hi Throatscratch, I’m trying to do something similar - getting rid og input fields that are not filled out…did you change your sharelink? I cannot see a forms page anymore?!
I’m really having a hard time obtaining this…so I’m crossing my fingers that you can and will help me out!? :slight_smile:
Hope to hear from you again, have a great day

#10

Hi Sam,
I’m having a very hard time with something similar to this, do you think you can help me out?
I’m trying to get rid of all non-filled-out-input-fields (since it’s an order list with 300 products):slight_smile: Crossing my fingers that you might be willing to help me with this…
Hope to hear from you - have a great day
Many greetings from Denmark - Louise

#11

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
#12

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 🍦
1 Like
#13

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!

#14

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!

#15

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?

#16

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.




#17

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!

#18

Did you see this one as well:

#19

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!

#20

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.