Gravity Forms Create Front End Login / Register / Edit account – PART 3

Welcome to the third and final installment of our Gravity Forms Front End Login / Register / Edit Account series. In previous tutorials, we’ve explored creating a secure login system and an efficient user registration process using Gravity Forms.

Now, in this last part, we’ll focus on empowering registered users to manage their accounts effortlessly. It’s all about putting them in control of their online experience.

A Quick Recap:

In our first tutorial, we built a secure login system. Then, in the second part, we worked on creating a smooth registration process for new users.

Creating a simple edit account page

Unlike previously the form we’re going to create will be slightly different. First, we need to output some data on the form, which will use Gravity Forms’ dynamic population. This will be bound to the currently logged-in user for which we’ll load the data.

Let’s go ahead and create it. We need the following fields:

1. Email (with the email CSS class assigned, and dynamic population variable set to email)
2. Old Password (with the old-pass CSS class assigned)
3. New Password (with the new-pass CSS class assigned)
4. Repeat Password (with the repeat-pass CSS class assigned)
5. First Name (with the fname CSS class assigned, and dynamic population variable set to fname)

This form will let us change the associated email address, and the password (for which we’ll need to provide a valid current password – safety precaution) and change our First Name.

Gravity Forms Edit Account Form

Gravity Hooks

Gform validation hooks

With all the fields filled in, we need to validate them before submitting the form. In our case this only applies to the old password, since all other fields need not be validate.

It’s worth nothing the comments added to the functions. We’re using a simple trick here – we’re assigning field validation to a specific form field and then comparing it’s value with a different form – which has a specific CSS class assigned to it.

Gform pre submission hook

Gfrom field value hooks

Now, we need to make sure, that the fields actually list the data provided by the user. Since we’re accessing a predefined values, there are already functions for doing so. Let’s make usage of the global variable $current_user.

Summary

Gravity Forms robust API gives a huge room to play with. In these 3 short guides, I’ve shared several snippets with you on creating a custom Front End login / Registration Panel for your visitors, with a simple Edit Account page. These, however, may be further expanded upon. If you combine the Dynamic Population / Custom field CSS classes and conditional logic with the aforementioned guides you’ll be able to come up with a manually polished Front End panel w/o the need for 3rd party plugins. Say, you could do the tricks I outlined above, to modify not only user accounts but also specific posts or their corresponding ACF fields.

Previous Parts

Tutorial part 1

Tutorial Part 2

Where to get Gravity Forms from👇

Further Reading:

http://codex.wordpress.org/Function_Reference/get_currentuserinfo

http://www.gravityhelp.com/documentation/page/Using_Dynamic_Population

http://www.gravityhelp.com/documentation/page/Gform_pre_submission

http://www.gravityhelp.com/documentation/page/Using_the_Gravity_Forms_%22gform_validation%22_Hook