Making your first Gravity Forms Form

If you haven’t noticed yet, we love Gravity Forms.  It’s like the swiss army knife of form plugins, it does everything!

If you just installed Gravity Forms, now it’s time to make your first form.  Thankfully, this will be easy and only take a few minutes.

Let’s do this

Once installed, there should be a new menu entry in the admin area called Forms.  Move your mouse over that and you’ll see a few menu options (we’ll review them later)… and click on New Form.

You’ll see a popup window with two fields, Form Title and Form Description it looks like this

For your first form, let’s make a contact form so let’s give it a name of Contact and click Create Form.  Here’s another tip: you can skip the Form Description, you’ll never use it.

The Gravity Forms Editing Screen

As soon as you click Create Form, you’ll now be at the editing screen.  This is where the magic happens.  This is where you drag and drop the fields that make your form.  It looks like this, and it includes some instruction right there on the screen:

See that box on the right that says Standard Fields at the top with a bunch of blocks inside it?  Those blocks are the different types of fields that you can (there is a ton), but for right now click on the Single Line Text (the block at the top of the left column) and watch what happens.

There is now a text field in our form (on the left) with a label of Untitled, see it?

It says Untitled because we haven’t given it a label yet so let’s do that

Labeling Form Fields

Now that we’ve got our first form field, where are all the options?  HHHhhmmm.

All you’ve gotta do is move your mouse over it and click the down arrow that appears.  Clicking that arrow will toggle the view of the options, like this:

With that expanded give it a title of Name

By doing this you are telling Gravity Forms that when this form appears on the front end (public website), you want the label that appears next to this field to be “Name”.

So your screen should now look like this:

Congratulations on creating your first form field!

Let’s add one more field

Most forms have multiple fields, so now that we’ve got one field for Name I want you to add another Single Line Text field, but this time call it Email.

So repeat the above steps to make an Email field

NOTE: There are better ways of adding name and email fields and we’ll get there, we are just learning the basics for now.

Your screen should now look like this:

If it does, good job!  Keep reading!  If it doesn’t try it again!

Saving and embedding your form

Now that we’ve got our two fields in place, our form is ready to be put on a page so people can fill it out!  But we’ve got to do one thing first… we’ve got to save the form!

It’s pretty easy to save your changes, simple click the Update Form button on the right side of the page

Once saved, now we can embed it on page!

So let’s go and add a new page by going to Pages > Add New in the left hand menu.

Give the page a title of My First Form and you’ll notice a new button has appeared above the regular formatting toolbar (the toolbar with Bold, italics, etc…) and it says Add Form, give that a click.

When you click the Add Form button you’ll a popup will appear.  This popup allows you to add the forms you created in Gravity Forms to your pages/posts.

The first thing we need to is to select our form name from the drop down menu, this is easy just click the drop down menu and select the name of your form (it should be Contact).

select-gravity-form

Good!  Now under that are some checkboxes that I never, ever check.  Why?  Here’s why:

  • The form is always placed on a page with content above (or below) it so there is no need for a title or a description
  • On some browsers AJAX causes a problem and we don’t need problems!

So the next step is to click the Insert Form button.

Gravity Forms Shortcode

Once you click that button you might be surprised, but you don’t actually see the form in the admin area you see this:

That is Gravity Forms shortcode that will display your form on the front end (public side).  This is how WordPress puts interactive elements into page, using shortcodes.  You can have multiple forms (shortcodes) on a single page/post.

The last thing that you’ve got to is to click the Publish button (on the right).

Now take a look at your new page on the front end (public side) and checkout your first Gravity Forms form, it should look like this:

There is a lot more to learn about Gravity Forms, so click for more Gravity Forms Tutorials

And if you haven’t bought a copy of Gravity Forms yet, go do it, it’s worth every penny.  Promise.