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.

Gravity Forms 04 – Configure Confirmation Text or Thank You Page

Gravity Forms 04 – Configure Confirmation Text or Thank You Page

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

gravity-forms-04-configure-confirmation-text-or-thank-you-page

Click on Confirmations tab

gravity-forms-04-configure-confirmation-text-or-thank-you-page-1

We have already created our inquiry form using gravity forms, change the settings for the form, and change the email settings of the form. Now, let’s change the confirmations setting of our form.

Once the form is being filled in, you’ll get a confirmation message showing that you have successfully submitted your information. The standard way of doing this is to set up in confirmation settings, say “Thank you for contacting us. We’ll be in touch with you shortly.”

To do this, let’s go to the Confirmation settings by clicking on the Confirmations tab.

Click on Edit

gravity-forms-04-configure-confirmation-text-or-thank-you-page-2

Let’s edit the Default Confirmation settings. Click on Edit to continue.

First type of confirmation: Text

gravity-forms-04-configure-confirmation-text-or-thank-you-page-3

There are three types to do our confirmation message. These are the following:

  • Text
  • Page
  • Redirect

The first type of the confirmation message is the text. After the person successfully submitted his/her information, the form will disappear and this confirmation message will be seen. Let’s place our message inside the textbox. We could put something like “Thank you for contacting us. We’ll be in touch with you shortly.” We can also append it with “Call us if you need an urgent assistance”.

This is now the message that the person will be seeing after he/she has successfully submitted the form.

Once done, click on the Save Confirmation.

Second type of confirmation: Page

gravity-forms-04-configure-confirmation-text-or-thank-you-page-4

The second way of having a confirmation is by a page. All you need to do is to select a page inside your website. Instead of showing a message after the person has successfully submitted the form, he/she will be transferred to another page, say  Home page or About page.

Third type of confirmation: Redirect

gravity-forms-04-configure-confirmation-text-or-thank-you-page-5

The third and last way of having our confirmation is by a redirect page. When the person has successfully submitted the form, he/she will be redirected to a page. For example, we can place our Facebook link as our redirect page. Just be careful in selecting a redirect page as your confirmation. Select the most appropriate page to redirect the person after he/she has successfully submitted the form.

This is how we set the confirmation page of a form.

Gravity Forms 03 – Admin Email Notification Settings

Gravity Forms 03 – Admin Email Notification Settings

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

gravity-forms-03-admin-email-notification-settings

Click on Notifications tab

gravity-forms-03-admin-email-notification-settings-1

In our previous video, we have managed to create a form and change its settings. What we’re going to do is the final configuration for notifications. What we want our form to do is to send to us an email once a person successfully submitted its information.

To do that, let’s edit the notification by clicking on Notifications.

Click on Edit

gravity-forms-03-admin-email-notification-settings-2

After clicking on Notifications, let’s edit the Admin Notifications which is set up default by WordPress.

Modify some properties

gravity-forms-03-admin-email-notification-settings-3

We are now inside the Admin Notification settings. These are the following properties that we can modify in the Admin Notification settings:

  • Name
  • Send To
    • Send to email
  • From Name
  • From Email
  • Reply To
  • BCC
  • Subject
  • Message

First, let’s change the Send to Email property. We want it to be sent to ourselves or to the sales or inquiries email. In my case, I’ll have it mail@jezweb.com.

For the From Name, let’s merge the tags of First Name and Last Name. We did this, so that, when we receive this email, we can reply to it directly back to the person who filled and submitted his/her information using the inquiry form. For the From Email, let’s use the Email tag.

We have successfully modified the basic settings.

Click on Update Notification

gravity-forms-03-admin-email-notification-settings-4

If you want, you could set a Blind Carbon Copy (Bcc).

For the Subject of the email, you can have the name of your website plus the word inquiry. With this, you can have a neat inbox and you’ll easily identify which email is an inquiry email and which is not.

The {all_fields} tag inside the body of the message will include all the fields inside your inquiry form. If you want to add more messages inside the body of your message, you can write anything that you want.

Once you’ve made your changes inside the Admin Notification settings, click on Update Notification.

Gravity Forms 02 – Form Submit Settings and Spam Honeypot

Gravity Forms 02 – Form Submit Settings and Spam Honeypot

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

gravity-forms-02-form-submit-settings-and-spam-honeypot

Click on Settings

gravity-forms-02-form-submit-settings-and-spam-honeypot-1

So, in our previous video, we’ve already made our inquiry form in gravity forms. If you haven’t seen the previous video, click here.

Next is to do a few changes to the settings. To do that, click on Settings.

Modify the button text

gravity-forms-02-form-submit-settings-and-spam-honeypot-2

Now that we are inside the settings, scroll down to the button text property. This is the main thing that I am interested in changing. The default text inside the button is ‘Submit’, but let’s be creative. Let’s change the text from ‘Submit’ to ‘Send Inquiry’ to make it look like a little bit more human-friendly and a little bit less computer-nerdy.

Enable the anti-spam honeypot and the animation

gravity-forms-02-form-submit-settings-and-spam-honeypot-3

After editing the button text, scroll down to the last part of the settings page. There are some properties that are interesting. Enable Save and Continue if you have a quite long form that you think people might want to save the details and come back later and fill it in further whenever they’re ready.

I’m not enabling the Save and Continue property. What I do want to enable is the anti-spam honeypot. This is a clever way that gravity forms can do to keep some of the spams out. Spams that might auto-generate the information inside the form and submit it. We’ll also enable the animations as well.

Once done, click on Update Form Settings.

Form settings updated successfully

gravity-forms-02-form-submit-settings-and-spam-honeypot-4

We’ve now configured our form by editing the button text and enabling the anti-spam honeypot and the animation. You’ll receive a message at the top of the page to inform you that the update was successful.

Gravity Forms 01 – Creating a Simple Inquiry Form

Gravity Forms 01 – Creating a Simple Inquiry Form

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

gravity-froms-01-creating-a-simple-enquiry-form

Add a new form

gravity-froms-01-creating-a-simple-enquiry-form-1

An inquiry form on your website is one of the most basic ways to capture and request people’s information. Gravity forms is a very simple to use inquiry form system. If that’s installed, let’s add a new form by hovering your mouse over the Forms menu, located on the sidebar menu, and click on New Form.

Name the form

gravity-froms-01-creating-a-simple-enquiry-form-2

Let’s give the form a name. Let’s name it Inquiries since its main purpose is to inquire information from the people. Once done, click on Create Form.

Add the important fields

gravity-froms-01-creating-a-simple-enquiry-form-3

First, let’s add the important fields of our form. The basic fields for most inquiry forms are a person’s name and email address. To add these fields, let’s go to Advance Fields box then let’s select the Name and Email fields.

Add the other fields

gravity-froms-01-creating-a-simple-enquiry-form-4

As you can see, the name and email address fields are already added inside our form. Now, let’s try to add our phone field. As you can see inside the Advance Fields box, there is a Phone field. Typically, we don’t use this field because of the formatting of the number. There are many phone number formats that exist and this will make our data inconsistent.

Alternatively, we can add a phone number field by using a simple single text line field. To do that, let’s go the Standard Fields box.

Other fields or standard fields

gravity-froms-01-creating-a-simple-enquiry-form-5

Click on the Single Text Line field. Also, click on the Paragraph Text field. We will use this field as a comments field.

Modify the properties of the Paragraph Text field

gravity-froms-01-creating-a-simple-enquiry-form-6

Let’s first modify the properties of the paragraph text. To do that, click on the field. Let’s name this field ‘Inquiry’.

Modify the properties of the Single Text Line field

gravity-froms-01-creating-a-simple-enquiry-form-7

Let’s go to the next field, which is the Single Text Line field. Let’s name this field ‘Phone’ and also tick the ‘Required’ checkbox under rules. Required fields need to be filled by the users. They cannot submit their information without filling the required fields.

Modify the properties of the Email field

gravity-froms-01-creating-a-simple-enquiry-form-8

For the Email field, tick the ‘Required’ checkbox. Having both the phone number and email address field required will ensure us that we can contact the person either via email or phone. We also did this, so that, in case when the person did not type the correct email address or phone number, we can still use either information to contact them.

Modify the properties of the name field

gravity-froms-01-creating-a-simple-enquiry-form-9

For the Name field, tick the ‘Required’ checkbox.

Click on Update Form

gravity-froms-01-creating-a-simple-enquiry-form-10

Great!

Now, we’ve got the basis of our standard inquiry form. Once we’ve put all the fields together, click on Update Form.

In a subsequent video, we’re going to show you how to set the form up to send to you as an email and some other settings that are quite important as well.