How to create 1 dynamic form that handles multiple levels

#1

Hi,
I have been ripping my hair out with trying to create just one form that with a dropdown that shows the membership options and pricing. The form fields and the checkout button will also need to change, depending on which membership level is selected. Out of frustration, I have created a separate page with its correct payment button, for each membership level. Of course, this is not the optimal way to do it. The closest thing that I have found to resemble what I’m trying to accomplish can be seen here: https://www.project-up.ca/service-provider-registration/#s2p-form. I just can’t figure out how they did it. I’m using the Pro version, by the way.

Any direction would be greatly appreciated.

Thanks!

#2

Wow. Just looking at all the custom JavaScript loaded from that page is impressive.

And from the marketing perspective they are even using Hotjar so they’re recording all visitor interactions.

They’re loading a child theme so I’m guessing they have a highly-customized checkout page template.

So I think the answer is a lot of custom coding.

I have my own checkout page templates, but not like this one :slight_smile:

#3

They’re using the pro-form’s checkout options. See the documentation here: WP Admin > s2Member Pro > Stripe Pro-Forms > Wrapping Multiple Shortcodes as “Checkout Options”

Does that help? :slight_smile:

#4

Oh! Thanks for this info! I’ll give it a shot and let you know how it turned out.

Thanks again.

1 Like
#5

Well, I followed the instruction as best I could, and the form finally appeared on the page, but the dropdown with all of the options was missing. I even used the sample code provided, but that form did not show at all, the page was completely blank. I’m not sure of what I’m doing wrong.

Here’s what I have:

[s2Member-Pro-Stripe-Form]
[s2Member-Pro-Stripe-Form register=“1” level=“0” ccaps="" desc=“Option 1 Signup now, it’s Free!” custom=“localhost” tp=“0” tt=“D” captcha=“clean” /]
[s2Member-Pro-Stripe-Form level=“1” ccaps="" desc=“Option 2 $10.00 USD / Monthly (recurring charge, for ongoing access)” cc=“USD” custom=“localhost” ta=“0” tp=“0” tt=“D” ra=“10.00” rp=“1” rt=“M” rr=“1” coupon="" accept_coupons=“0” default_country_code=“US” captcha=“0” /]
[s2Member-Pro-Stripe-Form level=“2” ccaps="" desc=“Option 3 $20 USD / Monthly (recurring charge, for ongoing access)” cc=“USD” custom=“localhost” ta=“0” tp=“0” tt=“D” ra=“20” rp=“1” rt=“M” rr=“1” coupon="" accept_coupons=“0” default_country_code=“US” captcha=“0” /]
[/s2Member-Pro-Stripe-Form]

I have tried it both with and without the desc=“Option x…”, still no joy.

This is the sample code:

[s2Member-Pro-Stripe-Form rp=“1” rt=“M” rr=“1” accept_coupons=“1”]
[s2Member-Pro-Stripe-Form level=“1” desc=“Option 1 ($10.00)” ra=“10.00” /]
[s2Member-Pro-Stripe-Form level=“2” desc=“Option 2 ($20.00)” ra=“20.00” /]
[s2Member-Pro-Stripe-Form level=“3” desc=“Option 3 ($30.00)” ra=“30.00” /]
[/s2Member-Pro-Stripe-Form]

Thanks again for your help!

#6

Oh wow. I can’t believe I never noticed that before.

1 Like
#7

I see.

Hmm… I’d do some troubleshooting then. There may be a plugin or theme conflict. Please follow the advice in this article and let me know how it goes: https://s2member.com/kb-article/common-troubleshooting-tips/

If you try the Server Scanner and you get a MySQL warning/error, you can ignore it, it’s just a bit outdated.

I look forward to your update. :slight_smile:

#8

I installed and ran the scanner, and other than the MySQL error that you mentioned, everything else was fine - all green.

Thanks again for all of your help!

#9

Oh, I forgot to disable the plugins to see if that would isolate the problem. I’ll do that too and let you know. If you can think of any other solution in the meantime, let me know. I really appreciate all of your help! Thank you so much!

1 Like
#10

I seemed to have found the culprit. I had setup a test page for this form and forgot that I had a second form also running, further down on the page. Once I deleted the second form, everything worked as it should.

Thanks again for all of your help!

2 Likes