How to build advanced, multifunctional subscription forms with invitation codes for your premium membership site with the help of Gravity Forms

In this post I'll teach you step by step - how you can build attractive, multifunctional subscription form page for your membership site.
"Subscribe" or "Join" page is one of the most important areas - it is the last step that separates your visitor from becoming a paying customer. So making it simple, powerful and flexible will translate to more money for your business. Subscription step could be made as simple as "click here to subscribe" with one or two Paypal buttons embedded. But what to do if you want to collect a set of demographic information about your members? What if you want to offer special invitation codes to certain group of members or to joint venture partners?
Welcome Gravity Forms - one of the most sophisticated wordpress plugins dedicated to the sole purpose of building super-flexible, customizable and even programmable forms.
Integrated with MemberWing-X (starting from MWX version 6.550) it allows you to build subscribe/join pages, collect any type of information you want, and use Paypal to charge subscribers for your memberships, one time and recurring.
To utilize powers and flexibility of Gravity Forms for your membership site you'll need Gravity Forms Developer's Edition.
So in this step by step tutorial I'll show you how to build subscription form that will include:

  1. Ability for member to choose custom username, password and email address.
  2. Ability to collect any demographic or special information about customer (gender, age, address, phone, etc...).
  3. Make certain fields mandatory and other fields optional.
  4. Give subscriber an ability to select one of many recurring membership levels at different prices.
  5. Give subscriber an ability to enter optional "invitation code" to bypass payment, create account and gain certain membership privileges predefined by you.
  6. Show you how you can create invitation codes with:
    - limited or unlimited use count
    - predefined expiration date
    - predefined membership access abilities


NOTES:

  1. If you do not need to implement invitation codes on the form - just ignore parts of this tutorial that shows how to add them. Final form will function just as perfectly without them.
  2. If you want to offer one-time payment products instead of subscription products - the process is the same - you select [Product] from element from the "Pricing Fields" area but instead of many options - just set it to be one option only. But make sure to follow custom CSS steps and other steps as described.


So, lets begin!

NOTE: Values shown in quotes like this: "Silver membership" will need to be entered in proper fields without quotes: Silver membership
Quotes are shown only for easy reading purposes.

  1. First you need to download and install MemberWing-X membership plugin. You may use trial (almost fully featured) version on blogs with less than 10 members.
    If you own Pro License of MemberWing, enter your license key at MemberWingX->General Settings.
  2. You'll need to buy Developer's license of Gravity Forms to get access to User Registration Addon and Paypal Addon.
    TIP: Contact me for Gravity Forms discount and expert help in building your form.
  3. Install and activate 3 plugins (Admin->Plugins->Add New->Upload, Activate):
    - Gravity Forms
    - User Registration Addon (it's actually plugin). Note: if your wordpress is installed in subdirectory you'll need User Registration Addon version 1.2.7 or higher.
    - Paypal Addon
  4. Forms->Settings->General Settings->Support License Key, enter your license key, available after purchase from Gravity Forms website at "My Account" area.
    [Save Settings]
  5. Let setup invitation code next. Invitation codes are created and managed by MemberWing-X.
    Wordpress admin->MemberWingX->Invitation Codes
  6. Create invitation code "WELCOME-285" (or name it any way you want - they are not case sensitive). Set "Max Use Count" = 5, set "Assigned Product" = "Silver membership" and press
    [Save Settings] button.
    This is the result you'll see:
    Click image for larger version. 

Name:	invitation_codes.png 
Views:	133 
Size:	49.5 KB 
ID:	55
    Above invitation code "WELCOME-285" has maximum 5 use count and it will automatically assign ownership of "Silver membership" to new subscriber. People who do not have this invitation code will have to pay to buy membership.
  7. Lets proceed to Gravity Forms now. Navigate to Forms->Edit forms and create new form by clicking [Add New] button.
  8. Click inside of area marked as "Untitled Form".
    - Set Title = "Subscribe"
    - Set Description = "Welcome to our membership site. We will be happy to see you as a member!"
    - Click on "Advanced" tab on top. Set Form Button "Text" = "Subscribe"
    - Click "Confirmation" tab. Enter text: "Thank you for subscribing! We will get in touch with you shortly."
  9. Press [Save Form] button at the bottom.
    If confirmation dialog opens - press [Continue Editing this Form] button.
    Return to form editing.
  10. Right now our "Subscribe' form doesn't have any fields. Let add everything we need and then some...
  11. Click on [Single Line Text] button area on the right (from Standard Fields area). This will make new "Untitled" entry to appear.
  12. Click in "Untitled" area,
    - Set Field Label = "Desired username:"
    - Set in Rules: [x] Required
    - Press [Update Form] and then small "Close" link on top of that area.
  13. From "Advanced Fields" on the right click on [Password] button. New area will be added. This will be our "password" field on the form.
    - Set Field Label = "Desired password:"
    - Set in Rules: [x] Required
    - Press [Update Form] and then small "Close" link on top of that area.
    Here's how our form looks like so far:
    Click image for larger version. 

Name:	subscribe_form_1.png 
Views:	94 
Size:	40.5 KB 
ID:	56
  14. From "Advanced Fields" on the right click on [Email] button. New area will be added. This will be our "email" field on the form for the new member to enter.
    - Set in Rules: [x] Required
    - Press [Update Form] and then small "Close" link on top of that area.
  15. From "Advanced Fields" on the right click on [Name] button. New area representing First and Last name will be added. Leave everything here at default, making it "optional".
    Name form has few options allowing you to change look and feel of it - feel free to play with them.
    Save form when ready.
  16. From "Standard Fields" on the right click on [Multiple Choice] button. New "Untitled" area is added, open it for editing.
    - Set Field Label = "Gender"
    - In "Choices" area, instead of "First Choice" enter "Male"
    - In "Choices" area, instead of "Second Choice" enter "Female"
    - Click on minus sign (-) and remove third choice (unless you want to get creative in this department)
    - Set in Rules: [x] Required
    - Press [Update Form] and then small "Close" link on top of that area.
  17. At this point you may create more optional and mandatory input fields, that are specific to your business. We'll just proceed further to membership product creation.
  18. From "Pricing Fields" on the right click on [Product] button. New area is added, open it for editing.
    - Set Field Label = "Choose your membership:"
    - Select Field Type = "Drop Down"
    - Select [x] enable values.
    - For the first choice, set Label = "Gold membership - $19.95/mo". Set Value = "Gold Membership". Set Price = "$19.95"
    - For the second choice, set Label = "Silver membership - $14.95/mo". Set Value = "Silver Membership". Set Price = "$14.95"
    - For the third choice, set Label = "Bronze membership - $9.95/mo". Set Value = "Bronze Membership". Set Price = "$9.95"
    - Click to the right of third choice on (+) icon to add fourth choice after it.
    - For the fourth choice, set Label = "I have invitation code...". Set Value = "invitation_code" (without quotes). Make sure it is spelled exactly like that: invitation_code as this is necessary to parse this field correctly. Set price = 0.
    - Set in Rules: [x] Required
    - IMPORTANT: Click on "Advanced" tab on top and set "CSS Class Name" = "product_name" (without quotes)
    - Press [Update Form] and then small "Close" link on top of that area.
    Note that Value fields here will represent product names. Product name concept is used in MemberWing-X to allow/deny access to premium content. For more information regarding product names and related Premium Markers, see these tutorials.
  19. The last field to add to our subscription form will be for Invitation Code.
    From "Standard Fields" on the right click on [Single Line Text] button. New "Untitled" area is added, open it for editing.
    - Set Field Label = "Invitation code:". Make sure it is not mandatory.
    - Click on Advanced tab on top and set "CSS Class Name" = "invitation_code" (without quotes)
    - Click on [x] Enable Conditional Logic at the bottom. Make the proper control to show like that:
    "Show" this field if "All" of the following match:
    "Choose your membership:" "is" "I have invitation code...".
    - Not all text will be shown - but here's how this area will look like:
    Click image for larger version. 

Name:	subscribe_form_2.png 
Views:	61 
Size:	9.0 KB 
ID:	57
    - Press [Update Form] and then small "Close" link on top of that area.

    Gravity Forms allows to embed rather sophisticated logic around fields and set conditional dependency rules between them.
    Hereby we just made our "invitation code" entry field hidden by default. It will become visible if visitor will pick "I have invitation code..." selection from "Choose your membership:" dropdown.
    Here's how our subscribe form look in this designer view:
    Click image for larger version. 

Name:	subscribe_form_3.png 
Views:	73 
Size:	72.1 KB 
ID:	58
  20. Now lets create a page that will keep our form and will become main "Subscribe" page for people to go to join the membership site.
    - Go to Pages->Add New
    - Set Title of new page to "Subscribe"
    - Click on the rightmost icon next to "Upload/Insert", Gravity Forms embed dialog will open. Select a Form = "Subscribe" and then press [Insert Form] button.
    Here's what you'll do:
    Click image for larger version. 

Name:	new_subscribe_page.png 
Views:	65 
Size:	27.2 KB 
ID:	59
    - Above will insert a small shortcode into the page:
    [gravityform id=1 name=Subscribe]
    So technically you may just manually copy/paste such snippet to embed your form to any post or page.
    If you want to enable ajax functionality on the form and disable form title and form description the snippet will look like this:
    [gravityform id=1 name=Subscribe title=false description=false ajax=true]
    - Press [Publish] button to publish your page.
    - Once published - click on [View Page] button to see the result:
    Click image for larger version. 

Name:	subscribe_page_1.png 
Views:	61 
Size:	19.1 KB 
ID:	60
    If you'll click on dropdown "Choose your membership:" and select "I have invitation code..." - the invitation code entry will become visible, allowing to enter invitation code:
    Click image for larger version. 

Name:	subscribe_page_2.png 
Views:	45 
Size:	7.1 KB 
ID:	61
    We are getting somewhere now!
  21. Now let make sure that MemberWing-X is aware of our new Subscribe page.
    - Navigate to MemberWingX->General Settings
    - In settings table, find {SUBSCRIBE_URL_PREMIUM} option. Make sure this value point to your new Subscribe page.
  22. Now It's time to connect our new form to Wordpress User registration engine as well as to Paypal payment processing. Let's start with configuring User Registration Addon next.
  23. Navigate to:
    - Forms->User Registration->[Add New] button
    - Select "Subscribe" form. Options will open allowing to map required user registration fields to proper fields on the form that you just created.
    - Set Username to "Desired username:" field
    - Set First name to "Name (First)" field
    - Set Last name to "Name (Last)" field
    - Set Email Address to "Email" field
    - Set Password to "Desired password:" field
    - Set Role to "Subscriber". MemberWing-X does not invent or create any custom user roles. All users, including premium members are Subscribers. Ability to access premium content is managed by the product ownership (purchased name of product is recorded in user's metadata). Depending on the product name that user owns MemberWing-X will manage member's ability to access premium content.
    - Further down, in 'User Meta' area, Select "Add Custom". New entry will open.
    - Type: invitation_code and map it to "Invitation code:" field. This custom user metadata field will allow MemberWing to validate and process invitation code for new member.
    Here's what your dialog will look like at this point:
    Click image for larger version. 

Name:	user_registration_settings.png 
Views:	89 
Size:	32.9 KB 
ID:	62
    - Press [Save] button.
  24. Now it's time to configure Paypal settings and Paypal Addon.
    - Navigate to Forms->PayPal. If this is the first time you run PayPal configuration via Gravity Forms you will see message: "To get started, please configure your PayPal settings".
    - Click on "PayPal settings" link. Instructional text will appear.
    - Follow instructions to configure your Paypal IPN settings. It really doesn't matter which IPN URL you will enter into settings at your Paypal account, as long as IPN will be enabled. Gravity Forms overrides IPN with proper URL when user submits a form. Just make sure IPN functionality is enabled at your Paypal account.
    - Check [x] "Confirm that your have configured your PayPal account to enable IPN" checkbox.
  25. Navigate again to Forms->Paypal
    - Press [Add New] button.
    - Set PayPal Email Address to your *primary* paypal email (the one that is marked as (x) primary at your Paypal account).
    - Set Mode = "Production"
    - Set Transaction Type = "Subscriptions"
    - Select Gravity Form = "Subscribe". Whole bunch of new options will open allowing to finalize configuration of Payment/subscription functionality.
    Fill-in these options according to this image:
    Click image for larger version. 

Name:	paypal_transaction_settings.png 
Views:	84 
Size:	92.4 KB 
ID:	63
    - Press [Save] button
  26. Now lets replace default wordpress user registration page with our new custom subscribe page.
    - Navigate to Forms->Settings
    - Click on User Registration link on top.
    - Check - [x] Enable Custom Registration Page
    - Select "Subscribe" page that we created before.
    - Press [Save Settings] button:
    Click image for larger version. 

Name:	user_registration_settings2.png 
Views:	87 
Size:	13.5 KB 
ID:	64
    These steps will ensure that every visitor coming to default Wordpres "register" page:
    YOUR-SITE.com/wp-login.php?action=register - will be redirected automatically to your custom "Subscribe" page.
  27. Before testing our subscription form/page lets create a few premium test pages:
    - Navigate to Pages->Add new
    - Set Page Title: "Bronze page"
    - Set page content to this text:
    Everyone could see this free teaser
    {{{bronze|silver|gold}}}
    Only members who bought "bronze", "silver" or "gold" membership products can see this part.

    - Press [Publish] button
  28. Navigate to Pages->Add new
    - Set Page Title: "Silver page"
    - Set page content to this text:
    Everyone could see this free teaser
    {{{silver|gold}}}
    Only members who bought "silver" or "gold" membership products can see this part.

    - Press [Publish] button
  29. Navigate to Pages->Add new
    - Set Page Title: "Gold page"
    - Set page content to this text:
    Everyone could see this free teaser
    {{{gold}}}
    Only members who bought "gold" membership product can see this part.

    - Press [Publish] button
  30. We just created 3 premium pages. Each of these pages has a free "teaser" part (visible to everyone, including Google - good promotional and SEO feature).
    Note: as a reminder (see MemberWing-X Manual and Tutorials for more) in order for member to see beyond premium marker: {{{gold}}} - he needs to own a product or membership that has keyword "gold" in it's name (in case-insensitive manner).
  31. Lets test our form now.
    - Navigate to your new Subscribe page
    - Fill-in this form with some unique username/password/name and email combination. Make sure email address is valid.
    - Select "I have invitation code" option.
    - Enter invitation code: WELCOME-285 (that we created in the beginning of this tutorial).
    - Press [Subscribe] button:
    Click image for larger version. 

Name:	subscribe_1.png 
Views:	74 
Size:	40.1 KB 
ID:	65
    - You'll see this message next:
    Click image for larger version. 

Name:	subscribe_2.png 
Views:	52 
Size:	6.6 KB 
ID:	66
    - You'll receive email confirmation about your new membership at the website.
    As you may remember we attached "Silver membership" to this invitation code. Which means by using this invitation code you avoid paying membership fee and become a "silver" member. As a member who owns "Silver membership" you'll be able to see content protected by {{{silver}}} premium marker.
  32. Continue testing:
    - Make sure you are not logged on to the site (logoff if necessary or use different type of browser).
    - Navigate to "Silver page". You'll see it looks like this:
    Click image for larger version. 

Name:	silver_page_1.png 
Views:	62 
Size:	10.6 KB 
ID:	67
    - Click on "Login" link and enter username/password that you've specified.
    - Once logged on - you'll be redirected back to Silver page and this time you'll see everything:
    Click image for larger version. 

Name:	silver_page_2.png 
Views:	49 
Size:	7.4 KB 
ID:	68
    - Navigate to "Bronze" page. you'll notice that you can see everything on this page as well.
    - Nagivate to "Gold" page. You'll see free teaser + premium marker inviting you to "subscribe". This means that having silver membership is not enough to access content on Gold page.
    Gold page premium content is protected by {{{gold}}} premium marker. Which means only Gold members (members who own any product with keyword "gold" in it's name) can see it.
  33. At this point you may do live testing as well.
    If you'll subscribe as different user for "Gold" membership - you'll be redirected to Paypal for payment. Once payment is successfully processed - "Gold membership" product will be added to user's metadata. And this will automatically allow member to view "Gold" as well as other premium pages.
    For live testing I recommend creating $0.05 - $0.20 products, subscribe using different paypal account (different from account specified in Forms->Paypal settings). Once testing is finished - you may send yourself a refund. This is my preferred way of testing instead of using Paypal sandbox. Some scripts works with sandbox but glitching in live mode. Testing in live mode will give you 100% correct results.
    You will also be able to see that once member cancels subscription or gets a refund - his ability to access premium content will be terminated immediately and automatically.

    These features of MemberWing-X will allow you to build fully functional premium membership websites and grand or revoke access to your content fully automatically, depending on status of paying member.


NOTE: MemberWing-X used to integrate with Register Plus Redux plugin, but Wordpress.org repository disabled this plugin due to security issues and it seems to be no longer supported. MemberWing-X is now officially integrates with Gravity Forms and Gravity Forms not only fully replaces Register Plus Redux functionality but also adds much of it's own.

Gleb Esman