Add the s2Member Registration/Login Form to Custom Design

[codeshed]

I am working with a designer on a custom wordpress theme which will be a subscription based site. I have installed s2Member to handle the functionality but I am wondering to what extent I can customize the form look and feel. The design has the registration form and the login form located on a page inside the custom theme template. Further to that the form itself is customized with graphics etc. I have attached a sample. My question is can I build up my form fields required and plunk them into a page? And Can I customize the look of the form itself? See attached

Form Design

[Cristián Lávaque]

Hi! Your design looks very nice.

Yes, you can customize the registration form. s2Member has an interface to help you do that at WP Admin -> s2Member -> General Options -> Login/Registration Design.

Let me know if that helps.

[codeshed]

Thanks for the info.

How can I get the registration/login form to display on a page inside the theme ( with sidebar navigation etc) rather than a stand alone page?

[Cristián Lávaque]

Oh, for that you can use the Pro Login Widget, which comes with s2Member Pro.

You can use and manage that one from WP Admin -> Appearance -> Widgets, but you can also add it in your templates or posts using the PHP version, which you can read more about in the s2Member documentation under WP Admin -> s2Member -> API / Scripting -> Pro Login Widget via PHP.

With s2Member Pro installed, you have access to the s2Member Pro Login Widget. This is made available in your Dashboard under: Appearance -> Widgets. Very simple to use; just drag & drop ( that's it ). For developers though, sometimes it is necessary to include the Pro Login Widget in non-widgetized sections of a WordPress® theme; or even into another plugin that you run in concert with s2Member. You can use this PHP tag to build the Pro Login Widget dynamically: <?php echo s2member_pro_login_widget(); ?> . The Pro Login Widget can also be configured with an optional array of configuration parameters ( as documented below ).

This function allows for the inclusion of the Pro Login Widget directly into a theme/plugin file.
This API function will return the HTML output from the widget function call.

Example usage: <?php echo s2member_pro_login_widget($options, $args); ?>

The $options parameter (array) is completely optional ( i.e. NOT required ).
It can be passed in as an array of options; overriding some or all of these defaults:

Code: Select all

"title" => "Membership Login"            ——— Title when NOT logged in, or leave this blank if you'd prefer not to show a title.
"signup_url" => "%%automatic%%"          ——— Full Signup URL, or use %%automatic%% for the Membership Options Page. If you leave this blank, it will not be shown.
"login_redirect" => ""                   ——— Empty ( i.e. "" ) = Login Welcome Page, %%previous%% = Previous Page, %%home%% = Home Page, or use a full URL of your own.
"logged_out_code" => ""                  ——— HTML/PHP code to display when logged out. May also contain WP Shortcodes if you like.
"profile_title" => "My Profile Summary"  ——— Title when a User is logged in. Or you can leave this blank if you'd prefer not to show a title.
"display_gravatar" => "1"                ——— Display Gravatar image when logged in? 1 = yes, 0 = no. Gravatars are based on email address.
"link_gravatar" => "1"                   ——— Link Gravatar image to Gravatar.com? 1 = yes, 0 = no. Allows Users to setup a Gravatar.
"display_name" => "1"                    ——— Display the current User's WordPress® `Display Name` when logged in? 1 = yes, 0 = no.
"logged_in_code" => ""                   ——— HTML/PHP code to display when logged in. May also contain WP Shortcodes if you like.
"logout_redirect" => "%%home%%"          ——— Empty ( i.e. "" ) = Login Screen, %%previous%% = Previous Page, %%home%% = Home Page, or use a full URL of your own.
"my_account_url" => "%%automatic%%"      ——— Full URL of your own, or use %%automatic%% for the Login Welcome Page. Leave empty to not show this at all.
"my_profile_url" => "%%automatic%%"      ——— Full URL of your own, or use %%automatic%% for a JavaScript popup. Leave empty to not show this at all.

The $args parameter (array) is also completely optional ( i.e. NOT required ).
It can be passed in as an array of options: overriding some or all of these defaults:

Code: Select all

"before_widget" => ""                    ——— HTML code to display before the widget.
"before_title" => "<h3>"                 ——— HTML code to display before the title.
"after_title" => "</h3>"                 ——— HTML code to display after the title.
"after_widget" => ""                     ——— HTML code to display after the widget.

Let me know if that solves your problem and if you need anything else, I'll be glad to help.

[codeshed]

Thanks for the info. Am I safe to assume that this is the case for both the registration form and the login form. Your response refers to a login widget. Are they one in the same?

[Cristián Lávaque]

You're right, I was just talking about the login.

One thing you could do is create the custom fields you want here WP Admin -> s2Member -> General Options -> Custom Registration Fields and when the form has all the fields you want, copy the form's HTML and paste it in a text widget and style as needed.

If you install the Exec PHP plugin, you can wrap the form in a conditional that checks that the person is not logged in before showing the registration form.

Just to make sure this is clear, when a person is sent back after payment by a gateway, if he needs to create his account, s2Member will still send him to the default registartion page.

[Cristián Lávaque]

Actually, I just went and tried implementing this in my test install and I came up with something you may like better.

In the Pro Login Widget, remove the URL for registration and right below there's a field that lets you enter PHP/HTML and you can paste the form you copied from the registration page. Now the registration form will be shown below the login form, but will not when the person is logged in.

Let me know if this helps.

[Jason Caldwell]

Thanks for bringing this thread to my attention Cristián.

If you are running s2Member Pro, then I will assume you're integrating s2Member Pro Forms? This would be the recommended way, as this maximizes your ability to integrate Registration Forms, including paid Registration/Checkout Forms, and you can even modify the form template files if you like.

Taken from our FAQs: http://www.s2member.com/support/
Modifying s2Member Pro Form Templates:

Is it possible to modify the PayPal® and/or Authorize.Net® Pro Form templates?
Usually not necessary. But yes, if you really need to. Please check your /s2member-pro/includes/templates/forms/ directory. You can take the default templates, and place some ( or all of them ) into your own WordPress® theme directory. s2Member Pro will automatically find your custom templates there. By placing custom templates into your theme directory, you can be sure they won't get overwritten in a future upgrade.

Additional Custom Registration Fields should be added with the s2Member UI panel. You can do this inside your Dashboard, under: s2Member -> General Options -> Custom Registration Fields.

For login/logout functionality, I recommend the Pro Login Widget that Cristián mentioned.
This is also a feature that comes with s2Member Pro.

[codeshed]

It sounds like the s2Member Pro forms template is the way to go. Is this included in the Single-Site License — for $69

[Jason Caldwell]

It sounds like the s2Member Pro forms template is the way to go. Is this included in the Single-Site License — for $69

Yes, that is correct.
There is a video intro here that you might want to watch before purchasing.
http://www.s2member.com/video-pro-intro/

[drbyte]

Hi Jason....

I have been playing with the Pro Version (Thank you) and it's awesome.

The above discussion is a good start for ways to easily customize the membership page....I looked all around the web and visited lots of sites just to get an idea of how they are developing and implementing the membership pages.

Yours is very simple and in one page...(user information and the payment type)..but it seems to have a almost a brief shock to some visitors...I think to some it's a bit overwhelming to have all of these information on one page. Most sites capture the user information then offer a second page where they can add their payment type.

I think they do that to save the user information for marketing purposes and off curse to set the cookies for next visit just in case the visitor decided to come back at a later time

Another idea that may come handy is for us to create an extra fields with validations...for example

( ) I have read and agree to the site name.com Terms and Conditions and certify that I am at least 18 years of age.

( ) I have read and agree to the site name.com Refund Policy

( ) I acknowledge that this is a recurring transaction

And so forth......

I like the way the (CVV) Card Verification Code ( 3-4 digits ) * need help? you have in place but I think it's an extra step for people to hit the need help? link and see Wikipedia instead of the actual site..Maybe you can use a tooltip instead of the usual popup window

Sample...just an idea

CVV.jpg (34.17 KiB) Viewed 29518 times

The text fields (First Name, Last Name....) I think it should be in bold for it to stand out when you have a white background. It maybe easier to read if you have it to the left of input field instead on top..very close to each other

The PayPal Button....I have no idea why PayPal with all the money they make can't create a nicer looking button...just awful ..LOL...It would be nice if we can have the option to add our customized button to the short code. It's also confusing to have it all the way at the bottom...it's kind of (MIA) missing in action..Maybe 2 (div)s next to each other..one for the credit cards and the other for PayPal

The password filed: Maybe a note to inform the user that it needs to be 6 or more characters..It's kind of annoying to think of one short to find that you need to think of another one


Just some ideas Jason....

Again, Thank you Jason for the great work

Sam

Well after some hours of work I came up with this:

CVV.jpg (34.17 KiB) Viewed 29518 times

It's not all complete...Jason..I could not change the submit form bottom for some reason. I tried changing the Class too but nothing happened.

I love the idea of having different templates assigned to different pages..very thoughtful idea

Sam

[drbyte]

Hi Jason

Been working with the Pro version and I am stuck at this:

Code: Select all


   <?php echo do_shortcode('[s2Member-Pro-PayPal-Form level="1" ccaps="" desc="3 Days free / then $7.99 USD / Monthly ( recurring charge, for ongoing access )" ps="paypal" cc="USD" ns="1" custom="www.site.com" ta="0" tp="3" tt="D" ra="7.99" rp="1" rt="M" rr="1" accept="paypal,visa,mastercard,amex,discover,maestro,solo" accept_via_paypal="paypal" coupon="" accept_coupons="0" default_country_code="" captcha="0" template="paypal-registration-form.html" /]'); ?>


How do I capture and complete those variables to the paypal-checkout-form.html page

Thank you


Sam

[Jason Caldwell]

Hi Sam. Thanks for the great suggestions.

Regarding this question:

How do I capture and complete those variables to the paypal-checkout-form.html page

Can you please clarify just a bit? I'm not sure exactly what you mean.

[drbyte]

Jason..sorry to the late replay...trying to salvage whatever snow left on Mt. Baldy

the idea is to have the registration code in every single.php code..this way it's facing the visitor, not the member, at all times...But without the credit card portion. Like Netflix...if you look at the right side, they have the user registration info without the payments ....which comes after you register.

So we have the

paypal-registration-form
then
paypal-checkout-form

can we have the variables in the first to continue to the second without breaking the code?

Thank you

[Jason Caldwell]

Thanks for the follow-up.
If I understand you correctly, s2Member Pro already deals with this. If the User is currently logged-in whenever they reach the payment form, the basic profile details are already filled in, and any Custom Registration Fields are hidden, because s2Member assumes you've already collected those during Registration. * Please let me know if I've missed something.

[drbyte]

Hi Jason..I appreciate you putting time on this..

Well here what I have in mind:

A visitor browse the site..find a products he/she likes... that page/post includes the registration form (first, last, email, and password) and does not include the payment portion as of yet.

They fill their information then click submit. once submitted, it takes them to another page where they can choose between paying with paypal or a credit card.

Think of it like your pro login widget but instead, it's a registration widget that includes the first part of the form (first, last, ...) and not the credit card part which follows when then submit

The reason behind this is to have the registration form present all the time to none members. the chances is that visitor will see it is high and increase the chances to buy the membership.

Here is an example ;p

Sam

[Cristián Lávaque]

That seems like a good idea.

It could be easily achieved if the Pro-Form prefilled fields with values in $_POST or $_GET.

[codeshed]

As per your recommendation we have purchased s2Member Pro and are currently trying to customize the forms within the templates/forms area. We are having some challenges and would like some assistance with the following:

1)Registration Form (paypal-checkout-form.html) After submitting and paying this form we get redirected back from the PayPal gateway to paypal-checkout-form.html with a message at the top saying "Thanks for registering......" with a blank registration form below. How do we sent the user to a different feedback page without the registration form below? Toggle on 2MEMBER_CURRENT_USER_SUBSCR_GATEWAY
doesn't seem to work, as it does not return any value.

2)Pro Login Widget via PHP Tag We are using the s2Member Pro Login Widget but there seems to be some issues. When we submit the form and it results in validation errors, the form submits to the "Stand Alone (Default Wordpress login page) . How do we ensure that validation of this form stays on the page in which we have the widget placed ?

3) How do we create the Forget Password Form similar to the behaviour with the Pro Login Widget via PHP meaning placing it within a page template and making sure we are not redirected out to the stand alone default form.

In summary we want to maintain all of the forms within the theme framework. This seems to be a challenge.

[codeshed]

Using the s2Member Pro forms template but not PayPal Pro, we would like to have radio button fields for different payment option types. IE Monthly Recurring or Yearly. How do we pass the option variable chosen on the form to the PayPal Gateway? Please see below:

.

[Cristián Lávaque]

Using the s2Member Pro forms template but not PayPal Pro, we would like to have radio button fields for different payment option types. IE Monthly Recurring or Yearly. How do we pass the option variable chosen on the form to the PayPal Gateway?.

You could generate the form for both options and then look at what input fields are different between them. You'd need your developer to use AJAX to submit one or the other set of input fields depending on the choice made by the buyer.

[Cristián Lávaque]

1)Registration Form (paypal-checkout-form.html) After submitting and paying this form we get redirected back from the PayPal gateway to paypal-checkout-form.html with a message at the top saying "Thanks for registering......" with a blank registration form below. How do we sent the user to a different feedback page without the registration form below? Toggle on 2MEMBER_CURRENT_USER_SUBSCR_GATEWAY
doesn't seem to work, as it does not return any value.

With PayPal Pro-Forms you can add to your shortcode an attribute that specifies what page you want the person to be taken to after payment. WP Admin -> s2Member -> PayPal Pro-Forms -> Custom Return URLs On Success


The other two you'll need to custom code, I guess. Doesn't customizing the look of the page help? You can do quite a bit from WP Admin -> s2Member -> General Options -> Login/Registration Design.

[Jason Caldwell]

1)Registration Form (paypal-checkout-form.html) After submitting and paying this form we get redirected back from the PayPal gateway to paypal-checkout-form.html with a message at the top saying "Thanks for registering......" with a blank registration form below. How do we sent the user to a different feedback page without the registration form below? Toggle on 2MEMBER_CURRENT_USER_SUBSCR_GATEWAY
doesn't seem to work, as it does not return any value.

As Cristián pointed out, you can use the success="" Attribute in your Pro Form Shortcode. This allows you to use a custom redirection URL whenever a successful transaction is completed on your site. You can even receive data from the transaction if you like. This is documented in your Dashboard, under: s2Member -> PayPal Pro Forms -> Custom Success Return URLs.
This also works with Authorize.Net integration.

2)Pro Login Widget via PHP Tag We are using the s2Member Pro Login Widget but there seems to be some issues. When we submit the form and it results in validation errors, the form submits to the "Stand Alone (Default Wordpress login page) . How do we ensure that validation of this form stays on the page in which we have the widget placed ?

Yes, that is the intended functionality. s2Member integrates with WordPress, and this is how WordPress deals with login validation errors. I see your dilemma though. Here are some ideas for you.

1. Easiest.
Use s2Member's Login/Registration Design panel to customize the appearance of your Login/Registration system for WordPress. This is found in your Dashboard, under:
s2Member -> General Options -> Login/Registration Design.

2. Requires custom coding.
You can build your own Login Widget and form processing routine, with the help of this WordPress framework function. See: http://codex.wordpress.org/Function_Reference/wp_signon

3) How do we create the Forget Password Form similar to the behaviour with the Pro Login Widget via PHP meaning placing it within a page template and making sure we are not redirected out to the stand alone default form.

Same the above. You can either use s2Member to customize the appearance of your Login/Registration system, which includes the Lost Password functionality, or you can build a custom form of your own. This WordPress framework function might be of some assistance to you.
http://codex.wordpress.org/Function_Ref ... et_user_by

When building custom Login forms, I recommend using your /wp-login.php as a reference.
http://core.svn.wordpress.org/trunk/wp-login.php

[Jason Caldwell]

Think of it like your pro login widget but instead, it's a registration widget that includes the first part of the form (first, last, ...) and not the credit card part which follows when then submit

The reason behind this is to have the registration form present all the time to none members. the chances is that visitor will see it is high and increase the chances to buy the membership.

Great idea. I'll see what we can do about this.

That seems like a good idea.
It could be easily achieved if the Pro-Form prefilled fields with values in $_POST or $_GET.

Yes, that's a good point. It's not possible with $_GET variables ( yet ), but it is possible to do this with $_POST variables. You can pre-fill form fields for a checkout form like this.

Code: Select all

$_POST["s2member_pro_paypal_checkout"]["first_name"]
$_POST["s2member_pro_paypal_checkout"]["last_name"]
$_POST["s2member_pro_paypal_checkout"]["email"]
$_POST["s2member_pro_paypal_checkout"]["username"]
$_POST["s2member_pro_paypal_checkout"]["password1"]
$_POST["s2member_pro_paypal_checkout"]["password2"]
$_POST["s2member_pro_paypal_checkout"]["custom_fields"]["my_custom_field_id"]
$_POST["s2member_pro_paypal_checkout"]["custom_fields"]["another_custom_field_id"] 

On Pro Forms for Specific Post/Page Access, use these:

Code: Select all

$_POST["s2member_pro_paypal_sp_checkout"]["first_name"]
$_POST["s2member_pro_paypal_sp_checkout"]["last_name"]
$_POST["s2member_pro_paypal_sp_checkout"]["email"] 

On Free Registration Forms, you can use these:

Code: Select all

$_POST["s2member_pro_paypal_registration"]["first_name"]
$_POST["s2member_pro_paypal_registration"]["last_name"]
$_POST["s2member_pro_paypal_registration"]["email"]
$_POST["s2member_pro_paypal_registration"]["username"]
$_POST["s2member_pro_paypal_registration"]["password1"]
$_POST["s2member_pro_paypal_registration"]["password2"]
$_POST["s2member_pro_paypal_registration"]["custom_fields"]["my_custom_field_id"]
$_POST["s2member_pro_paypal_registration"]["custom_fields"]["another_custom_field_id"] 

[Cristián Lávaque]

Yes, that's a good point. It's not possible with $_GET variables ( yet ), but it is possible to do this with $_POST variables. You can pre-fill form fields for a checkout form like this.

So you'd have a form to fill out some of those fields first and submit via POST to the full registration form, which could have the pre-filled fields hidden with CSS. Is that the way?

[Jason Caldwell]

Yes, that's certainly a possibility.
Your own custom form leading up to checkout, might look like this.

Code: Select all

<form method="POST" action="http://www.example.com/my-checkout-page/">
   <p>
      <label>First Name:</label><br />
      <input type="text" name="s2member_pro_paypal_checkout[first_name]" value="" />
   </p>
   <p>
      <label>Last Name:</label><br />
      <input type="text" name="s2member_pro_paypal_checkout[last_name]" value="" />
   </p>
   <p>
      <label>EMail Address:</label><br />
      <input type="text" name="s2member_pro_paypal_checkout[email]" value="" />
   </p>
   <p>
      <label>Username:</label><br />
      <input type="text" name="s2member_pro_paypal_checkout[username]" value="" />
   </p>
   <p>
      <label>Password:</label><br />
      <input type="text" name="s2member_pro_paypal_checkout[password1]" value="" />
   </p>
   <p>
      <label>Password ( please type it again ):</label><br />
      <input type="text" name="s2member_pro_paypal_checkout[password2]" value="" />
   </p>
   <p>
      <label>My Custom Field:</label><br />
      <input type="text" name="s2member_pro_paypal_checkout[custom_fields][my_custom_field_id]" value="" />
   </p>
   <p>
      <label>Another Custom Field:</label><br />
      <input type="text" name="s2member_pro_paypal_checkout[custom_fields][another_custom_field_id]" value="" />
   </p>
   <p>
      <input type="submit" value="Continue To Checkout" />
   </p>
</form>