Hi guys, I am enjoying webflow, I am having a challenge for a specific behavior for a form. The idea is that there are 6 text fields and an email field at the end, but the email field must be hidden and only be shown once at least 4 of the previous text fields are filled, the information in the text fields don’t need to be validated, they could be any data. Here a screenshot of the form:
Hi @francovg great question. If you are using conditions on the element in CMS, you can flag an element to show or hide based on criteria coming from the Webflow CMS.
If you are trying to show or hide the form field based on whether the form field has some input or not, that is not yet a features of the interactions, but there is a custom solution where you can monitor how many fields have values, then if the required amount is reached, then do a click event on an element having a Tap interaction set.
Here is example custom code, where I am targeting the class “user-field” assigned to the fields. I am checking how many fields have no input. When I get to 1, I know that at least 4 fields have been entered and I do a click event in jQuery to fire the interaction I created on the hidden element.
Hi @cyberdave I added the code and it works very nice, I was able to display the last field when 4 fields are filled, but there is an issue, when I press ENTER even when the fields are not filled the hidden field is shown, but in your example that doesn’t happen.
One more thing, I am trying to make the input fields as “time” fields so minutes and seconds can be filled easily, any suggestion to make that happen?
Just in case here is the “read only” link to the project:
@cyberdave I changed to “select” tags now instead of “input” tags, because users will provide information in an easier way, so I changed the custom code you provided to “select” instead of “input”, and the hidden field is being reveiled when I click a second field, not the 4, any idea what must be changed in your code? thanks.
That first code was made for inputs, here is some code that counts how many select fields have a value of 1 (note, you will need to double click on the 00:00 value for each select in the Select field settings, and change the value from to “1” and use the value “1” for all default choices that have a label of “00:00”.