How to Create Feature-rich Forms in WordPress

When it comes to adding a contact form or any other type of form to a WordPress site, most people think about using Contact Form 7. While there is nothing wrong with that plugin, it is kind of limited regarding features.

So, what if you want to create an advanced, feature-rich form? The easiest way is to use a powerful plugin like Gravity Forms. This premium plugin supports 30+ field types to help you create complex, multi-part forms.

In today’s post, I will show you how to use Gravity Forms to create feature-rich forms in WordPress.

Creating a New Form with Gravity Forms

First of all, install and activate the plugin. You will notice a new menu item titled “Forms” in the dashboard menu.

Go to Forms > New Form to create a new form. This will open a pop-up like the following –

Provide the title and a description, and click “Create Form.” This takes you to a page like this –

You will find the form fields on the right side. The fields are divided into several sections like –

  • Standard Fields: This section includes the common fields including the text, number, drop-down, checkboxes, radio, select, textarea, HTML code, and so on.
  • Advanced Fields: Here, you will find more advanced fields like the name, date, time, phone, address, email, website, password, file upload, CAPTCHA, survey, poll, quiz, etc.
  • Post Fields: This section includes fields that are related to the post – title, body, excerpt, category, tags, custom field, etc.
  • Pricing Fields: As the name suggests, this section includes professional fields like product, quantity, option, shipping, total, credit card, and so on.

Decide which field type you want to use, and click on that type. This will add the field to your form. For example, here’s what it looks like when you add a “Single Line Text” field –

Depending on your chosen field type, you will find lots of admin options to manage the field. However, most fields will have three common sections –

  1. General: This section allows you to provide a label, description, mark the field as required, etc.
  2. Appearance: Here, you can provide a placeholder text, add a custom CSS class, unique validation message, and choose the field size.
  3. Advanced: The advanced section enables you to provide a default value, choose the field visibility, and enable conditional logic. If you have activated conditional logic for the field, you can set up the necessary rules to show or hide the field.

As you make the changes, you will find a live preview of the field at the top of the section. There will also be dedicated fields to expand/collapse, duplicate, and delete the field.

Once you have added the necessary fields, click “Update” to save your form.

Setting up Your form

Now that you have created the form, it’s time to set it up. To do that, click the “Settings” section, which will take you to a page like the following –

There are three settings sections. Let’s check these one at a time –

Form Settings

First of all, you can change the form title and description in the “Form Basics” section. Then, “Form Layout” enables you to choose the placement for label, description, add CSS class, etc.

Below, you will find more options to choose the submit button type, customize the button text, apply an entry limit, schedule the form to be available for a specific period, enable anti-spam honeypot, require the user to be logged in, and so on.

Confirmations

This is the section where you can add, edit, and manage the confirmation messages for your form. The plugin will create a default confirmation that will be displayed when the visitor submits the form. You can edit this to display a custom message, redirect the visitor a page on your site, or send her to a custom URL.

Notifications

You can manage the form notifications in this section. There is a default admin notification for submissions. You can customize the notifications to choose the recipient(s), define the sender name, sender email address, reply-to email address, subject, message body, and so on.

There is also a preview button to check out a live preview of the form.

Displaying the Form

Gravity Forms makes it really simple to display the form inside any post, page, or widget. You will find an “Add Form” button in the post editor –

Clicking the button will open a pop-up like the following –

First of all, you will find a drop-down list of the existing forms. Select your desired form, and choose other options like display the form title, descriptions, enable AJAX form submission, etc.

Finally, click the “Insert Form” button to add the form to your content.

It is also possible to show the form on any widgetized location. To do that, go to Appearance > Widgets, and find out the “Form” widget.

Drag the widget to your desired location. You will find a drop-down list to choose the form along with the options to display the form title and description.

Managing the Forms and Using Add-Ons

To manage your existing forms, go to Forms > Forms. This will show a list of all the forms you created –

You will find dedicated options to edit, duplicate, delete, or preview any form. It is also possible to check out the entries and set up the form options.

Gravity Forms offers a large number of add-ons to let you create various types of advanced forms. You can use these add-ons to connect your form to all the popular email marketing, CRM, file storage, payment processor, and various other services.

Final Words

Creating a complex form becomes a lot easier when you are using a powerful plugin like Gravity Forms. Now that you have read this post, you know all about the popular features of this plugin and how they can help you create feature-rich forms.

So, what do you think about Gravity Forms? Does it offer all the form features you need? Let me know in the comments below.

Miguel

I started this tech blog back in 2011 as a place to write down processes I took to fix my client systems and network. Now I write some tips and tricks to help others with the tech issues that one might encounter.

You may also like...