Customize the Volunteer Job Listing Page

Choose Between Two Versions of the Volunteer Job Listing Page

Volunteers for Salesforce offers two versions of the job listing page. Decide which one works best for your setup.

Customize Job Listing Fields (VolunteersJobListingFS Only)

The Job Listing page includes a signup form for volunteers to register for a specific Job or Shift.

It always requires First Name, Last Name, and Email, because these fields are used for matching volunteers to existing Contacts. The Number of Volunteers field is also required.

If you use the GW_Volunteers__VolunteersJobListingFS page (not GW_Volunteers__VolunteersJobListing), you can customize the popup signup form to include any standard or custom field from the Contact object or the Volunteer Hours object.

You may remember that you've already configured field sets for the Volunteers Wizard and other V4S pages. On the Object Manager tab in Setup, go to Contacts | Field Sets and click VolunteersJobListingFS. Refer to Configure Fields in Volunteers for Salesforce for instructions on how to customize field sets.

Tip If any fields you added to the field set don't appear on your Job Listing sign-up form, they might not be enabled for the Site Guest User profile. An error message at the top of the Job Listing page indicates which fields to enable.

Go to the Site Detail page and update the Public Access Settings for the Site Guest User profile. You previously configured the Public Access Settings, but if you or another admin have added custom fields since that update, they may need to be updated again.

Here's how the page might look with some customizations.

Show Job Location on a Map

Make it even easier for your volunteers to commit to a Job by showing its location on a map. This feature relies on the Google Maps Embed API and the information in the location address fields on Volunteer Job records.

For details about working with the Google Maps APIs, see the maps documentation in the Google Developer Guide.

1. Get a Google API key.
2. Store the Google API Key in V4S Custom Settings.
   1. From Setup, enter Custom Settings in the Quick Find box, then select Custom Settings.
   2. Next to Volunteers Settings, click Manage.
   3. Click Edit, then in the Google Maps API Key field, paste your API key.
   4. Save your changes.
3. Verify that your copy of VolunteersJobListingCSS.css includes a CSS class for the Google Map IFRAME. Edit this markup as needed.

   .cssGoogleMapIFrame {
       height: 300px;
       width: 400px;
       border: 0;
   }

Now, when you display the VolunteersJobListingFS page with the ShowLocationMap URL parameter set to 1, and the Job has location address fields filled out, the map is displayed.

Link Volunteers to an External Signup Website

If you have a separate system for managing Job signups, Volunteers for Salesforce can show a signup link that directs the interested volunteer to an external registration site.

Create external signup links on a per-Job basis. Specify a URL in the External Signup Url field for the Job record. It must start with http, https, or mailto. That's all it takes to display a link.

Note The validation rule, ValidateExternalSignupUrl, ensures that the External Signup Url value begins with http, https, or mailto. If this causes problems in your org, you can deactivate the validation rule. But, we recommend that you create your own validation rule to make sure the field is secure.

Note If you don't see the External Signup Url field on the Job record, your Admin may need to add it to the Volunteer Job page layout and enable field permissions for the appropriate profiles.

Tip If the Volunteer Job's External Signup Url field has a value, but the link on the Job Listing page is still displaying the default internal signup link, verify that the Site Guest User profile has read access to the External Signup Url field on Volunteer Job.

To change the link text to show something other than "external site," edit the custom label, labelExternalSignUpUrl. See Translate Volunteers for Salesforce into Other Languages or Customize Terminology.

To style the link or the listing detail differently, edit these CSS classes in the VolunteerJobListingCSS file:

• externalJobLink
• externalJob

Style the Volunteer Job Listing Page with CSS

The Volunteer Job Listing page uses a cascading style sheet (CSS). Volunteers for Salesforce provides the VolunteersJobListingCSS.css file as a Document in Salesforce. Customize the CSS with your own CSS styles so that the Volunteers for Salesforce part of the webpage matches the rest of your website's look and feel.

Follow the instructions provided for styling the Volunteer Signup page, making sure that you edit the VolunteersJobListingCSS.css file.

Here's how the page looks with minimal styling.

IFRAME Tag for the Volunteer Job Listing Page

Give your web developer this IFRAME tag so they can insert the Volunteer Job Listing page into your website. Use the appropriate format for HTTP sites or secure HTTPS sites.

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

Sample IFRAME in HTTPS format:

<iframe src="https://mydomain.secure.force.com/yoursitelabel
    /GW_Volunteers__VolunteersJobListingFS" frameborder="0" 
    scrolling="false" height="600" width="500"></iframe>

A few reminders to keep your code snippet clean:

• mydomain is a placeholder value for your domain name. Be sure to include your actual domain name in place of the placeholder text.
• yoursitelabel is a placeholder value for the Default Web Address. Include it only if you specified one when you created your Site.
• Are you using the VolunteersJobListing page instead of VolunteersJobListingFS? Specify the right one.
• There are two underscore characters between Volunteers and VolunteersJobListingFS.
• If you're using one or more URL parameters, add them to the end of the URL. Separate the first parameter from the rest of the URL with a ? character. Separate multiple parameters with the & character.

Supported URL Parameters for Both Volunteer Job Listing Pages

Use one or more of these optional URL parameters in your IFRAME tag to further customize how Jobs and Shifts are displayed in the job listing, regardless of whether you're using VolunteersJobListing or VolunteersJobListingFS.

Add parameter names and values to the end of the URL in your IFRAME tag. Remember to:

• Use a ? character to separate the first parameter from the rest of the URL.
• Use an & character to separate each parameter.

<iframe src="http://mydomain.force.com/yoursitelabel
    /GW_Volunteers__VolunteersJobListingFS?ShowSkills=0&JobID=a0T41000003jEKcEAM" 
    frameborder="0" scrolling="false" height="600" width="500"></iframe>

Name	Value	Description
CampaignId	Campaign's 15-character Salesforce ID (show a single Campaign) null (default)	Display only the Jobs from the specified Campaign. For example: CampaignID=701410000006Qx1AAE. Otherwise, leave blank to display all active Campaigns.
JobID	Job's 15-character Salesforce ID (show a single Job) null (default)	Display only the specified Job. For example: JobID=a0T41000003jEKcEAM. Otherwise, leave blank to display all active Jobs. Note Not supported on the Job Calendar Page.
ShowCampaignHierarchy	0 (hide; default) 1 (show)	If CampaignId is specified, also show all active Campaigns that are its children.
ShowDescription	0 (hide) 1 (show; default)	Show the Job's description.
ShowJobName	0 (hide) 1 (show; default)	Show the Job's name.
ShowLocationAddress	0 (hide) 1 (show; default)	Show the Job's address.
ShowLocationInfo	0 (hide) 1 (show; default)	Show location details from the Job's Location Information field.
ShowSkills	0 (hide; default) 1 (show)	Show the job's desired skills in a semicolon-separated list.

Additional Supported URL Parameters for the VolunteersJobListingFS Page

If you're using VolunteersJobListingFS, use one or more of these optional URL parameters in your IFRAME tag to further customize how Jobs and Shifts are displayed in the job listing.

For details about adding URL parameters to an IFRAME tag, see Customize the Volunteer Job Listing Page.