GravityView: Adding a Contact Form to Your Directory Listings

Using Gravity Forms and GravityView, you can build powerful directories for a range of different use cases – display businesses on a Google Map, showcase member profiles, and more!

But what if you need a way for users to contact directory members?

In this guide, we’re going to show you how to add a contact form to your listings and prepopulate form fields using information from the listing page. 

Dynamic field population using merge tags allows for some pretty neat functionality, so keep reading to find out more! 😎

Sneak Peek

Here’s a sneak peek at the final result. As you can see, the “Message” field is prepopulated with the member’s name!

Creating the Directory Using GravityView’s Presets

📝 If you already have a functioning directory, feel free to skip to the next section.

Creating a directory using GravityView is easy. For a headstart, you can use one of GravityView’s form presets. 

Form presets are templates that contain all the necessary fields for different types of front-end applications. This includes directories, databases, and more.

To get started, hover over Views and click New View. After giving your View a name, click on Use a Form Preset under where it says “Data Source”. 

Now you can select from GravityView’s range of preset layout templates. If you’re building a business directory, choose the Business Listings preset. If you’re building a members directory, choose the People Profiles preset.

After selecting a preset, you’ll be taken to the View editor where you’ll see a pre-built layout that you can customize. After saving the View, GravityView will create a brand new form for you in Gravity Forms with all the corresponding fields.

This saves you time and allows you to get a directory up and running in only a few clicks!

Adding a Contact Form to Your Directory Listings

In this example, we’ve got a directory of public speakers and we want to add a contact form to the Single Entry page. This will allow users to contact their favorite speaker in order to enquire about availability or book them for an event.

Furthermore, we’re going to use Gravity Forms’ dynamic field population to prepopulate form field values with information from the Single Entry page. This will allow us to personalize the messaging and ensure that emails are sent to the correct speaker.

Creating the Contact Form

First things first, we’ll need to create the contact form inside Gravity Forms. To do this, we’ll hover over Forms and click New Form. Using the Gravity Forms drag and drop editor, we’ll create a basic contact form with the following fields:

• Name (Name field)
• Email (Email field)
• Message (Paragraph field)

After adding the required fields to our form, there’s one more step we need to complete before we can add it to our View.

We’re going to use dynamic population in the “Message” field to personalize the messaging based on the recipient’s name. For this to work, we’ll need to enable the “Allow field to be populated dynamically” option in the Field Settings. You’ll find this option under the Advanced tab on the right.

We also need to add a parameter name (in this case “message”, but you can use any name you like) allowing us to target that field specifically.

Adding the Form to the Single Entry Layout

Before continuing, ensure your Multiple Entries Layout contains a link to the Single Entry. If not, add one by clicking on the ‘+ Add Fields’ button and selecting the Link to Single Entry field.

The next step is to add our newly created contact form to the Single Entry layout.

We’ll open up our View editor and head over to the Single Entry layout by clicking on the Single Entry Layout tab at the top of the page.

To display our contact form on the Single Entry page, we’ll add the Gravity Forms embed shortcode inside a Custom Content field. To add a Custom Content field to your layout, simply click on the ‘+ Add Fields’ button and select Custom Content.

Next, we’ll click on the gear icon to open the Custom Content field settings and add our embed shortcode inside the text editor.

[gravityforms id="30" field_values="message=Dear {Name (First):1.3} {Name (Last):1.6}..."]

As you can see, the shortcode contains two parameters:

• id – the ID of our form in Gravity Forms
• field_values – the fields we want to prepopulate

As you can see, field_values="message" indicates that we’re targeting the “message” parameter that we set in the previous step. After message= we add the text we want to use to prepopulate the Message field.

Here we’re using the merge tags {first name} and {last name} to dynamically display the recipient’s full name.

For example, if someone wanted to message Kyle Leaver, all they’d need to do is click on the “Contact Me” link in the bottom right corner.

This will take them through to the Single Entry where they will see a contact form prepopulated with Kyle’s full name.

Dynamically populating the Message field is all well and good but it’s pointless if the message isn’t sent to the correct person! To ensure the contact request is sent to the correct directory member, we’ll need to pass the member’s email address to the “Send To” field in the Gravity Forms notification settings.

Dynamically Populating the “Send To” Field in the Gravity Forms Notifications Settings

To ensure the contact request is sent to the correct member of our directory, we’ll need to dynamically populate the email’s “Send To” field using a Gravity Forms merge tag.

For this to work, we need a way to capture the recipient’s email address in our contact form. To do this, we’ll use a hidden field and populate it dynamically using the email address merge tag.

I know what you’re thinking… that all sounds far too complicated. Don’t worry, it’s actually rather straightforward! And once you understand the ins and outs of dynamic field population, you’ll have some neat functionality at your fingertips! 👏

Adding a Hidden Field to Our Form

To start off, we’ll add a new Email field to our form and set it to Hidden. To do this, we’ll open the Advanced tab under Field Settings, scroll down to Visibility, and select Hidden.

We’ll also check the box to allow dynamic field population and set the parameter name to “recipient_email”.

After adding the hidden field, we need to head back to our View editor and update our Gravity Forms embed shortcode.

Tweaking the Embed Shortcode

The purpose of adding a hidden field to our form is to capture the directory member’s email address so that we can use this as the “Send To” address for the email notification.

For this to work, we’ll need to update our embed shortcode to dynamically populate the hidden field with the recipient’s email address.

[gravityforms id="30" field_values="message=Dear {Name (First):1.3} {Name (Last):1.6}...&recipient_email={Email:5}"]

The field_values parameter allows us to populate multiple field by using an ‘&’ to separate field values. Here we’ve added &recipient_email={Email:5}, using the Email merge tag to dynamically pass in the recipient’s email address depending on the member being contacted.

📝 We’re using the {email} merge tag from our directory listing form in order to pull the email address of the public speaker the user wants to contact. As your contact form will also likely have an email address field, it’s important not to confuse the two.

The final step is to configure the Gravity Forms email notification.

Configuring the Email Notification

To customize the email notification, we’ll head over to the Form Settings page and click on the Notifications tab on the left. 

Next, we’ll edit the current notification and set the “Send To” email to the new hidden field that we created in the previous step.

That’s it!

Now when users fill out the contact form on the Single Entry page, their message will be sent directly to the email address associated with that particular directory member.

Bonus: Using a URL to send Users to a Separate Contact Page

If you want to embed your contact form on a separate page (instead of within the Single Entry layout), you can dynamically populate the form fields using URL query string parameters.

All you need to do is use a bit of HTML to create an anchor link inside a Custom Custom field. The fields you want to prepopulate with entry information should be included at the end of the URL using query string parameters. For example:

<a href=“https://example.com/contact/?message=Dear%20{Name (First):1.3}%20{Name (Last):1.6}...&recipient_email={Email:5}”>Contact Me</a>

For more information about populating fields dynamically in Gravity Forms, read our ultimate guide to dynamic field population in Gravity Forms.

Add a Contact Form to Your GravityView Directory Today!

Using GravityView’s form presents, you can get a directory up and running in no time. GravityView allows you to create business directories, member profiles, staff directories, and more!

In this tutorial, we showed you how to add a contact form to your listings and prepopulate form fields using information from the listing page. We also covered how to dynamically populate the “Send To” field in order to send emails directly to directory members.

If you enjoyed this post, check out our picks for the 10 best WordPress business directory plugins in 2022.