Tools Used

Form

Use Case

Read this in the last post? Skip to the next section.

In preparing for an annual conference, I was looking for a better way to collect and display the speakers’ information. The conference was expecting about 50 speakers so the manual workload was not trivial. Using Gravity Forms and GravityView I developed the following workflow:

1. Once speakers have given a verbal commitment, I fill out a form with all the information I have: their name, company name, email address, and the session(s) they will be speaking in.
2. Upon form submission a user account is created and a tag is added to the email marketing platform. This tag triggers an email to prompt the speaker to log in to the speaker portal to verify their information, add anything that is missing, and get access to key information (PowerPoint Template, etc.). The automation in the email marketing system sends out timed reminders as the date of the conference approaches.
3. A View of the completed form is visible in the Speakers Portal only to the speaker it was created for. It displays their basic information and prompts them to fill in anything that is missing. From here they can edit the entry to upload a headshot or fill in any missing information. They are not able to edit certain fields which are editable only by admins. The form automatically crops and resizes their image to fit properly on the website.
4. The admins are able to access a page that shows all of the speakers in one view, so at a quick glance they can see what information is still needed.
5. Once the basic information is entered into the form (headshot, speaker name, company name and job title), the speaker automatically appears on the Speakers page of the website.

Steps 1 & 2 will be covered in this post. The next post will cover Step 3 & 4. The final post in the series will cover Step 5.

A note about License requirements:

• To build the form, the Gravity Forms Basic License is sufficient.
• For functionality and looks I’m using two additional plugins to build the form: Slim Image Cropper for Gravity Forms and Gravity Forms Material Design.
• Sending the form information to your email marketing platform probably also will work with Gravity Forms Basic. See the list of add ons available for email marketing services here to be sure yours is included.
• To register the user upon form submission, the Gravity Forms Elite License is required.
• To create the multiple view visible to admins, a GravityView Core License is sufficient.
• To allow speakers to see only their own entry, you’ll need the Advanced Filtering Extension available with GravityView Core + Extensions License.
• To customize the display of the Speakers on the website, you’ll need the GravityView All Access License to use the DIY Layout Extension.

Steps

Step 1: Set up Your Form Fields

If you haven’t already done so, set up your form as explained in the post Collecting Speaker Information with Gravity Forms. Then come back here to follow the instructions to allow speakers to edit their information.

Step 2: Setting up the “At a Glance” View

Now that your form is complete, it is time to set up the View – the way it will display on your website.

Let’s start with a quick “at a glance” view for Admins to see if all the necessary information has been collected. This will display a list of all of the entries – we’ll display the key details we are collecting from our speakers to see what is still missing with just a quick scroll.

Create the View

Once you have installed GravityView, on the form edit screen you will find a new button labeled Create a View. Click there to get started.

If you have the basic license, you’ll be able to choose from Table View or Listing View. For this form we’ll use Listing View.

In the View Configuration section of the screen there are three tabs. For this view, we will only use the first tab: Multiple View (we’ll delve into the others for the next view).

Set Up Multiple View

We don’t need any Above Entries Widgets so we can skip that section. In the next section, labeled “Entries Fields” we will select the fields we want to display.

I decided to use the speaker’s name as the Listing Title. To do that I clicked the Add Field button, then chose the Name field from my form. Once you’ve selected the field(s) you want to display, click on the x at the top left of the selection box.

Using the same method, I added the Headshot field to the Image box, and in the Other Fields box I added Company Name, Job Title, and Bio.

For the Name and Headshot fields, I clicked on the gear next to the label and unchecked the box labeled “Show Label” because these fields are self explanatory.

For the fields in the Other Fields box, I do want to show the labels to distinguish each field from the next. I prefer to have the labels bolded, so I added a custom title with HTML to add the bolding. To do this, click the gear icon next to the label, leave the Show Label box checked, then in the Custom Label box, enter your desired label (it can be anything) and surround it with bold tags <b> and </b>. For my field called Your Company Name the Custom Label looks like this: <b>Your Company Name</b>.

To finish the view, I added a couple of Admin tools to the Footer Right box: Edit Entry and Approve Entries. I always remove the label on Edit Entry because otherwise it says “Edit Entry Edit Entry”. I didn’t make any modifications to the Approve Entries field.

In order to see what the View looks like, you’ll need to have a few entries. This is where your form testing comes in handy.

Install on a Page

Install the View on a page so that you can see what it looks like as it interacts with your theme. To add a View to a page, go into the Edit View page and copy the Embed Shortcode from the right side of the screen into a text area on the page.

Since this view is intended to be Admin only, you have a couple of different options for the page set up. If the information is not sensitive, you can leave the page accessible to the public and just not link it to your menu. You can protect the page a little further by requesting search engines not to index the page. If you use Yoast, the free SEO plugin, they have an easy way to do this.

For sensitive information, I recommend using a page restriction plugin. A great free option is the Members plugin. For a paid option, I like the Theme My Login free plugin with paid Restrictions, Redirection, and Profiles extensions.

Now that you have the view loaded onto a page, it should look something like this.

Step 3: Allowing Speakers to Edit Their Own Entries

Now that you have a quick way to view all of the submitted information, you can create a more complex view that will allow speakers to edit their own entries.

Note: There are two ways to do this. You can allow the speakers to see all entries, but only edit their own. This requires only the Core License for GravityView. In order to filter the entries to allow speakers to see only their own entry, you’ll need the Advanced Filtering extension included with the Core + Extensions License.

Either way, we’ll start the same as the previous view we created.

Set Up Multiple View

Again, choose List view. You can configure the fields in whatever way makes sense to you, but I followed a similar structure to the first view.

I used the speaker’s name as the listing title, and the headshot as the image. The Other Fields I included were: company name, job title, email, phone number, and bio. I made the same formatting changes, added the bold HTML tags to the Custom Labels.

In the Footer Right, I included the Edit Entry field.

Once you’ve set up your view, scroll down to the View Settings box and check the box next to Allow User Edit. You can also choose to unapprove the entries after edit if you want to double check the edits before allowing them to go live on your website.

You can also choose to change the redirect after edit. Your choice will depend on the workflow you would like for your speakers. I set mine to redirect to multiple entries.

If you leave the settings like this users will be able to see all entries but only edit their own. That will look like this when Kara Arnold logs in. Note that only her entry has the Edit Entry link in the gray bar below the entry.

If this set up works for you, skip to the next step.

If you would prefer to limit users to only be able to see their own entry, you’ll need to upgrade to the Core + Extensions License of Gravity View.

Once you have completed the upgrade, go to the Views menu item on your admin page and choose Extensions as shown below.

Find the Advanced Filtering extension and click the Activate button to install the additional functionality for your Views.

When you go back to editing the View, you’ll see a new option in the View Settings at the bottom of the Filter & Sort tab, labeled Advanced Filter. To set this up to be visible only to the user who created it, choose [Created By] [is] [Currently Logged-In User].

Note that you can change the Entry Creator by editing the entry. Just above the Update button on the right hand side, there is a dropdown box that allows you to choose a different user to be the creator of that entry. This is helpful if an administrator creates the entry, but then wants to assign it to a different user.

Restrict the Edit Entry Fields

There is probably no need for a Single View in this case, so I won’t go over how to set it up. If you feel the need for it, you can set it up similarly to the Multiple View. Just don’t forget to make one (or more) of your Multiple View fields link to the Single View or no one will be able to get to it!

However, I do want to limit the fields that the users have access to change, so I will go to the Edit Entry tab to change that. If you do nothing on this tab, your users will be able to edit all field entries. I chose the fields I wanted to be editable and made no changes to their settings.

Now the administrator will still have access to all fields through the first View we created, or through the edit entry option on the backend, but users will only be able to edit the fields that you’ve selected.

Step 4: Publish

Now you can publish your form and sit back and watch as the users harness the power to create and edit their own entries!

In the next post (coming soon) we’ll walk through how to create a Speakers Page on your website that is custom formatted to your liking, using the entries that come in through the form.