How to Make and Style Forms with Gravity Forms in WordPress

Forms are one of the most important part of a website. There are a variety of forms like contact forms, survey forms, order processing forms, fare calculator forms etc. A simple contact form doesn’t involve complex logic like conditional fields or integration with 3rd party payment gateways whereas in case of order processing forms you will need these features. Gravity forms is a premium WordPress form builder plugins with advanced features. In this article, I will show you how to create and publish a form in WordPress using Gravity Forms.

How to Install Gravity Forms in WordPress

First, you need to download the zip file of Gravity Forms from here. Make sure you are logged in otherwise the download link won’t be visible to you.

 

gravity forms 1

 

 

  • Now open WordPress admin dashboard and navigate to Plugins -> Add New.

 

 

gravity forms 2

 

gravity forms 3

 

 

  • Click on the Upload Plugin button present next to Add Plugins heading.

 

 

gravity forms 4

 

 

  • Now, you will get the option to upload the zip file of the plugin. You can also drag and drop the zip file directly on the page to upload it.

 

 

gravity forms 5

 

 

  • WordPress will now automatically unzip the file and place it inside Plugins folder of your website. Wait till all this happens in the back-end and then click on the Activate Plugin.

 

 

gravity forms 6

 

 

Gravity Forms Initial Setup Wizard

  • After you activate Gravity Forms, then a new ‘Forms‘ menu will appear in admin sidebar. When you click on it for the first time, then you will be welcomed by the Setup Wizard. It will help you do basic configuration settings.
  • The first step is to enter the license key. If you don’t enter license key, then you won’t be able to receive future updates for this plugin. Click on Next button to proceed to next step.
  • Now you will be asked whether you want to enable background updates. If you enable it then all the updates will be delivered to you. I will highly recommend enabling this feature else you will miss security and feature updates which are released on regular basis.
  • Next, you can set the currency and whether to enable no conflict mode.

This completes all the steps for the setup wizard. Now you are ready to create your first form.

How to Create your First Form

Gravity Forms comes with drag and drop form builder. All the available fields are aligned in the right sidebar and divided into four categories Standard, Advanced, Post and Pricing Fields.

  • Click on the New Form option under Forms menu and you will get a modal box to enter Form Title and Description and then click on Create Form

 

 

style gravity forms 7

 

 

  • Drag and drop all the fields you want to include in the form wrapper section. After you add a field, you can then edit its properties like the label, description, options for checkbox and radio inputs, conditional logic, etc.

 

 

gravity forms 8

 

 

  • Once you have added all the fields, then click on the Update Form button present beneath the fields sidebar to save the form into WordPress database.

 

How to Add Form in Post/Page

  • Open the post/page in which you want to add the form and then click on Add Form button present in the editor.

 

gravity forms 11

 

 

  • This will open a popup window with an option to select the form along with other options like whether to show title, description or whether to enable AJAX for form submissions.

 

 

gravity forms 12

 

 

 

 

  • Click on Insert Form and then Publish the post/page to show your form in the frontend.

 

How to Style a Form

You need manually to add the CSS codes inside the style.css file of your theme to style the form. There are in-depth examples for how to target each field of the form using CSS at this page. However, this is not the most user-friendly way for styling instead you can download Styles and Layouts for Gravity Forms plugin from WordPress repository.

 

  • Download, Install and Activate Styles and Layouts for Gravity Forms plugin from here.
  • Login into WordPress Dashboard and open the page in “frontend” where you have added the form.

 

gravity forms 9

 

gravity forms 10

 

 

  • Select the form you want to design and the page will automatically refresh.

 

 

screen11

 

 

  • Again Navigate to Styles & Layouts Gravity Forms panel and you will see all options to design the form.

 

 

gravity forms 13

 

 

  • Every change will be previewed instantly. Now click on Save and Publish button to save the changes.

 

 

gravity forms 14

 

 

If you have any questions regarding any of the steps or you are facing any issue then leave a comment and I will get back to you ASAP

 

About Author:

This article is written by Aman Saini, who is WordPress freelancer. He creates custom plugins and themes. You can also check his latest plugin for integrating salesforce with formidable forms. You can also contact him for any custom WordPress work.

Guest Writer

This is the post written by a guest writer.

2 comments