Form Select Element greying out non-relevant form data

Publishing help General
1

Hey Webflow folks and users! I’m new to Webflow and have minimal coding/design experience. Is it possible to grey out non-relevant form data based on what selection the user chooses when using the Select Element in a Form Block? The data I’m capturing changes with each specific user and it would be awesome to limit the amount of information a user is required to put in based on the who they are representing…

Not sure what information is needed from me:

URL: https://www.relaxedagent.com/start
Using: Mac IOS
Uploadcare is currently being used in Form Block

2552×1516 220 KB

2

Yes, but first to show/hide those fields, you will need to group them into different elements/divs.

So, all the fields for “seller” including the image and title, will need to be placed inside a wrapper div, and given an ID in the settings panel, like “seller-fields”.

3

Okay cool. Each cluster of input fields (ie: 3 Listing Agent fields, 3 Buyers Agent fields, etc…) are already inside their own div blocks. After I label them with an ID, how do I code out the behavior to communicate when the user chooses “buyer” or “seller” from the Select Element?

4

Your select element already has an ID “Representing”, so:

$('#Representing').change(function() {

  // <- Insert code to hide all fields here

  switch($(this).val()) {

    case "Buyer": 
      // <- Insert code to show buyer fields here
      break;

    case "Seller": 
      // <- Insert code to show seller fields here
      break;

    case "Both": 
      // <- Insert code to show buyer/seller fields here
      break;
  }
});

As for code to show/hide elements, refer to jQuery documentation

http://api.jquery.com/show/
http://api.jquery.com/hide/

1 Like
5

Thanks for this! From a non-experienced jQuery user, this appears to be a bit more then expected. Now that I have the “show” $( “.target” ).show(); and “hide” $( “.target” ).hide(); code from jQuery… where do I paste the code you provided?

6

It seems obvious that I wouldn’t add the code you provided above to the custom attribute section of the select element so I’m leaning more toward the probability that I paste this in the section right?

2528×1390 257 KB

7

You need to wrap it in script tags and place it in the page footer code section.

8

This topic was automatically closed after 60 days. New replies are no longer allowed.