How to show/hide elements based on custom field values in signup forms? Answered

February 03, 2024 11:07
6 comments

Hey everyone, is it possible to display elements based on customfield=specific value?

I know you can show or hide depending on if the field is empty or not, but cant find any info about hiding / showing if a custom value matches a specific value.

I redirect people to a pricing page after sign up, and would like to show different pricing blocks depending on their 'country' field at sign up.

Eg, user signs up from canada, pricing element for canada = show, but pricing for USA = hide.

Looked into metadata conditional visibility but i dont think i can attach this metadata via the sign up form on the frontend?

Thanks for any advice!

Comments

6 comments

Shadi null
- February 03, 2024 11:08
It's possible to display/hide items based on a customfield's data!

But it's something you're gonna have to use rey to help you with.

I did something similar, mine basically checks if a person offers the services that a project requires, and if it does, it allows them to place a bid, if they dont have that service mentioned in a specific custom field, then they are not able to place a bid 🙂

To give you a lead,

Ask rey to write you a JS, where the goal is to check the users custom field id (insert your id here) content, if the custom field value =canada (for example) then show element with ID canada-checkout-portal and hide all other payment portals, if the field custom value ="usa" then show element with ID usa-checkout-portal and hide all other payment portals.

Or just have all payment portals hidden by default, so the code only has to show the one required

0
webflow pro guy
- February 03, 2024 11:09
Wow Shadi null you never fail to amaze me!

At first I thought you were referring me to a contractor / memberstack expert but was surprised to see its an AI bot - I didnt even know this existed 🙂

Will give it a go and let you know if it all works out.

Thanks again for your time and the value you regularly add to this group

0

Chukwudi

February 03, 2024 11:09

Hello,

First, thanks Shadi null for coming through as usual.

webflow pro guy Here's a code snippet that should work for you. You can modify it where necessary to suit your scenario.

<script>
document.addEventListener("DOMContentLoaded", async function() {
window.$memberstackDom.getCurrentMember().then((member) => {
  if (member.data) {
    var msLocation= member.data["customFields"]["location"];
    var canadaDiv = document.getElementById("canadaDiv");
    var usaDiv = document.getElementById("usaDiv");
    if (msLocation == "canada") { // Check for custom field Location content
  canadaDiv.style.display = "block"); // show the Canada Pricing Div
  usaDiv.style.display = "none"); // hide the USA Pricing Div
    }
    else {
  canadaDiv.style.display = "none"); // hide the Canada Pricing Div
  usaDiv.style.display = "block"); // show the USA Pricing Div
  }
}
});
});
</script>

webflow pro guy

February 03, 2024 11:10

Hey Chukwudi

I modified the code you sent to fit my use case / custom fields but its not working on the live site.

Im testing with a logged in user that has the correct custom field filled but the code isnt dynamically showing / hiding content.

<script>
document.addEventListener("DOMContentLoaded", async function() {
window.$memberstackDom.getCurrentMember().then((member) => {
  if (member.data) {
    var msCountry= member.data["customFields"]["country"];
    var dollarcheckout = document.getElementById("dollarcheckout");
    var poundcheckout = document.getElementById("poundcheckout");
    if (msCountry == "UK") { // Check for custom field Country content
  poundcheckout.style.display === "block"; // show the UK Pricing Div
  dollarcheckout.style.display === "none"; // hide the USA Pricing Div
    }
    else {
  poundcheckout.style.display === "none"; // hide the UK Pricing Div
  dollarcheckout.style.display === "block"; // show the USA Pricing Div
  }
}
});
});
</script>

Could you take a look at my code please?

Shadi null
- February 03, 2024 11:10
Correct me if I'm wrong, but should the lines that say
```
style.display === "block";
```
Actually be
```
style.display = "block";
```
Same for the none sections
0
Chukwudi
- February 03, 2024 11:12
You're right, Shadi 🤦. Thank you so much for spotting that, I've corrected that in my code. Please webflow pro guy, make that correction as well. If the persists, please share your website URL so I can assist you

0

Please sign in to leave a comment.