--- schema_version: "1" id: e67222e8f2cee4a82e91ee0e8ad0c8f1d59bdd859a2313dada570d7a598a03c5 title: Customize the Volunteer Job Listing Page collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/sfdo/264-0-0/v4s_setup_customize_job_listings.md canonical_url: https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 897bad6b3ea49bef16341ac8941e25de7632ace91a8078b3ac047e4863240434 description: Customize the contents of the Volunteer Job Listing page, and make it look and feel like an integral part of your website. products: - Nonprofit release: "264" --- # Customize the Volunteer Job Listing Page Customize the contents of the Volunteer Job Listing page, and make it look and feel like an integral part of your website. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/images/icon_note.png) Note If your org has 1,000 or more volunteer jobs—marked as **Display on Website**—from active Campaigns, the Volunteer Jobs page will not render properly and won't include the appropriate shifts for sign up. - **[Choose Between Two Versions of the Volunteer Job Listing Page](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5)** 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)](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5)** The Job Listing page includes a signup form for volunteers to register for a specific Job or Shift. - **[Show Job Location on a Map](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5)** 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. - **[Link Volunteers to an External Signup Website](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5)** 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. - **[Style the Volunteer Job Listing Page with CSS](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5)** 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. - **[IFRAME Tag for the Volunteer Job Listing Page](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5)** 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. - **[Supported URL Parameters for Both Volunteer Job Listing Pages](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5)** 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. - **[Additional Supported URL Parameters for the VolunteersJobListingFS Page](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5)** 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. ## 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. | Form Name | Fields Customization | Can Style with CSS? | | --- | --- | --- | | GW\_Volunteers\_\_VolunteersJobListingFS (recommended) | Yes, using the VolunteersJobListingFS | Yes | | GW\_Volunteers\_\_VolunteersJobListing | No | Yes | ## 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](https://help.salesforce.com/s/articleView?id=sfdo.v4s_config_fields.htm&release=264.0.0&type=5 "Customize and configure fields in Volunteers for Salesforce to fit the needs of your organization.") for instructions on how to customize field sets. ![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/images/icon_tip.png) 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. ![Field error on web page](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/volunteers_for_salesforce/images/missing_field_access_error.png) 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](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_website_config_perms.htm&release=264.0.0&type=5 "The last step in configuring data access is making sure your Site's public access settings give permission to read, create, and edit the dozen or so objects that Volunteers for Salesforce needs to do its job."), 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. ![Volunteer Sign Up form on the Job Listings page](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/volunteers_for_salesforce/images/pages_shift_signup.png) ## 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](https://developers.google.com/maps/documentation/embed/guide). 1. Get a [Google API key](https://developers.google.com/maps/documentation/embed/get-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. ```html .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. ![External sign up link on website job listing](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/volunteers_for_salesforce/images/external_signup_link_on_website.png) 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/images/icon_note.png) 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](https://help.salesforce.com/articleview?id=fields_activating_field_validation_rules.htm&type=5). But, we recommend that you create your own validation rule to make sure the field is secure. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/images/icon_note.png) 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. ![Enternal Signup URL on the Job](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/volunteers_for_salesforce/images/job_external_signup_url.png) ![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/images/icon_tip.png) 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](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_translate.htm&release=264.0.0&type=5 "To help Volunteers for Salesforce speak the language of your volunteer program, you can replace the existing onscreen text (labels) with alternate text that uses your organization's terminology. Or you can translate all terms in the app into another language."). 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](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_volunteer_signup.htm&release=264.0.0&type=5 "Customize the contents of the Volunteer Signup page, and make it look and feel like an integral part of your website."), making sure that you edit the VolunteersJobListingCSS.css file. Here's how the page looks with minimal styling. ![Job Listings page with minimal styling](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sfdo-volunteers_for_salesforce-264-0-0-production-enus/1854165a-1e96-498b-9cfb-c6516fed9d92/volunteers_for_salesforce/images/pages_job_listings.png) ## 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. ```html ``` Sample IFRAME in HTTPS format: ```html ``` 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. Here's an example VolunteersJobListingFS IFRAME tag with two parameters (ShowSkills and JobID) in the last part of the URL. ```html ```
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
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](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_job_listings.htm&release=264.0.0&type=5 "Customize the contents of the Volunteer Job Listing page, and make it look and feel like an integral part of your website.").
Name Value Description
DateFormat EEEE m/d/yyyy (default)

String format that tells V4S how to display Shift dates. The default string displays the day as text, followed by the month, date, and year. For example: Thursday 4/6/2017.

You can specify a different string format by arranging these supported character sets with standard punctuation for date formatting (forward slashes, hyphens, commas, and so on).

  • MM—Include a leading zero for the first nine months of the year, such as 01, 08.
  • M—Display the first nine months of the year without a leading zero, such as 1, 8.
  • dd—Include a leading zero for the first nine days of the month, such as 02, 09.
  • d—Display the first nine days of the month without a leading zero, such as 2, 9.
  • yyyy—Display a four-digit year, such as 2017.
  • yy—Display a two-digit year, such as 17.
  • EEEE—Display the day as text, such as Thursday.
dtMonthFilter Today's current month in the format yyyy-mm-dd (default) The initial month to show data for. For example, to show all shifts for March 2017, dtMonthFilter=2017-03-01.
Language en (default)

Display the labels that have been translated in Salesforce into a different language. Identify the language using a two-character language code, such as en, or a five-character locale code, such as en_AU. (See Supported Languages in the Salesforce Help.)

V4S supports these languages out of the box:

  • Dutch (nl_NL)
  • English (en)
  • French (fr)
  • German (de)
  • Japanese (ja)
  • Spanish (es)

You can create your own translations in other languages. See Translate Volunteers for Salesforce into Other Languages or Customize Terminology.

The specified language overrides the language that users have set in their Salesforce personal settings.
nDaysToShow 0 (default) Number of days' worth of Shifts to show per Job. Set to 1 to show a specific day's Shifts. When set to 0, we ignore this parameter. When set to anything other than 0, this value overrides nMonthsToShow.
nMonthsToShow 3 (default) Number of months' worth of Shifts to show per Job. (You don't want huge lists of Shifts for Recurring Jobs taking up too much screen real estate.)
ShowLocationMap

0 (hide)

1 (show; default)

 Show a map of the Job's location. Requires that you complete the setup steps to show Job location on a map.
ShowNumberAvailable

0 (hide; default)

1 (show)

 Show the number of volunteers confirmed and the number still available for each Shift.
TimeFormat h:mm tt (default)

String format that tells V4S how to display Shift times. The default string displays the time of day as hour and minutes with a.m. or p.m. For example: 9:30 am.

You can specify a different string format by arranging these supported sets of characters with standard punctuation for time formatting.

  • hh—Use 12-hour time and include a leading zero for the first nine hours of the day, such as 01, 08.
  • M—Use 12-hour time and display the first nine hours of the day without a leading zero, such as 1, 8.
  • HH—Use 24-hour time and include a leading zero for the first nine hours of the day, such as 02, 09.
  • H—Use 24-hour time and display the first nine hours of the day without a leading zero, such as 2, 9.
  • mm—Display minutes with a leading zero for the first nine minutes of the hour, such as 03, 06.
  • m—Display minutes without a leading zero for the first nine minutes of the hour, such as 3, 6.
  • tt—Display the time period as am or pm.
volunteerShiftId

Shift's 15-character Salesforce ID (show a single Shift)

null (default)

Display only the specified Shift. Always specify the JobID parameter along with volunteerShiftId. For example: JobID=a0T41000003jEKcEAM&volunteerShiftId=.

If Shifts recur and nMonthsToShow is set to 0, show only a single Shift. If nMonthsToShow is set to 1, show the Shifts for the month.

Otherwise, leave blank to display all upcoming Shifts for the number of months' specified in nMonthsToShow.