How to merge multiple Memberstack fields into one Webflow input field? Answered

• 

  Chukwudi Onyekwere

  • Edited October 14, 2024 17:11
  • Official comment

  Springthrough Consulting
  Here's how you can combine the First Name and Last Name fields and populate a single Webflow input field:

  Step 1: Set Up Your Webflow Input Field
  In your Webflow project, give the single Name field an ID (e.g.,  `name-input`).

  Step 2: Add Custom JavaScript
  Add the following script to your Webflow project:

  1. Go to your Webflow project settings.
  2. Navigate to the Custom Code section.
  3. In the Before </body> tag area, add the following script:

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Function to populate the Name input field
      window.$memberstackDom.getCurrentMember().then(async ({ data: member }) => {
        if (member) {
          // Combine First Name and Last Name
          const firstName = member["customFields"]["first-name"] || '';
          const lastName = member["customFields"]["last-name"] || '';
          const fullName = `${firstName} ${lastName}`.trim();
          
          // Populate the Name input field
          document.getElementById('name-input').value = fullName;
        }
      });
    });
  </script>

  Step 3: Publish Your Changes
  After adding the script, make sure to publish your Webflow site to see the changes take effect.
  
  Explanation of the Code
  - The script waits for the DOM to fully load before executing.
  - It uses `window.$memberstackDom.getCurrentMember()` to retrieve the current member's data.
  - It accesses the First Name and Last Name from the `customFields` object and combines them into a single string.
  - Finally, it sets the value of the input field with the combined name.

  Important Note
  Make sure to replace `'name-input'` in the script with the actual ID of your input field in Webflow.

  This code will effectively autofill the Name field with the combined First Name and Last Name from Memberstack.

• 

  Duncan from Memberstack

  • October 10, 2024 11:57

  Great question! This sounds like it would be a good Memberscript. 

  I'll share with Julian and see what we can do 😁

  1
• 

  Springthrough Consulting

  • Edited October 15, 2024 12:51

  Chukwudi Onyekwere Thank you very much!!
  
  I have one additional question that is kind of similar, so I will ask it here but if we need to open a second question that is totally fine!
  
  My second question is that I am using Memberstack's Login Redirect Url on a Button (So in Webflow we launch the Memberstack widget, I click on a Button then in the Memberstack widget I scroll down to the Links/Actions section and choose the Login Redirect option for the Button's URL). 
  
  So the question is, are we able to get that Login Redirect URL in a similar method that you shared above and set it on a Button manually? I need to essentially tack a hash onto this URL, such a mywebsite.com/users/abdc123#Invoices and I am assuming I have to get/set that manually in a script as we cannot append any strings/values to the Login Redirect option.
  
  Thank you!

  0
• 

  Duncan from Memberstack

  • October 15, 2024 12:58

  I asked Claude for help 😁

  <script>
  document.addEventListener("DOMContentLoaded", function() {
    // Function to get and modify the redirect URL
    window.$memberstackDom.getCurrentMember().then(async ({ data: member }) => {
      if (member) {
        // Get the login redirect URL from Memberstack
        const redirectUrl = member.loginRedirectUrl;
        
        // Modify the URL to add the hash
        const modifiedUrl = redirectUrl + "#Invoices";
        
        // Set the modified URL on buttons with the custom attribute
        const buttons = document.querySelectorAll('[ms-code-redirect-button]');
        buttons.forEach(button => {
          button.href = modifiedUrl;
        });
      }
    });
  });
  </script>

  Here's how to use this script:

  1. In your Webflow project, give your button the attribute ms-code-redirect-button.
  2. Add the script to your Webflow project's custom code section, just like in the previous example. Place it in the "Before </body> tag" area.
  3. If you want to change the hash from "#Invoices" to something else, modify the modifiedUrl line in the script accordingly.

  This script does the following:

  1. It waits for the DOM to fully load.
  2. It uses window.$memberstackDom.getCurrentMember() to get the current member's data.
  3. It retrieves the login redirect URL from the member data.
  4. It adds the "#Invoices" hash to the end of the URL.
  5. Finally, it sets this modified URL as the href of your button.
  1
• 

  Chukwudi Onyekwere

  • October 15, 2024 13:07

  Yes, you can definitely get the login redirect URL using the method I've shared. Here's how you can achieve that:

  1. Get the loginRedirect URL.
  2. Append the hash or custom string.
  3. Set the modified URL as the button's href attribute.

  Here's a modified version of your code to handle this:

  <script>
  
    document.addEventListener("DOMContentLoaded", function() {
  
  window.$memberstackDom.getCurrentMember().then(async ({ data: member }) => {
      if (member) {
          // Get the login redirect URL
          let loginRedirectUrl = member["loginRedirect"];
  
          // Append the hash to the URL
          let modifiedUrl = `${loginRedirectUrl}#Invoices`;
  
          // Set the modified URL to the button's href attribute
          const myButton = document.getElementById('myButton'); // Change to your button's ID
          if (myButton) {
              myButton.setAttribute('href', modifiedUrl);
          }
  
      }
  });
  });
  </script>

  Make sure your button has the correct ID, and this should work as expected!

  1

Please sign in to leave a comment.