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… Instead of “true”, I’d love to write “réservé”. Not sure if that’s possible ?
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?
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 therefore I wish to not display those unchecked checkboxes names and values in the confirmation email.
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.
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
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!?
Hope to hear from you again, have a great day
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) 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
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
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.
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 🍦
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!!
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:
There are no silly questions, only silly answers - hope mine will make sense
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.
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?
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!
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)
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!
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.
Instead of “true”, I’d love to write “réservé”. Not sure if that’s possible ?
