Customize Pages and Hand Off Your Website Integration

Learning Objectives

After completing this unit, you’ll be able to:

• Customize the Volunteer Signup form.
• Identify what you need to hand off to your web developer.
• List other web pages included with V4S.

Customize Your Sign-Up Form

Now for some finishing touches. We’ve seen the fields that the sign-up form includes right out of the box: First Name, Last Name, Email, Business Phone, Home Phone, Organization, Mailing Address, and Number of Volunteers. But perhaps you don’t care about Business Phone and want to remove that from the form. Or maybe you have a custom field on contacts that tracks your volunteers’ favorite animals that you want to include. Guess what—you can do all that with V4S.

You can include any field on your sign-up form—standard or custom—that’s on the contact object or the volunteer hours object. That’s because the Volunteer Sign-Up form uses a handy feature called field sets. In Salesforce, a field set is a grouping of fields that a Visualforce page can use. The field sets used for the sign-up form are both called VolunteersJobListingFS.

EarthCorps occasionally needs to call their volunteers on their mobile phones. Because Mobile Phone is a field on the contact, Dianna knows she can add it to the Volunteer Sign-Up Form. Let’s follow along as she adds the Mobile Phone field to the field set.

1. In Setup, click the Object Manager tab.

2. From the list of objects, click Contact.

3. Click Field Sets.

Note

This example isn’t using the VolunteersJobListingFS field set on the volunteer hours object. But, we wanted to let you know where to find it in case you wanted to include some of its fields. From the Object Manager tab, click Volunteer Hours, then click Field Sets. You'll see the VolunteersJobListingFS in the Field Sets list.

4. Click VolunteersJobListingFS. The Job Listing page (where the Volunteer Sign-Up form lives) uses the VolunteersJobListingFS field set.

5. The Field Set page is just like the standard Edit Page Layout page—you can add, remove, and reorder fields. Dianna drags the Mobile Phone field to place it just after Home Phone. 

Note

Even though you can drag related fields from various lookups, the Volunteer Sign-Up form on the VolunteerJobListingsFS page supports only fields that are on the contact object itself.

EarthCorps’ list looks like this when Dianna is done. 

6. Click Save.

7. To see the new and improved Volunteer Sign-Up form, go to the same URL you used when testing your site. Dianna goes to this URL.

http://earthcorpsvfstrailhead.force.com/GW_Volunteers__VolunteersJobListingFS

8. Click a sign-up link to see the fields added to the form. Dianna sees that Mobile Phone field has been added. 

Troubleshooting Tip: If any fields you added to the field set don’t appear on your sign-up form, they might not be enabled for the Volunteer Sites Guest User Profile. If that’s the case, you see an error message on the top of the page in red indicating which fields to enable. To enable the fields, click Public Access Settings on the Site Detail page. 

Edit the profile to give access to the fields you want to include on the sign-up form. For more information about editing profiles, see the Data Security module (you can find the link in the Resources section).

Other V4S Pages

In addition to the awesome volunteer jobs listing page and sign-up form, V4S includes other handy pages to support your volunteer efforts.

• Generic Volunteer Signup Page—A volunteer can express general interest without signing up for a specific shift.
• Calendar Page—Displays a calendar view of your volunteer jobs.
• Report Hours Page—Volunteers can report their hours worked on a specific job.
• Personal Site Contact Lookup—Volunteers can request a link to their personal site to see all their volunteer information.
• Personal Site Contact Info—Shows a volunteer their contact and volunteer information, their upcoming job shifts, and their volunteer history.

Each page is customizable. For details, see the V4S Installation and Configuration Guide (available on the Volunteers for Salesforce Documentation page listed in the Resources section).

To preview these pages on your site, append the appropriate page name to the end of your site URL.

Dianna wants to see what her events look like on the calendar page, so let’s follow along as she previews that page.

1. From Setup, enter Sites in the Quick Find box, then select Sites.
2. Click the site URL for your site. Dianna clicks http://earthcorpsvfstrailhead.force.com.Her browser’s address bar shows EarthCorps’ site URL.
3. To see the calendar page, she appends /GW_Volunteers__JobCalendar. Dianna’s resulting URL is:http://earthcorpsvfstrailhead.force.com/GW_Volunteers__JobCalendar

This is the calendar view of EarthCorps’ events for October. Good thing they have a slick way to show their volunteers what’s going on and get their volunteer data into Salesforce.

What to Hand Off to Your Web Developer

You’ve done 95% of the work needed to integrate V4S with your website. You’ve created a Salesforce site, configured the necessary permissions and access, tested your site, and customized your sign-up form. What’s left?

Integrating the V4S pages with your website typically involves embedding them with an iframe. Don’t worry if you don’t know what that is—your web developer does. Your web developer needs the URL for the Job Listings page and the URLs for the additional pages you want to include.

Dianna loved the preview of the events calendar she saw, so she’ll give that to EarthCorps’ web developer, too. This is Dianna’s list of URLs.

• http://earthcorpsvfstrailhead.force.com/GW_Volunteers__VolunteersJobListingFS
• http://earthcorpsvfstrailhead.force.com/GW_Volunteers__JobCalendar

She could also give the web developer a sample iframe snippet of HTML:

<iframe src="http://earthcorpsvfstrailhead.force.com/GW_Volunteers__VolunteersJobListingFS"  frameborder="0" scrolling="false" height="600" width="500"></iframe>

And finally, her web developer would appreciate having the V4S Installation and Configuration Guide (available on the Volunteers for Salesforce Documentation page listed in the Resources section).

Now that the website is ready to go, make sure that you have the tools required to communicate with volunteers and report on volunteer participation. You’ll learn more about that in the next module, Volunteer Management.

Resources

• Volunteers for Salesforce Documentation
• Volunteers for Salesforce Chatter group in the Power of Us HUB
• Sites Documentation
• Data Security Trailhead Module