Building Custom WordPress Forms – The Easy Way

Dealing with HTML forms can prove to be a challaging task. This is especially true when it comes to data binding, validation and error handling. That’s why we’ve open sourced Formjack –  a library that helps you build, render and validate custom WordPress forms with just a few lines of code. In this short (but sweet) tutorial we’ll see how we can use the Formjack library to build a fairly simple contact form within a WordPress theme. Let’s go.

Before you dive into this tutorial I highly suggest you take a look at the official “Getting Started with Formjack” guide where you can learn a little bit more about the library itself and all the thing you can do with it.

Firstly, we’ll need to import the Formjack library into our theme. Since I like to hold all the vendor libraries within a inc/lib/ directory my clone command would look something like this:

$ git clone https://github.com/Slicejack/Formjack.git wp-content/themes/my-theme/inc/lib/Formjack

Now we’ll need to include the Formjack library into our theme. To do that we’ll need to update our functions.php file.

Great! The next thing we’ll need is a file which we’ll use to build our new contact form and any other form that we might need in the future. For that purpose we’ll create a forms.php file within the inc/ directory of our WordPress theme. Since forms.php is a separate file we’ll need to include that file within the functions.php as well.

Let’s now open up the forms.php file and let’s write down a simple code that will create a new form instance.

With our new form instance in place, let’s add a few fields to it.

If you fancy, you can also add fields a little bit more dynamically. Here’s an example in which the “Email” field shows up only if the user is not logged in.

Since we always want the visitors to provide us with their full name and their email address we’ll add a few validation rules to our fields.

Let’s make things even more interesting. Let’s say we want to validate the email field only if the user is not logged in. We can do just that by using the \Formjack\Rule\When validation rule.

You can combine multiple \Formjack\Rule\When validation rules in order to make things even more secure. For example, we can implement one more email validation for a use case when the user is logged in but he has filled in the email field.

Ok, now we’re ready to render the form. Just choose a template file in which you would like to show the newly created form and call the forms render method.

You can even choose to render each field separately if you need to.

Now comes the form handling and validation part. In order to make things easier we’ll write our form submission handler at the end of the forms.php file but you can choose any other location if you wish.

Congrats! You’ve now successfully created and validated your custom WordPress form with just a few lines of code thanks to the Formjack library! If you wish to learn even more about Formjack and how you can even customize it to build even better looking custom WordPress forms, refer to the following chapters of the official Formjack Wiki and, as always, feel free to contribute:

• Fields – Lear more about Formjack fields and how to use them
• Validation – List of all available validation rules
• Layouts – Customize the looks and feels of a form

If you enjoyed this post about building custom WordPress forms – we’d love to hear your comments.