Hello,
I would appreciate if you could help me with something. We have a form in our website with some hidden form fields that show up based on a checkbox. We require all the fields to be filled unless a checkbox is mark, then some fields must be left empty (that’s why they are hidden).
I don’t know if this is even possible, and if so, could you explain it in an easy way, I truly don’t know much about code.
Thanks in advance!
Esteban
Hello @akirawavelength 
Sorry about the (very) delayed response. 
You might need to use interactions to hide/reveal your form fields based on a click.
Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.
Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow
Thanks in advance! 
Hi @akirawavelength, From what it sounds like, you are trying to create a custom form validation experience for your site visitors. Is this correct? (it’s hard to say for sure with the info provided - can you add any designs or links to your project so we can get a better idea of what you’re attempting to do?)
If this is the case, you may likely need to write your own form validation script and set up form handling on an external server.
You could also try embedding a custom form solution like wufoo or other online form builders that allow you to make really cool custom forms experiences.
Please let me know if this helps at all - if not, I’m happy to look further into this with you.
Hello guys,
First of all, thanks for the prompt response.
Indeed @thewonglv is right, I want some fields to become required only if a checkbox is marked. I suppose this will have to be done with coding (Which I lack the skill to be honest) therefore I was wondering if there was a way with the current environment. Since it seems there is no native way of doing this in the system, I’ll appreciate if you could point me in the right direction to find out how to write this code. Also I suppose it will then be embedded in the Before tag for the specific page right?
I have added a few screens as requested to make this more clear.
Thanks in advance!
Esteban
You might need to add some custom code.
$('.classname-of-checkbox').on('click', function(){
if($(this).checked) {
$('classname-of-hidden-div-of-other-fields').show();
$('.classname-of-fields-that-need-to-be-required').attr('required');
}
})
For more information on where to put custom code, please refer to this article: Custom code in head and body tags | Webflow University
hope this helps
Thank you! I’ll check this early next week and let you know how it went!
Thanks in advance!
@PixelGeek and @akirawavelength
When you target .attr('name') it only return the value. As it has to require checkbox that can be triggered on or off we need to find out what is the value of the checkbox after clicking before showing/hiding any stuff
Webflow.push(function() {
$('#asd').click(function(e) {
if($(this).prop('checked')) {
// is checked
} else {
// not checked
}
});
});
Once we know if it’s checked or not we can hide or show proper things as well as set them as required :)
The JavaScript Ninja has spoken
Hello @bart and @PixelGeek
Thanks before hand for helping me out with the code part. For what I understand I have to set a script for either the webpage or the whole website before the tag (either through the configuration area or in the individual page configurations)
According to @bart I have to define the value when the checkbox is checked, then it the system will catch and define the attributes for the other field.
As I said I don’t know much about code, so this is probably wrong, but should I put this then?
<script>
Webflow.push(function() {
$('testboxcheck').click(function(e) {
if($(this).prop('checked')) {
// is checked
} else {
// not checked
}
});
});
$('.testboxcheck').on('click', function(){
if($(this).checked) {
$('.hidden').show();
$('.field test').attr('required');
}
})
</script>
Here is the link to the page where I’m running a test to see if this can happen.
Testing form required field
Here is also the webflow preview mode
Preview mode
So far I’ve been unsuccessful on making this happen… I tried with either the field IDs and (currently) the classnames.
Please let me know if there are any changes I should make to this in order for it to work.
Thanks before hand for all your help!
Esteban
<script>
Webflow.push(function() {
$('#Can-I-see-more').click(function(e) {
if($(this).prop('checked')) {
$('.hidden-form').css('display', 'block');
} else {
$('.hidden-form').css('display', 'none');
}
});
});
</script>
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.