In a form, how to have a hidden field and show it only after a minimum of 4 fieds of 6 were filled

Design help Custom code
1

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:

image
image1280×800 123 KB

And here is the webflow link:

Thanks!

2

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.

47%20PM
47%20PM1902×1246 193 KB

Here is an example site you can clone to see how it was done: https://webflow.com/website/Conditional-Hidden-Form-Field-Custom-Code-jQuery

Here are some good resources:

Using custom code in the head and body: Custom code in head and body tags | Webflow University

Using custom code in an embed component on the page: Custom code embed | Webflow University

1 Like
3

Hi @cyberdave I really appreciate your help, I will learn about "conditions’ although I wasn’t going to use that, but I think I will get this working. Thanks again.

4

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:

https://preview.webflow.com/preview/hoptix720?preview=f04241a4edf37b770d25dbc526823109

Thanks again, I appreciate your help.

5

@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.

6

Hi @francovg,

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”.

Here is some new code you might try:

<script>
$("select").blur(function(){

 var count = 0;
   $('select').each(function(){
          if($(this).val() != "1"){
       count ++; 
     }
  })
    
    if(count == 4) {
      $( "#hidden" ).click();
    }
});
</script>

Replace the original code with that code and republish.

I hope this helps.

7

@cyberdave you are the best, thanks a lot. I am learning Javascript because I see how powerful is knowing Webflow and Javascript.

1 Like
8

Hi @cyberdave,

Is the read only site still available? It seams to be redirecting to another page.

I am trying to use this method to reveal the reCAPCHA once the form is filled.
The contact form is at the bottom of the home page.
https://preview.webflow.com/preview/roarkeclinton?preview=4a3183f97b28ad81d8989678ec829ac5

Best,
Roarke