Customize Pages and Hand Off Your Website Integration

Learning Objectives

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

• Customize the volunteer sign-up form.
• List other web pages included with Volunteers for Salesforce (V4S).
• Provide your web developer with what they need to integrate with V4S.

Customize Your Sign-Up Form

Now for the finishing touches on your website integration. 

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 maybe you don’t care about Business Phone and want to remove that from the form. Or maybe you have a custom field on the Contact object that tracks something you want to include. 

You can do all of that with Volunteers for Salesforce (V4S).

You can include any Contact or Volunteer Hours object field—standard or custom—on your sign-up form. 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 called VolunteersJobListingFS.

Our fictional nonprofit, No More Homelessness (NMH), occasionally needs to call its volunteers on their mobile phones. Because Mobile Phone is a field on the contact, NMH’s volunteer coordinator, Enoch, and admin, Gorav, know they can add it to the volunteer sign-up form. 

Let’s follow along as Gorav 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 in the left menu.
4. Click VolunteersJobListingFS. The Jobs Listing page, which contains the volunteer sign-up form, uses this field set.
5. The Field Set page is just like the standard Edit Page Layout page. You can add, remove, and reorder fields in the same way. Gorav enters Mobile in the Quick Find box to find the field, then drags the Mobile field to place it just after Home Phone.
   
   When designing your form, only use fields from the Contact or Volunteer Hour objects. While other objects are available, their fields don’t display or allow for data entry using the field set.
6. Click Save.
7. To test the new and improved volunteer sign-up form, go to the same URL you used when testing your site. (Remember, add /GW_Volunteers__VolunteersJobListingFS to the end of your Salesforce Sites URL.)
8. Click a sign-up link to see the fields added to the form. Gorav and Enoch test and see that the Mobile Phone field has been added.
   

One troubleshooting tip: If any fields you add to the field set don’t appear on your sign-up form, they might not be enabled for the Volunteers Site Guest User profile. If that’s the case, you’ll receive an error message on the top of the page indicating which fields to enable. 

To enable the fields: 

1. Click Public Access Settings on the Site Details page.
   
   
2. 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 linked in the Resources section.)

Other V4S Pages

In addition to the Volunteer Jobs Listing page and sign-up form, V4S includes other handy pages to support your volunteer efforts. Check them out.

Each page is customizable. For details, see the V4S documentation linked in the Resources section.

Enoch wants to see what his events look like on the calendar page, so let’s follow along as he previews that page.

1. From Setup, enter Sites in the Quick Find box, then select Sites.
2. Click the Salesforce Sites URL for your site.
3. To see the calendar page, append /GW_Volunteers__JobCalendar to the URL in the browser bar.

This is the calendar view of NMH’s events for the month. 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 to integrate V4S with your website. You’ve created a 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 your pages with an iframe. Don’t worry if you don’t know what an iframe is—your web developer does. Your web developer needs, at the very least, the URL for the pages you want to add to your site.

Enoch loved the preview of the events calendar, so he’ll give that to NMH’s web developer, too.

He could also give the web developer a sample iframe snippet of HTML, using his URL where specified with YOUR URL HERE:

<iframe src="YOUR URL HERE"  frameborder="0" scrolling="false" height="600" width="500"></iframe>

And finally, NMH’s web developer would also appreciate having the V4S documentation.

When the work is done, NMH has a helpful calendar to share with returning and potential volunteers.

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

Resources

• Salesforce Help: Volunteers for Salesforce (V4S) Documentation
• Trailblazer Community Group: Volunteers for Salesforce (V4S) App
• Trailhead: Data Security