Start tracking your progress
Trailhead Home
Trailhead Home

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.

Now for the bad news. Field sets are unfortunately not available in Lightning Experience at this time. So that means in order to customize your form, you have to switch to Salesforce Classic. Believe us, we wish we had another solution for you. The good news is, switching to Classic to work with field sets, and then switching back to Lightning, is super quick and easy with the Switcher feature. And, when you switch to Classic, only your own login is affected—other users already in Lightning stay in the Lightning interface.

To switch to Classic, in the Lightning Experience header, click the profile picture and select Switch to Salesforce Classic. Screenshot of Switch to Salesforce Classic button.

1. In Salesforce Classic, from Setup, enter Field Sets in the Quick Find box, then select Field Sets under the Contacts menu.

Note

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. In Setup, enter Objects in the Quick Find box, then click on Objects under the Create menu. In the list of objects, click on Volunteer Hours. You’ll see the VolunteersJobListingFS in the Field Sets section.

2. Next to VolunteersJobListingFS, click Edit.The Job Listing page (where the Volunteer Sign-Up form lives) uses the VolunteersJobListingFS field set.

3. 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. Screenshot of the Field Set page.

Note

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. Screenshot of EarthCorps' Field Set list.

4. Click Save.

5. 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

6. Click a sign-up link to see the fields added to the form. Dianna sees that Mobile Phone field has been added. Screenshot of Volunteer Sign Up form.

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. Screenshot of Public Access Settings button 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).

Once your sign-up form is set the way you want it, you can use the Switcher to switch back to Lightning Experience. Click the name in the upper-right corner, then select Switch to Lightning Experience. Screenshot of Switch to Lightning Experience button.

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.

To See This Page Add This to the Site URL
Generic Volunteer Signup Page /GW_Volunteers__VolunteersSignupFS
Calendar Page /GW_Volunteers__JobCalendar
Report Hours Page /GW_Volunteers__VolunteersReportHours
Personal Site Contact Lookup /GW_Volunteers__PersonalSiteContactLookup
Personal Site Contact Info /GW_Volunteers__PersonalSiteContactInfo

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.
Job calendar

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).

Cartoon Volunteers for Salesforce book with blue spine.

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