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
• 

  Felix Gräf

  • December 22, 2024 14:53

  Hey, Is it somehow possible to have two different input fields in webflow which both together add to one single custom field of a user?

  The reason why i need this is because the user goes through a sign up 3 step flow and getting asked a few questions. Since it looks more organized and it is easier to explain and to not overwhelm the user i want to ask 3 different things which all should be added together into one single custom field. Is that possible?

  Im building an Ai app with Anthropics (Claude's) API. This custom field should include infos abut the users business, and the ai uses this info to tailor its answer to each user.

  0
• 

  Raquel Lopez

  • December 22, 2024 14:54

  Yes, its possible, you have a couple options

  Handling the data yourself in the frontend using Memberstack Dom API to send the information of the form (instead of using the data-ms-form='profile' attribute )

  Or using Make to modify the information before sending it to a Memberstack 'update member' module

  0

Please sign in to leave a comment.