---
schema_version: "1"
id: 5bffdff3f4e04467eef2ef34964005154be4f8cb6a9a2279b5cb48bfb0ab6c78
title: Customize the Volunteer Report Hours 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_volunteer_report_hours.md
canonical_url: https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_volunteer_report_hours.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 676bd8cbf4bdbc1d627a19b183336dc3c9010031af3d81ed1c8e978ca0c51670
description: Customize the contents of the Volunteer Report Hours page, and make it look and feel like an integral part of your website.
products:
  - Nonprofit
release: "264"
---
# Customize the Volunteer Report Hours Page

Customize the contents of the Volunteer Report Hours page, and make it look and feel like an integral part of your website.

- **[Customize the Fields in the Volunteer Report Hours Page](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_volunteer_report_hours.htm&release=264.0.0&type=5)**  
    Customize the fields displayed in the Volunteer Report Hours page to make it more usable for volunteers. For example, expose the Comments field so that volunteers can leave feedback on their experience. You can include any standard or custom field on the page, as long as it's from the Volunteer Hours object.
- **[Style the Volunteer Report Hours Page with CSS](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_volunteer_report_hours.htm&release=264.0.0&type=5)**  
    The Volunteer Report Hours page uses a cascading style sheet (CSS). Volunteers for Salesforce provides the VolunteersReportHoursCSS.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 Report Hours Page](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_volunteer_report_hours.htm&release=264.0.0&type=5)**  
    Give your web developer this IFRAME tag so they can insert the Volunteer Report Hours page into your website. Use the appropriate format for HTTP sites or secure HTTPS sites.
- **[Supported URL Parameters for the Volunteer Report Hours Page](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_customize_volunteer_report_hours.htm&release=264.0.0&type=5)**  
    Use one or more of these optional URL parameters in your IFRAME tag to further customize the page for volunteers reporting their hours worked.

## Customize the Fields in the Volunteer Report Hours Page

Customize the fields displayed in the Volunteer Report Hours page to make it more usable for volunteers. For example, expose the Comments field so that volunteers can leave feedback on their experience. You can include any standard or custom field on the page, as long as it's from the Volunteer Hours object.

![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 On this page, V4S displays only a subset of all Job and Shift records. Especially if you have a lot of recurring events, keeping the drop-down lists to a reasonable length makes it easier for volunteers to find the Jobs and Shifts that they worked.

- Volunteer Job displays only active Jobs, under active Campaigns.
- Volunteer Shift displays only the Shifts that are scheduled within a three-month window of last month, this month, and next month.

You may remember that you've already configured field sets for the Volunteers Wizard and other V4S pages. To customize the VolunteersReportHoursFS field set, on the Object Manager tab in Setup, click **Contacts** | **Field Sets**, then click **VolunteersReportHoursFS**. 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.

**Troubleshooting Tip**: If any fields you added to the field set don't appear on your Volunteer Report Hours page, they might not be enabled for the Site Guest User profile. An error message at the top of the page indicates which fields to enable. Go to the Site Detail page and update 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.") 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.

## Style the Volunteer Report Hours Page with CSS

The Volunteer Report Hours page uses a cascading style sheet (CSS). Volunteers for Salesforce provides the VolunteersReportHoursCSS.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 VolunteersReportHoursCSS.css file.

## IFRAME Tag for the Volunteer Report Hours Page

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

Sample IFRAME in HTTP format:

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

Sample IFRAME in HTTPS format:

```html
<iframe src="https://mydomain.secure.force.com/yoursitelabel
    /GW_Volunteers__VolunteersReportHours" 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.
- There are two underscore characters between `Volunteers` and `VolunteersReportHours`.
- 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 the Volunteer Report Hours Page

Use one or more of these optional URL parameters in your IFRAME tag to further customize the page for volunteers reporting their hours worked.

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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
          <colgroup>
            <col style="width:20%">
            <col style="width:20%">
            <col style="width:60%">
          </colgroup>
          <thead class="slds-text-title_caps ">
            <tr class="">
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d5275e248">Name</th>
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d5275e250">Value</th>
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d5275e252">Description</th>
            </tr>
          </thead>
          <tbody>
            <tr class="">
              <td data-label="Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d5275e248 ">DateFormat</td>
              <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d5275e250 ">EEEE m/d/yyyy (default)</td>
              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d5275e252 ">
                <p>String format that tells <span id="v4s_setup_report_hours_url_params__guid-620339a2-0192-438d-9d16-aca2f93e0404"><a name="v4s_setup_report_hours_url_params__guid-620339a2-0192-438d-9d16-aca2f93e0404"><!-- --></a>V4S</span> 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.</p>
                <p>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).</p>
                <ul>
                  <li>MM—Include a leading zero for the first nine months of the year, such as 01, 08.</li>
                  <li>M—Display the first nine months of the year without a leading zero, such as 1, 8.</li>
                  <li>dd—Include a leading zero for the first nine days of the month, such as 02, 09.</li>
                  <li>d—Display the first nine days of the month without a leading zero, such as 2, 9.</li>
                  <li>yyyy—Display a four-digit year, such as 2017.</li>
                  <li>yy—Display a two-digit year, such as 17.</li>
                  <li>EEEE—Display the day as text, such as Thursday.</li>
                </ul>
              </td>
            </tr>
            <tr class="">
              <td data-label="Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d5275e248 ">Language</td>
              <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d5275e250 ">en (default)</td>
              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d5275e252 ">
                <p>Display the labels that have been translated in <span id="v4s_setup_report_hours_url_params__guid-8cace8a7-17af-4f2a-b3d5-d78df033a6be"><a name="v4s_setup_report_hours_url_params__guid-8cace8a7-17af-4f2a-b3d5-d78df033a6be"><!-- --></a>Salesforce</span> 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 <a href="https://help.salesforce.com/articleview?id=faq_getstart_what_languages_does.htm" target="_blank">Supported Languages</a> in the Salesforce Help.)</p>
                <p>Volunteers for Salesforce supports these languages out of the box:
                </p><a name="v4s_setup_report_hours_url_params__supported_languages_list"><!-- --></a>
                <ul id="v4s_setup_report_hours_url_params__supported_languages_list">
                  <li>Dutch (nl_NL)</li>

                  <li>English (en)</li>

                  <li>French (fr)</li>

                  <li>German (de)</li>


                  <li>Japanese (ja)</li>

                  <li>Spanish (es)</li>

                </ul>
                <p>You can create your own translations in other languages. See <a href="https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_translate.htm&amp;release=264.0.0&amp;type=5" title="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.">Translate Volunteers for Salesforce into Other Languages or Customize
                    Terminology</a>.</p>
                <p style="margin-bottom:0;">The specified language overrides the language that users have set in
                  their <span id="v4s_setup_report_hours_url_params__guid-3bd300e1-205c-48c3-b0e9-5473484d2aba"><a name="v4s_setup_report_hours_url_params__guid-3bd300e1-205c-48c3-b0e9-5473484d2aba"><!-- --></a>Salesforce</span> personal settings.</p>
              </td>
            </tr>
            <tr class="">
              <td data-label="Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d5275e248 ">TimeFormat</td>
              <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d5275e250 ">h:mm tt (default)</td>
              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d5275e252 ">
                <p>String format that tells <span id="v4s_setup_report_hours_url_params__guid-1200f2e6-3bfe-4279-969c-80d5dcd65829"><a name="v4s_setup_report_hours_url_params__guid-1200f2e6-3bfe-4279-969c-80d5dcd65829"><!-- --></a>V4S</span> 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.</p>
                <p>You can specify a different string
                  format by arranging these supported sets of characters with standard punctuation for time
                  formatting.</p>
                <ul>
                  <li>hh—Use 12-hour time and include a leading zero for the first nine hours of the day, such
                    as 01, 08.</li>
                  <li>M—Use 12-hour time and display the first nine hours of the day without a leading zero,
                    such as 1, 8.</li>
                  <li>HH—Use 24-hour time and include a leading zero for the first nine hours of the day, such
                    as 02, 09.</li>
                  <li>H—Use 24-hour time and display the first nine hours of the day without a leading zero,
                    such as 2, 9.</li>
                  <li>mm—Display minutes with a leading zero for the first nine minutes of the hour, such as
                    03, 06.</li>
                  <li>m—Display minutes without a leading zero for the first nine minutes of the hour, such as
                    3, 6.</li>
                  <li>tt—Display the time period as am or pm.</li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>