I’m looking to enable conditional visibility on a form based on a value selected on a drop-down within the form. Does anyone know how to achieve this?
You need to know some basic jsvascript coding, or be good with ChatGPT.
But the approach is-
- Wrap the “conditional” portion of the form in a DIV, and give it an ID
- Give your triggering element ( the select dropdown ) an ID
- Write your script to hide-show the conditional portion based on your select rules
Note, be careful about required fields inside of the conditional area. If you have any and they are not satisfied, the form will be unable to post, and the user will not know why since the validation error is hidden.
Hey Corina, Any luck with this? I need the same functionality. I tried some tutorials with zero luck. Banging my head against the wall now. lol
It’s not complex, but the custom code depends entirely on the HTML you’re generating. If you need some work done, drop me a message.
Another approach that is more attributes based is HTMX, which should accomplish this smoothly- but note my caution about required form fields above.
You’ll need to use custom JavaScript. Here’s a simple way to achieve this:
- Add Custom Attributes to Your Dropdown and Input Field:
For the dropdown, you might have something like<select id="dropdown">in Webflow. Ensure it has an ID or a unique class that you can reference.
For the input field that should only appear when “Others” is selected, also ensure it has an ID or a unique class. Let’s say it’s<input type="text" id="otherInput" style="display:none;">. - Insert Custom Code to Your Webflow Project:
In your Webflow project, go to your page settings and insert custom code before the</body>tag to keep the input field hidden initially and show it only when “Others” is selected.
document.addEventListener(“DOMContentLoaded”, function() {
var selectElement = document.getElementById(‘dropdown’); // Replace ‘dropdown’ with your dropdown’s ID
var otherInput = document.getElementById(‘otherInput’); // Replace ‘otherInput’ with your input field’s ID
selectElement.addEventListener('change', function() {
if (this.value == 'others') { // Assuming the value for "Others" is 'others'
otherInput.style.display = 'block';
} else {
otherInput.style.display = 'none';
}
});
});
You might need to adjust your ID and values accordingly. Hope that helps.
Its been a bit of time, but I followed this to the letter and its not working for me. My dropdown has a unique ID, as well as the div thats supposed to display:none when clicked a specific dropdown value from the input.
With “Value” did you mean the value of the different dropdown items in the webflow settings sidebar?
I’m trying to combine it with this script from Memberstack to change the required fields based on visibility:
Do you think that might be an issue @Nahael_Mele ?
Edit:
I had more luck with this code:
<script>
const dropdown = document.getElementById("dropdown"); //your Contact Form Selection Dropdown ID
const hideContact = document.getElementById("Hide-on-Dropdown-Change"); // The ID of the element/DIV you want to hide once a selection is made
dropdown.addEventListener("change", function() {
const selectedOption = dropdown.value;
if (selectedOption === "dropdown-title") { //The VALUE of the selection item that triggers the hide element
hideContact.style.display = "none";
} else {
hideContact.style.display = "block";
}
});
</script>
There must be a bug or something. because both the native “is required” doesnt work for a dropdown element and neither does it work when i apply this code
Dropdown is generally a navigation element, and does not have a required attribute.
Do you mean Select? The Form Select element does have the ability to set the required attribute, and works fine.
If your form submission is ignoring that setting, you want to check your custom code, make certain the element is enabled ( no disabled attribute, or readonly attribute ) so it participates in form validation. And yes, it could be a bug in your browser or a browser extension but that’s less likely.
@memetican
Well under settings > it does show the same 2 checkboxes when you select a dropdown element. Noticed in the settings, it shows the same elements as input fields
Also when i try a piece of code which uses ms-code=“required-if-visible”, it still doesnt work. When i check the code, it does contain “required”.
But when i check script from webflow. it seems it only checks input items, checkbox and radio, i dont see select item in that code. So to me this is either a bug, but seems more like they forgot to implement it. Do mind, im not a coder, i know a bit of java, python and such. So i sort of understand what the function does. There is no check for the select element or tag
Hey @Rombout,
Can you share your site link to test this out?
The memberscript actually works based on a click event (since the use-case is of conditional visibility) and you can test the demo here and see that when you click on ‘Support’ the select element becomes required and does not allow form submission until its filled.
If you have applied the script as is and there is no conditional visibility enabled, you can probably remove the click listener (in the custom code) and have the fields set to required without the listener events.
That being said, if you don’t want the select element’s first item ‘What is your question’ to be selectable as an option, you can add a couple of lines shown here to ensure that first option is disabled in your select input.
Let me know if this helps.
I see it works there, though difference is, that dropdown is “unfolded”. Not sure how its called in html. I see the structure is the same as an dropdown which also has select and then option
This is the link of my working project; Contact
I made a temp workaround by hidding the submit button untill a question is chosen. You can unhide by using devtools and moving it out from the elements
But when i check webflows code on how it validates a form, it doesnt seem to check a select element. See earlier post. I only see input, checkbox and radio-button being checked
Hi @Rombout-
That’s good, that’s a select element, you can see the name here-
Validation of a required field is handled directly by the browser, Webflow wouldn’t need code for that.
AJ works with Memberstack which built the ms- script you’re using for required-if-visible. He’ll be able to answer any questions if you use that approach.
I can see you’ve created a bunch of <hidden> element wrappers which I assume you’re manipulating through code depending on the selection. That’s fine.
However if you want a more direct HTML approach, you could use <fieldset> instead. With HTML5 fieldsets, when you mark the element as disabled the contents are ignored by the browser during form validation, e.g.-
<fieldset disabled>
<input type="text" required>
<input type="email" required>
</fieldset>
Give them ID’s to make your script targeting easier, and add/remove the disabled state however you like with your custom code.
You can also automatically hide these when disabled using CSS-
fieldset:disabled {
display: none;
}
@Promotiespullen To be fair, 99% of my form setups are direct-to-webhook with a custom action, which means Webflow.js form handling is disabled.
However- you can use custom attributes like pattern, min and max in Webflow form inputs which aren’t directly supported by Webflow. That suggests browser validation is working as well- and possibly in addition to some backup validations by Webflow.js.
Webflow might perform some additional validations on certain field types as part of JSON packaging?
Hey @Rombout ,
I can see that you have enabled the disable first option memberscript that I linked earlier and now when I try to submit the form without selecting anything from the select field, it does not allow me to submit and asks me to fill it first as follows:
Hoping this is the experience you wanted. Let me know if you are facing any blockers.
Sorry for using different account. But I had linked post to w3c page and I was flagged and now I’m locked out. Kind of childish, community guides don’t state anything about link to websites?!?
I fixed this issue I was having. The issue why “required” didn’t work, I added a value to the for option. So believing that blank, it now works
@AJ_Dev that explains why it was working when you checken.
I’m trying to get this flag lifted. Can find any info about that.