How to switch Memberstack plans while saving final form data during multi-step signup?

November 13, 2024 04:55
4 comments

I have a multi-step sign-up form where users are added to an onboarding plan in MemberStack. Upon completion, they’re moved to an approved plan. The problem is that when I add the plan switch in the final step, the user gets added to the new plan, but the data from that last step isn't submitted. If I move the plan switch to a button on a confirmation screen, it works, but not all users click that button.

Is there a way to ensure that the data from the final step is submitted while still switching the plan when they click submit? It seems like there might be a conflict with the profile update occurring simultaneously.

Comments

4 comments

Raquel Lopez
- November 13, 2024 05:00
Hi Alton,

Are you using Make or Zapier? You could create an automation that assigns the plan after the member has been updated.

Or you could do it in the frontend if you are comfortable writing custom code where you could send the member update information ($memberstackDom.memberUpdate()) and after a successful response assign the plan $memberstackDom.addPlan()). Maybe Rey could you out with that

0
Alton Peques
- November 13, 2024 05:01
Hey Raquel,

We tested updating the member's plan after they complete the onboarding process and their MS profile is updated, but there’s a slight delay using Zapier that causes a lag when they try to access the platform immediately.

Ideally, we’d sync the plan update with the final profile update form submission in Webflow. When adding the attribute to a button in Webflow the plan change is more immediate which gives them access to the platform when we redirect them after submission.

If that's not possible, we might need to just send a welcome email to give them platform access after onboarding.

Perhaps adding custom code to when a page is loaded that adds them to the plan could work? Like once the success page is loaded their plan updates in MS?

0
Raquel Lopez
- November 13, 2024 05:03
Uhm, doing it custom means you would remove the data-ms-form attribute from the form (so memberstack doesn't handle the form for you), and you would handle its submission and redirect after submission manually.

There are some examples in this page https://docs.memberstack.com/hc/en-us/articles/11217223809819-Vanilla-JS-Guide

But the script you'll have something like
```
<script>
 document.querySelector('yourForm').addEventListener('submit', async (event) => { 
event.preventDefault() // prevents default redirection 
try { 
await $memberstackDom.updateMember(yourFormValuesObj); 
await $memberstackDom.addPlan('pln_123') 
location.href('/somewhere') // this is an optional step, since you can handle redirection in MS dashboard 
} catch (err) {
 console.error("There was an error with your request", err)
 }
 })
 </script>
```
This should be the general idea

Like once the success page is loaded their plan updates in MS

The plan would be added after a successful update of the member fields. Before getting to the success page.
0
Chukwudi Onyekwere
- November 14, 2024 11:42
Hi Alton,

You may also consider using our Plan Logic feature to achieve this.

0

Please sign in to leave a comment.