Exclusive Sale! Let’s Celebrate with 10% OFF* on Everything! Use Coupon:

Exclusive Sale! Let’s Celebrate with 10% OFF* on Everything!

Use Coupon:

GFEX10
GFEX10

For whatever website you are developing, be it a company site, a portfolio, a personal blog, or an online shop, a contact form page is essential. So, your visitors or customers can communicate with you for inquiries, suggestions, corrections, or any issues.

Here we’ll show you one of the best contact form plugins for WordPress: Gravity Forms.

Mmm… picking a contact form is as difficult as a WordPress theme!

There are plenty of free plugins for WordPress, why Gravity Forms…?

Usually, free versions of contact list plugins offer only the fundamental functionality: contact forms building. Should you need other features or something more advanced, such as a survey, quiz, poll, or a more customized contact form, you may need to upgrade to paid versions.

If you have to choose a paid WordPress plugin, Gravity Forms has a complete package with great features and stable performance.

Gravity Forms‘ Main Features

Why do people opt for building websites with WordPress? Mainly because it is easy to use, in all aspects: setting up, customizing. managing and maintaining. Plugins are no exception. The easier to use, the better!

Contact form plugins usually satisfy these requirements and make building contact forms quite straightforward.

3 Super Easy Steps to Build a Form:

  1. Create a new form/Duplicate an existing form/Start with a template
  2. Place the fields you need
  3. When done, embed on the page with a shortcode or via a block.

The plugin will take care of the mechanism behind the contact form, including coding, submission, data collection, and notification. Users do not have to bother with the technical stuff at all.

The latest version of Gravity Forms has a revamped interface and vastly improves the user experience. According to the official announcement, it is a total overhaul and aims to make the operation more user-friendly, with a modern look and feel.

After installation, go to Gravity Forms on your dashboard. Create a new form, you will see the form builder page. The fields are located at the right sidebar.

PickAndTip GravityForms WordPress website page build contact form field create settings interface entry

General Tab

Each field has some settings available at the General tab. Let’s build and design a form in Gravity Forms’ form editor! Here are the few simple steps to set up a field on a form:

  1. Pick a field from the right sidebar, and drag it on the main area.
  2. Move it next to another field, if you want them sitting side-by-side on the form.
  3. Drag the handle (column control) to adjust the width of a field.
  4. Name the field you like at “Field Label”.
  5. Adding a description would be a good idea, as a little instruction, e.g. “Please fill in your details“, or “Please enter a value between 18 to 99“.
  6. Enter an example in “Placeholder” if this helps the users understand better.
  7. Tick “Required” if it is a mandatory field.

This is basically how you build a form with Gravity Forms. Easy!

The General tab may offer different settings, based on the nature of a field. For example, Phone may come with some format rules/templates to make sure users enter a valid phone number.

Appearance Tab

You can customize how a field looks at the Appearance tab. Here you can enable or disable the visibility of the field label, and most importantly, the field size (small, medium, or large).

You can add a custom CSS class if you want to customize it further.

Advanced Tab

If you want to add a default value, you can edit it at Advanced too. Besides, you can enable autocomplete, or change the visibility here.


Conditional Logic

This is how you can add some power to your forms! It is particularly practical in building functional forms, like surveys and quizzes. You can enable a field to appear based on a certain condition, for instance, Q5 will show up, if and only if the user selects “True” in Q4, otherwise the form will display Q6 instead.

Sounds complicated? No, don’t worry as Gravity Forms has made things easy. Click on the Conditional Logic tab, and enable it. Basically, there are only 2 parts in Conditional Logic:

PickAndTip GravityForms WordPress website page build contact form field conditions show hide conditional logic

“Show/Hide” this field if “All/Any” of the following match:
This requires some simple logic, and you just need a clear mind in setting it up. Then, trial and error in preview to see if things are working correctly, and making sense.

“is/is not/greater than/less than/contains/starts with/ends with”
Here you can add the condition(s) that trigger(s) the appearance of this field. The system picks up the fields and options you have added so far to create the conditions.

For example, you want to show this field only available for people who are above 18. You can select “Age” here (assume that you already have an “Age” fieldset), then pick “greater than” as a relation and the value “18” at the answer. So, this field will only show up when people answer ages above 18 at “Age”.

The Conditional Logic tab is also very useful in other cases. For instance, you can add an HTML field to show some advice, a picture, or some promotional information, based on an answer to previous questions from your visitors.

This can make your forms incredibly flexible and powerful.


Pagination

If you happen to create a long questionnaire or survey and want to split it into several pages, then you can do it easily inside the form builder. Just add a page break on a form with the “Page” field, and done.

You can add a “Page” field anywhere you like, and a page break is inserted. You can then move fields around to the previous page or the next page.

Gravity Forms is so thoughtful that it automatically embeds a progress bar on the form, after the insertion of a page break. Say, if you have 2 pages, it shows “Step 1 of 2” at the top of the first page.

The bar is customizable in colors, including a gradient effect. Also, you can name the pages the way you want, such as “Personal Information”, and “Educational Background”. Alternatively, you can opt for “Steps” in the Progress Indicator instead of a progress bar, or disable it completely.

There are options to customize the “Next” and “Previous” buttons as well: rename the buttons, or use images instead.

Last but not least, there is conditional logic for both Page and Next Button. So, you can design when it is shown or hidden.

PickAndTip GravityForms WordPress website page build contact form field create settings page break steps

Fields in Gravity Forms

Gravity Forms has prepared various fields to build any forms. Each has its own settings, as they are of different natures. Here are a few fields that are worth a look at:

Address

If you are to add an “Address” field, Gravity Fields provides useful fields within: Street AddressAddress Line 2City, State/ProvinceZIP/Postal CodeCountry, and more.

This is simply different in every country, for instance, some nations use ZIP codes, while others may not. You can also add a custom label, say you do not want it called “ZIP code” at all.

Date

You can use various date formats, according to your home country, like “dd/mm/yyyy“. This is the normal date field, which requests your visitors to enter the numerical values in the boxes.

Instead, to make things easier, you can use Date Drop Down or Date Picker. People can select the day, month, and year with a drop-down menu with the former. Or, a Date Picker will allow visitors to pick the date from a pop-up calendar. To make it look fun, you can attach a cute calendar icon next to the field.

Number

For example, you can customize the format of a number field, such as a separator (,) every 3 digits, or how many decimal digits. You can also set up the range of the number, providing its minimum and maximum values.

PickAndTip GravityForms WordPress website page build contact form field option settings

Drop Down/Checkboxes/Radio Buttons/Multi Select

It is quite easy to set up: Simply fill in the options. You can add a new value at the right sidebar by clicking the “+” icon, or delete any of them hitting its “x” icon.

To reorder the options, just drag and drop them. Straightforward!

Bulk Add / Predefined Choices
You may have noticed the button “Bulk Add / Predefined Choices” underneath. With this function, you can easily generate a list of predefined choices without entering them one by one.

Say, you are collecting information about where the visitors are from. Then, simply click “Countries” and you will see a list of countries in the world. Click the “Insert Choices” button, which will automatically create a drop-down menu or others with all options.

You do not need to gather a list of countries on the net, and create each option manually… copy and paste. Time saver!

Aside from Countries, you can make an option list from “U.S. States“, “Age“, “Employment“, “Job Type“, “Industry“, “Education“, and many more. Take an example here: “Days of the Week” or “Months of the Year” would be very useful, in cases like asking your customers for their preferences in booking an appointment.

File Upload

This includes allowing users to upload pictures. You can restrict to certain file formats for uploadings, such as jpg, png, and pdf, and its maximum file size allowed.

To let users upload more than one file, just enable “Multiple Files“.

Consent

This adds a “yes/no” consent checkbox to your form. If you request users to provide, e.g. personal photo, you may want to ask for his/her consent upon submission.

Gravity Forms helps you do it easily here. After placing the field, you can enter the details in Description. It may be about how the information is going to be used, and a disclaimer like “By ticking the box, you agree to the terms and conditions“, etc.

his is important to protect both yourself and the visitors. Remember, to make it a “Required” field!


Embed a Gravity Form to a WordPress Blog/Page

Okay, so you have finished building a form, and the next step is to embed it on a page, or anywhere on your website. It takes only a few easy steps:

  1. Create/Open a page
  2. Add a block by clicking a “+” sign.
  3. Select “Gravity Forms”, then you will see a drop-down menu of all the active forms.
  4. Pick the form you need, and done.
  5. You can click “Show more settings” to customize.

Alternatively, if you prefer adding a form on a toolbar, then you will see Gravity Forms Widget when customizing your theme. Add it, and pick the form!

PickAndTip GravityForms WordPress website page build contact form embed Elementor page customize

Pricing

There is no free version for Gravity Forms. For paid plans, there are 3 simple options: Basic, Pro, and Elite.

Basic (US$59/year) supports only 1 single website. There are no limits on the number of forms/entries, nor restrictions on other features. You can enjoy the powerful Conditional Logic, Multi-Page Forms, File Uploads, and other features. The differences here are Standard Support and only Basic Add-Ons. (We’ll go through the add-ons packages in more detail next.)

Pro (US$159/year) allows use on up to 3 websites and includes what Basic has offered. For add-ons, Pro users can use both Basic and Pro Add-ons.

Elite (US$259/year) supports an unlimited number of websites, Priority Support, and all add-ons (Basic, Pro, and Elite). Other privileges are the same as the other 2 plans, if no better.

Please refer to the official website for the latest information and deals.


Add-ons Packages: Basic, Pro, and Elite

Gravity Forms is an add-on for WordPress, to provide form features for a website. Likewise, Gravity Forms itself also has tons of add-ons to enhance its functionalities and support for other platforms.

There are 3 add-ons packages, Basic, Pro, and Elite, corresponding to the Basic, Pro, and Elite license, respectively.

Basic Add-ons focus on supports for email marketing platforms. This includes the popular services providers, ActiveCampaignGetResponseMailchimp, and the likes.

Pro Add-ons add more features with various services, such as Dropbox and Trello. If you are working on an online booking system or eCommerce site, then this would be the package you need. Pro Add-ons pack also consists of payment gateway support on Paypal CheckoutSquare and Stripe, etc.

If you want to add even more functionalities, like coupons, to your online shop, then you need to join the Elite plan. Besides, this package adds more flexibility in creating forms that interacting with visitors, like PollsQuiz, and Survey, as well as the User Registration function.

Add a Signature Box for Users to Sign
One particularly cool option is Signature. This allows people to sign on the form with its mouse, which also works perfectly on a phone or tablet as well (with a fingertip usually, of course).

You can customize the background color of the signature box, and also the pen color and size.

Mmm… you can actually use it as a drawing board too.


Tips on Using Gravity Forms

Email a copy for submitted form with GravityPDF

At the WordPress repository, you can find a free plug-in called GravityPDF. This allows the system to email a PDF version of a submitted form to the website administrator and/or the user himself/herself. You can pick from a few PDF templates available, and customize the filenames with the submission date.

Furthermore, you can customize everything in the PDF, like page size, orientation, font, font size, and color, as well as its background and header.

Third-party Plug-ins from Gravity Forms Community

If the official plug-ins are not enough for you, third-party plug-ins are developed, maintained, and supported by contributors. The great support from the community is going to extend the power and reach of Gravity Forms.

PickAndTip GravityForms WordPress website page build contact form field addons community support

Fully-Functional Demo Page

If you are not sure Gravity Forms is for you, please visit the demo page and have a test drive on its full features. This is an Elite demo, so you can access every feature for free, including all the available add-ons.

Try before you buy!

Video Tutorials

The official website has a Video Tutorials section to guide you through different operations. There are walk-through videos about “How to Enable Notifications“, “How to Enable Confirmations“, or “How to Use Conditional Logic“.

The short tutorials are well presented and easy to follow. Great for beginners!


Summary

There are many options in building a contact form in WordPress. Some are free, but you may need to upgrade to get more advanced features or for forms of different purposes.

If you are to pick a contact form plug-in for WordPress, then Gravity Forms is certainly a great choice. I think it is one of the best form builders in the market.

Version 2.5 has made it even better, as the revamped interface makes it easy to navigate and set up forms. On the other hand, you do not want your form plug-ins to be unstable and cause you to miss important messages. No worries, as Gravity Forms has always been consistent and reliable.

The price is reasonable, and add-ons support is going to make it more powerful without any limits. You can build forms here that are seamlessly integrated with third-party platforms, like online marketing or payment.

Gravity Forms works well in mobile and tablet environments. It is probably the most user-friendly among contact form plugins, and no surprise that it is highly rated by WordPress users. This also reflects the great support from contributors in the community.

Source: https://pickandtip.com/development/gravity-forms-wordpress-contact-form-plugin/