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)

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer

Click on Preview

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-1

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

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-2

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

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-3

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

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-4

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

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-5

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

Click on the + icon to add an element

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-6

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

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-7

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

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-8

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

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-9

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

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-10

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

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-11

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

gravity-forms-05-add-gravity-form-to-a-page-in-visual-composer-12

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.

Add a Block to Columns with the Frontend Editor of Visual Composer

Add a Block to Columns with the Front-End Editor of Visual Composer

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

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer

Use front-end editor of Visual Composer

It is really easy to add another element to a column in the front-end editor of the Visual Composer. Let’s try to add an element. To do that, hover your mouse over a column and you can see an orange button at the top.

Add a Text Block element

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-2

Select the Text Block element. If you’re having a hard time finding the Text Block element, you can either search it at the textbox located at the top-right side of the box or you can go to the Content tab to filter out some elements.

Text Block Settings box will pop-up

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-3

As you can see, our text block element is already added above the image. Once done with the changes, click Save Changes and close the text block settings.

Add a Separator element

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-4

Let’s try to add a separator element. To do that, select the separator element. If you’re having a hard time finding the Separator element, you can either search it at the textbox located at the top-right side of the box or you can go to the Content tab to filter out some elements.

Separator Settings box will pop-up

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-5

As you can see, the separator that we have added is already below the text that we’ve added a while ago. Once done with the changes, click on Save Changes and close to close the separator settings.

Add a Video Player element

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-6

Let’s try to add a video player element under the image. To do that, click on the orange button.

Select the Video Player element

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-7

Let’s try to add a video player element. To do that, select the video player element. If you’re having a hard time finding the video player element, you can either search it at the textbox located at the top-right side of the box or you can go to the Content tab to filter out some elements.

Video Player Settings will pop-up

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-8

Once done with the changes, click on Save Changes and close to close the video player settings.

Video Player was successfully added

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-9

As you can see, we’ve got our video player added under the image. It’s very easy to add elements. One important thing to remember is that to be careful and make sure that you have selected the right section when you add an element.

Add a Block to Columns with the Backend Editor of Visual Composer

Add a Block to Columns with the Back-End Editor of Visual Composer

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

append-an-element-to-a-column-with-the-back-end-editor-of-visual-composer

Append an element to the column

append-an-element-to-a-column-with-the-back-end-editor-of-visual-composer-1

Appending an element to a column in the back-end editor is really simple. I often prefer this view because you can definitely tell where you’re going to add that element because of the spacing between the rows.

To add an element, hover your mouse over the column where you want to add the element and click on the + icon.

Select any elements that you want to add

append-an-element-to-a-column-with-the-back-end-editor-of-visual-composer-2

Choose any element that you want to add. Whether it’d be a Text Block, a Separator, or even a Video Player element. In my case, I’ll choose the Separator element.

Separator Settings box will pop-up

append-an-element-to-a-column-with-the-back-end-editor-of-visual-composer-3

Once done with the changes, click on Save Changes and close to close the separator settings box. If you want to add as many as elements as you want, just continue the process and click the + icon again to add another element.

This is one of the beauties of the Visual Composer. You can manipulate these elements as you want. You can move them around and edit it’s properties easily.