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 were covered in this post. This post covered Step 3 & 4. This is the final post in the series, which 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 set up a speakers page on your website with GravityView.

Step 2: Setting up the Speakers Page

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

Here is what a row on the speakers page will look like when we are all done:

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.

To achieve the look above you’ll need the GravityView All Access License to have access to the DIY Layout Extension.

Once you have purchased the All Access License, go to Views > Extensions on the Admin menu bar to activate the DIY Extension. Once it is active, you’ll see it as a choice in the View Type box when you create your view.

In the View Configuration section of the screen there are three tabs. We’ll start with Multiple View.

Set Up Multiple View

For this view, we only want to display our entries. You could add a search bar if you want, but I didn’t so I’m skipping the Above Entries Widgets. In the next section, labeled “Entries Fields” we will select the fields we want to display.

Unlike in Listing View as we’ve seen in the other views we’ve built, DIY Layout has no format to it. You’ll create the format you want with CSS. So all of your fields will be entered one beneath the other, regardless of how you want them arranged in the end.

This means you can add all your fields at once. To do that, click the Add Field button, select all the fields you want to display, then click on the x at the top left of the selection box to close it.

As you add your fields, you’ll see “DIV” automatically appears next to the field title. This <div> tag allows you to style the field with CSS. GravityView gives other options though that will pick up the styling from your theme. I set the speaker’s name as H3, heading level 3; the company name as H4; and the job title as P, paragraph text. Your theme will style these based on its settings, but you can override the theme settings if needed. (We’ll do some of that below.) To make these changes, click the gear icon next to the field you are changing, then move the radio button to the appropriate setting.

Before we move on, let’s add CSS Classes to the fields so that we can easily style them later. Here are the classes I created:

• Your Headshot: gv-speaker-image
• Keynote Star: icon-star
• Name: gv-speaker-name
• Company Name: gv-company-name
• Job Title: gv-job-title

To enter the CSS Classes, click on the gear icon, then scroll down to the bottom of the options box. There you will find a field labeled Custom CSS Class. Enter the classes above in that field like this:

Note, I checked “Link to single entry” on both the headshot and speaker’s name fields. We will set up the single entry in the next step.

Since this workflow includes waiting on the speaker to submit their headshot and bio, I set an Advanced Filter so that partially completed entries don’t show up on the speakers page.

Scroll down to the View Settings box and choose the Filter & Sort tab. Scroll down to the bottom of that box to find the Advanced Filter settings. Choose the fields that you want to ensure are completed, then choose “is not” and leave the fill in field blank. In other words, only include this entry in the results if this field is not blank. Click the plus next to the blank box to add another condition.

That’s it for the View settings. The next step is to style the View. In order to modify the Multiple View with CSS, you’ll need to have a few entries so you can see what it looks like. 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.

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

Create Columns on the Page

To show the speakers pictures side by side as shown in the first image, we’ll need to create columns.

Start by stretching the view to cover the full page:
.entry-content{
   width:100%
}

Then create a flex container for the entries:
.gv-diy-container{
   width:100%;
   display:flex;
   align-items:stretch;
   justify-content:center;
   flex-wrap:wrap;
   flex:1 0 auto
}

You can learn more about flexbox here.

Finally we’ll create four columns:
.gv-diy-multiple-container .gv-diy-view{
   width:20%;
   margin-right:5%;
   margin-bottom:50px;
   text-align:center
}

Note that the width and margin add up to 100% when 4 entries are side by side. If you remove the margin, you’ll have 5 columns (100% / 20%).

That will place four entries side by side. Next let’s style the entries to look like the images in the first picture.

Style the Entries

First, make the image round, centered, with a space beneath it:
.gv-speaker-image img{
   margin:auto;
   border-radius:50%;
   padding-bottom:20px
}

Add styling to the image on hover:
.gv-speaker-image:hover{
   transform:scale(1.1);
   transition:transform .2s
}

Add a star before the speaker’s name to designate the keynote speakers:
Note: this method requires the Divi Theme.
.icon-star h3:before{
   font-family:’ETmodules’;
   content:”\e031″;
   color:#345666;
   font-size:20px;
   float:left
}

Increase the paragraph font size and italicize:
.gv-diy-multiple-container .gv-diy-view p{
   font-size:18px;
   font-style:italic;
   line-height:1
}

Decrease the line height for the speaker’s name:
.gv-diy-multiple-container .gv-diy-view h3{
   line-height:1.4
}

Decrease the line height for the company name:
.gv-diy-multiple-container .gv-diy-view h4{
   line-height:1
}

Now save the changes and view your page. It should look like this:

Step 3: Create Speaker Profiles

Next we can set up the Single View to shows each speaker’s profile when their picture or name is clicked on.

Set up Single View

Just like in Multiple View, we’ll list all fields in a row and then style them.

Here are the fields I set up:

• Headshot
• Name
• Company Name
• Job Title
• Bio
• Custom Content called Sessions Header
• Session 1 Title
• Session 1 Description
• Session 2 Title
• Session 2 Description
• Session 3 Title
• Session 3 Description

Here is what that looks like:

As you can see in the image above, I set the name to H1, Company Name to H2, Job Title and Sessions Header (my Custom Content field) to H3, and Bio and each of the session descriptions to P.

The DIY View doesn’t automatically add labels, so I created the Custom Content field to add a label above the session section. The content of the field is simply “Session(s)” as shown below.

In this view, there are only two Custom CSS classes created:

• gv-single-image for the Headshot field
• session-title for the Session Title fields

I turned the session titles into Heading Level 6, by adding HTML tags in the Before Output and After Output boxes in the field options. The HTML tags for Heading 6 are <h6> before the element and </h6> after the element. It looks like this:

In the View Settings, you can choose Single Entry and set a title for the page as well as change the back link. If you leave them blank, there will be no title and the back link will say “<— go back”. I left my title blank, but set my back link to say “Back to Speakers Page”.

That looks like this on the front end.

Style the Single View

Without styling, the image will be fullwidth. I want the image to appear on the left with the words on the right so we add some CSS to set the width of the image and float it left:
.gv-single-image img{
   width:500px;
   height:auto;
   float:left;
   margin-right:20px;
   margin-bottom:270px
}

Now add a microphone before the speech title.
Note this requires the use of the Divi theme.
.session-title:before{
   font-family:’ETmodules’;
   content:”\e01b”;
   margin-right:10px;
   margin-top:-2px;
   color:#000000;
   font-size:20px;
   font-weight:lighter;
   float:left
}

Finally, style the h6 text to be larger and heavier:
.session-title h6{
   font-size:16px;
   font-weight:600
}

That’s it! Now you should have a single entry page that looks like this:

Step 4: Full CSS

Here is the full CSS for your convenience. 

/*****SPEAKER PAGE GRAVITYVIEW DIY LAYOUT FROM BUILTWITHGRAVITY.COM*****/
/*make View cover entire screen*/
.entry-content{
   width:100%
}

/*create flex container for entries*/
.gv-diy-container{
   width:100%;
   display:flex;
   align-items:stretch;
   justify-content:center;
   flex-wrap:wrap;
   flex:1 0 auto
}

/*create 4 columns for entries*/
.gv-diy-multiple-container .gv-diy-view{
   width:20%;
   margin-right:5%;
   margin-bottom:50px;
   text-align:center
}

/*format speaker image round, centered, with spacing at bottom*/
.gv-speaker-image img{
   margin:auto;
   border-radius:50%;
   padding-bottom:20px
}

/*enlarge speaker image on hover*/
.gv-speaker-image:hover{
   transform:scale(1.1);
   transition:transform .2s
}

/*add a keynote star before speakers name*/
.icon-star h3:before{
   font-family:’ETmodules’;
   content:”\e031″;
   color:#345666;
   font-size:20px;
   float:left
}

/*increase paragraph font size*/
.gv-diy-multiple-container .gv-diy-view p{
   font-size:18px;
   font-style:italic;
   line-height:1
}

/*increase line height for h3 font*/
.gv-diy-multiple-container .gv-diy-view h3{
   line-height:1.4
}

/*reduce line height for h4 font*/
.gv-diy-multiple-container .gv-diy-view h4{
   line-height:1
}

/*style single view image*/
.gv-single-image img{
   width:500px;
   height:auto;
   float:left;
   margin-right:20px;
   margin-bottom:270px
}

/*add microphone icon before speech title*/
.session-title:before{
   font-family:’ETmodules’;
   content:”\e01b”;
   margin-right:10px;
   margin-top:-2px;
   color:#000000;
   font-size:20px;
   font-weight:lighter;
   float:left
}

/*increase font size and weight for h6 font*/
.session-title h6{
   font-size:16px;
   font-weight:600
}

Step 5: Publish

Now you can publish your form and sit back and watch as the speakers page creates itself!

If you haven’t already, don’t forget to check out the last post that shows how speakers can edit their own entries.