Gravity Forms 05 – Add Gravity Form to a Page in Visual Composer

Gravity Forms 05 – Add Gravity Form to a Page in Visual Composer

Get a copy of the transcript of this guide (pdf)


Click on Preview


In this series of tutorial, we have already created a form, change the settings of the form, change the email notification settings of the form, and change the confirmation settings of the form.

Let’s preview the form that we have created. To do that, click on the Preview menu at the top of part of the page.

Inquiry form


This is how our inquiry form looks like. Now, what we’re going to do is to place this form into our homepage.

Click on Pages


In order to be able to edit our homepage, let’s click on the Pages menu which is located on the sidebar menu.

Click on edit


As you can see, our homepage is appended with a “Front Page” word. Let’s edit the page by clicking on Edit option or just by clicking the title.

Change the row layout from 1 to 2/3 + 1/3 columns


Let’s change the layout of our row to 2/3 + 1/3 columns.

Click on the + icon to add an element


There is a Visual Composer element for gravity forms. If you’re not using the Visual Composer, you can still add the gravity form by inserting shortcodes. Let’s add a gravity form element by clicking the + icon in the newly added column.

Select the Gravity Form


Select the Gravity Form element. If you’re having a hard time finding the Gravity Form element, go to the Contents tab to filter out some of the elements.

Gravity Form Settings


We are now seeing the Gravity Form Settings. The following are the properties that you can modify inside the Gravity Form settings:

  • Form
  • Display Form Title
  • Display Form Description
  • Enable AJAX
  • Tab Index

For the form property, we need to choose the form that we want to embed/show. Let’s select our inquiry form. For all the other properties, let’s leave it as default. Once done, click Save Changes then Close to close the settings.

Click on Preview Changes


Right now, as we can see, our inquiry form is already embedded in the second column. Let’s preview our work by clicking on Preview Changes.

Submit an inquiry


There you go. We have successfully embedded our inquiry form. All the required fields are indicated with an asterisk (*) symbol beside the name of the field.

Let’s try to submit an entry in our form. Once done, click on Send Inquiry.

Our confirmation text


As you can see, the confirmation text that we have configured is here. The inquiry form disappeared and the confirmation text appeared.

Click on Update


If you have no more changes, click on Update to commit our changes to the database.

There you have it. This is how we embed our gravity form inside a page. And this ends our series on how to create a form to embed a gravity form.