Streaming live at 10am (PST)

Form Select Element greying out non-relevant form data

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

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

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?

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

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?

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?

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

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