Blog

Using Gravity Forms in WordPress | Creating a Form

To use Gravity Forms for WordPress, login to your WordPress website and find “forms” in the admin panel. (If you don’t see it, check to be sure that the plugin is activated. If you don’t see the plugin, contact me.

Select “New Form”

Change Form Settings Gravity Forms

A pop-up will open. You can set the first information about your form (Title, Description) here. Both the title and description can be displayed on your WordPress front end. You decide each time you insert the form. The Form Description is an optional field.

Create a New Form With Gravity Forms

After clicking “create form” you’ll be brought to the form editor. Here, you can select your form fields. Gravity Forms makes it really easy to build simple and complex forms. Be sure to explore the field options that are available to you – the capabilities are almost infinite. If you have a question about how to accomplish a goal comment below, or send me a message.

Gravity Forms Click to Create Fields

Here’s a basic form. Actually, this is a basic looking form with an advanced function – it’s set up to sell a digital product using just Gravity Forms and the PayPal integration.

Gravity Forms WordPress Hover to Edit Item

After you’ve clicked to add fields to your form, you can modify them by hovering over the field. You can always set a Field Label, Description (optional, will display on front-end), and set some rules – that the field is Required or that no Duplicate Entries should be accepted. There are often other settings. What they are, or what they do, depends on what kind of field you are customizing.

Gravity Forms Fields Settings

By clicking over to the Advanced tab within the field editor drop-down, you can do other customizations. Two very powerful things to note here are the CSS Class Name and Enable Conditional Logic settings.

Clearly, CSS Class Names allow you to target fields for styling. Importantly, you can use this setting to do placeholders (when the label of the form appears inside the text field, and disappears on click). Here’s how to use Placeholders for Gravity Forms to get that done.

Conditional Logic allows you to set the visibility status of fields, form sections, or pages based on user input.

Placeholder Text Through CSS

More settings for the behavior of your form are available. Be sure to explore them before you dig into configuring the fields for your first form. You can get there by navigating to form Settings at the top of the form editor.

Change Form Settings Gravity Forms

In addition to changing the Name, and adding or changing Description for the form, you can set the placement of labels, set a CSS Classname for the form, customize the form button text, or set an image for the button, configure entry restrictions,  allow animated transitions, and more.

Changing Form Settings More Below

In addition, you can customize the Confirmation Message – what happens on a users screen after they click submit. By Default, Gravity Forms displays this text: “Thanks for contacting us! We will get in touch with you shortly.”

You can modify the text, or you could set the form to redirect to a thank you page.

Change Form Settings Gravity Forms

And Notifications – what else happens after a user submits the form. By Default, Gravity Forms is configured to send an email to the site administrator email address (as stored in your WordPress General Settings).

Change Form Settings Gravity Forms

Screen Shot 2016-03-12 at 9.35.58 AM To insert your form on a WordPress post or page, navigate to the editor of the page that you want the form to appear on and click the Add Form button (pictured right) above the editor. This will open a tool that will help you insert the correct shortcode into the content area.

Screen Shot 2016-03-12 at 9.38.16 AM

That’s the primer! Happy editing.

Post your thoughts, additions, or questions below. Contact me, too.

What’s Next

Our Work

Check out some recent work we’re proud of.

Our Blog

Read our latest ideas about tech, features, messaging, and more.

Get in Touch

Want to discuss a project? Hit us up, we’d love to chat!