Share

Ever wanted to create a simple Gravity Forms user login page without the need of investing into add-ons?
This tutorial will move you through the process of a solid Front End process.

Have you checked related GF tutorial?
Find out how to create custom Gravity Forms fields.
Woo GF

Part 1 – creating a simple login page

First let’s go ahead and set up a simple form with two fields.

  1. Username (please assign username class to the field)
  2. Password (please assign password class to the field and make sure the password checkbox is checked)

gf username

gf password

 

 

 

 

 

 

 

 

 

 

 

 

Once set up with the two embed the form anywhere in the page likewise:

login-embed

Now, let’s setup two hooks, that will login the user:

  1. Runs once the form is submitted
  2. Runs during the form validation

1. Gform after submission hook

(source)

This hook fires after the form was submitted and the whole data was validate, we’ll bind it to the form which have just created.

2. Gform field validation hook

(source)

This hook fires during the form submission process and iterates over every field.

Once these two were set up (placed anywhere in the functions.php file) we can go ahead and test the form embeded to a page. Let’s do some testing:

form-login

 I tried logging in with the wrong password and I failed! This means that the validation is working properly. Let’s go ahead and login with the real credentials – boom I tested it and logged in successfully.

Part 2

Part 3

Wanna test the login?
Press the button and use the following credentials: username: gf-test password: test
Give it a try
The following two tabs change content below.
My Twitter profileMy LinkedIn profileMy Instagram profileMy YouTube channel

Rafał Gicgier

CEO at WP Doin
Senior Front End WordPress developer, blogger, traveller. Associated with Xfive, Goodie and WP doin. Working on YouTube channels. 8 years of experience working remotely.