A members directory is often a fundamental building block for association websites. While iThemes Exchange does not have this functionality built-in, using the power of GravityView and our plugin Gravity Forms Checkout Pro, you can set this up in minutes. Let’s get started.

I’m going to assume that you already have GravityView, Gravity Forms, the Gravity Forms User Registration Add-on, and the Gravity Forms Stripe Add-on installed and configured. This should work with all Gravity Forms payment gateways, but for the ease of demonstration we’ll be using Stripe. Finally, while Gravity Forms is going to be handling the billing, you’ll still need the Recurring Payments add-on from iThemes.

Creating your Form

If you want to skip to the end, you can download the export of the form we’ll be creating.

First you’ll want to create a hidden field and set the default value to {user:user_login}. This will allow us to present a password and email field to new users, and hide it for existing logged-in users.

Hidden Username Field

Hidden Username Field

Next, create a name field and set the default values for the first name to {user:first_name} and {user:last_name} for the last name.

Name Field

Name Field

Then create an email field to collect your members email address. Here we set the default value to {user:user_email} for use in Stripe. But we hide the field for logged-in users using conditional logic. To do this, we want to hide the field if the Logged-in Username field is not empty.

Email Field

Email Field

Next we create a password field. This is setup similarity to the email field so that we only collect passwords for new users.

Password Field

The next part is mostly free-form. This is where you add fields to collect any additional information you need from your members. For the simple system we’re setting up, I’m just adding a paragraph field to serve as the member’s biography.

Then we want to create our product field. Make sure to connect this field to your corresponding membership product in Exchange. Your Exchange product should have recurring payments enabled, but any further configuration will be done in Gravity Forms. Unless you are using our Umbrella Membership add-on, you’ll most likely want to disable the quantity field.

Product Field

Product Field

Finally, add the Credit Card field and configure it to your specific needs.

Form Settings

The only important thing to note when configuring your form’s settings is the Gravity Forms Checkout Pro section. All other settings can be configured as necessary for your project.

Form Settings

Form Settings

The Approve Entry on Payment setting will automatically approve the entry for GravityView when the payment is processed. If you want to manually approve each member before they are listed in the directory, you should leave this box unchecked.

The Unapprove Entry on Refund setting will automatically mark the entry as unapproved in three circumstances.

  1. When a full refund is processed.
  2. The transaction status is changed in Exchange to a status that isn’t cleared for delivery, such as pending, voided, etc…
  3. When the customer’s subscription is cancelled or deactivated.

In most cases it will make sense to enable this checkbox.

Stripe Settings

As I mentioned at the top, for this example we’ll be using Stripe to collect payment. But you’ll follow similar steps for other payment gateways.

Exchange Members Directory Stripe Settings

Stripe Settings

The Stripe settings are mostly straightforward. Importantly, you’ll want to set the Transaction Type to Subscription. Then set the Recurring Amount to the total in your form. Configure your Billing Cycle and select the email field to be sent to Stripe.

You can add support for paying monthly or yearly by creating multiple Stripe feeds and utilizing the Option fields, but that is a discussion for another day.

User Registration Settings

The User Registration add-on is what creates a new user in WordPress if necessary. To begin, you’ll want to create a new User Registration Feed. You should set the Action to Create User and select your newly created form for the Gravity Form setting.

User Registration Feed Settings

User Registration Feed Settings

Next, you’ll want to configure the User Settings section of the feed. Most of the fields are self-explanatory, so I won’t go into much detail. But make sure that you set the role to Subscriber because it is often defaulted to Administrator.

User Registration User Settings

User Registration User Settings

Depending on how your form is setup, you might not need to configure this next section. GravityView is able to display all of your form’s fields in the directory, but you might want to also save some of your field data to user meta. In this case, I’m saving the Biography field to the Biographical Information  setting.

User Registration User Meta

User Registration User Meta

Finally, to make sure a user is only created if necessary, enable the Registration Condition. Then set it up so the user is only registered if the Logged-in Username field is empty.

User Registration Additional Options

GravityView

The hard part is done. Now it is time to configure your GravityView view. A view is the backbone of the members directory. It is what handles searching and sorting through the members list and creates the individual member pages. Nearly all of this configuration is dependent on how you’ve setup your form, so I’m not going to go into super detail here. GravityView has great documentation, so make sure to check that out for help.

The important setting to configure is Show only approved entries. The approval status of an entry is how we automatically add and remove members from the directory.

GravityView View Settings

GravityView View Settings

Final Setup

The last thing to do is to embed your Gravity Form form on a signup page and embed your GravityView view on another page. Optionally, you can restrict the members directory to members by utilizing the Member Access metabox.

Membership Access

Membership Access

That’s it! Your members directory is ready for use. If you’re having trouble, don’t hesitate to reach out to support.

Published by Timothy Jacobs

2 Comments

  1. Very cool & helpful! I will definitely be using this on an upcoming project soon!

    The one thing that I wonder is: can this be set up so that the user can log in and change their payment or other info (for instance, their credit card, or their email address)? And if so, how would that be done?

    Reply
    • Glad you found it useful Bet!

      GravityView does have the ability to let your members edit their entries. But unfortunately, Gravity Forms does not provide a method to edit payment info after the fact. I’ll definitely make sure to add this to our feature list. If we do develop it, support would probably be limited to Stripe at first, because support would have to be added for each payment gateway independently.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.