---
schema_version: "1"
id: 55635feaa8820cec7e9894440a747728d12ce8b57475812ec3432a041ab5a3f0
title: Customize the Volunteers Personal Site Contact Information Page
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/sfdo/264-0-0/v4s_setup_cust_vols_pers_site_contact_info_pg.md
canonical_url: https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_cust_vols_pers_site_contact_info_pg.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: d6b5fd99b568ef8b1d7fbd176251fea435587f9551fc45f3ad424e26cc2bc4ef
description: Learn how to configure fields, URL parameters, and formatting on the Personal Site Information page.
products:
  - Nonprofit
release: "264"
---
# Customize the Volunteers Personal Site Contact Information Page

Learn how to configure fields, URL parameters, and formatting on the Personal Site Information page.

- **[Customize the Fields on the Personal Site Contact Information Page](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_cust_vols_pers_site_contact_info_pg.htm&release=264.0.0&type=5)**  
    The four panels on the Personal Site Information page are controlled by a field set for each panel. Edit these field sets to display your desired combination of standard and custom fields.
- **[Supported URL Parameters for the Personal Site Contact Info Page](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_cust_vols_pers_site_contact_info_pg.htm&release=264.0.0&type=5)**  
    Use the optional URL parameters in your IFRAME tag to further customize individual volunteers' Personal Site pages.
- **[Style the Personal Site Contact Lookup Page with CSS](https://help.salesforce.com/s/articleView?id=sfdo.v4s_setup_cust_vols_pers_site_contact_info_pg.htm&release=264.0.0&type=5)**  
    The Personal Site Contact Lookup page uses a cascading style sheet (CSS). Volunteers for Salesforce provides the VolunteersPersonalSiteCSS.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.

## Customize the Fields on the Personal Site Contact Information Page

The four panels on the Personal Site Information page are controlled by a field set for each panel. Edit these field sets to display your desired combination of standard and custom fields.

![Personal Site website page with callouts](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_personal_site_with_callouts.png)

  
| Field Set Name | Object | Description |
| --- | --- | --- |
| PersonalSiteContactInfoHistory (1) | Volunteer Hours | Controls the fields in Your Recent Volunteer History list. |
| PersonalSiteContactInfoUpcomingShifts (2) | Volunteer Hours | Controls the fields in the Scheduled Volunteer Shifts list. |
| PersonalSiteContactInfoPanel1FS (3) | Contact | Controls the fields in the volunteer's personal information panel in the top left of the page. |
| PersonalSiteContactInfoPanel2FS (4) | Contact | Controls the fields in the volunteer's personal statistics panel. |

## Supported URL Parameters for the Personal Site Contact Info Page

Use the optional URL parameters in your IFRAME tag to further customize individual volunteers' Personal Site pages.

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="d8544e217">Name</th>
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d8544e220">Value</th>
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d8544e223">Description</th>
            </tr>
          </thead>
          <tbody>
            <tr class="">
              <td data-label="Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e217 ">ChartDateFormat</td>

              <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e220 ">MMM yyyy (default)</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e223 ">
                <p>String format that tells <span id="v4s_setup_personal_site_contact_info_url_params__guid-620339a2-0192-438d-9d16-aca2f93e0404"><a name="v4s_setup_personal_site_contact_info_url_params__guid-620339a2-0192-438d-9d16-aca2f93e0404"><!-- --></a>V4S</span> how to display dates on the X axis of the
                  personal Volunteer Hours chart. The default string displays the
                  month as a three-letter abbreviation followed by a four-digit year.
                  For example: Apr 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>MMM—Display the month as a three-letter
                    abbreviation, such as Apr (English only).</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="d8544e217 ">ContactId (required parameter)</td>

              <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e220 ">Contact's 15-character <span id="v4s_setup_personal_site_contact_info_url_params__guid-8cace8a7-17af-4f2a-b3d5-d78df033a6be"><a name="v4s_setup_personal_site_contact_info_url_params__guid-8cace8a7-17af-4f2a-b3d5-d78df033a6be"><!-- --></a>Salesforce</span> ID</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e223 ">ID of the Contact whose page is being
                displayed</td>

            </tr>
            <tr class="">
              <td data-label="Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e217 ">DateFormat</td>

              <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e220 ">E m/d/yy (default)</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e223 ">
                <p>String format that tells <span id="v4s_setup_personal_site_contact_info_url_params__guid-9269c9bb-2ca1-49d1-81cc-729b3c71098b"><a name="v4s_setup_personal_site_contact_info_url_params__guid-9269c9bb-2ca1-49d1-81cc-729b3c71098b"><!-- --></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: Thu 4/16/17.</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>

                  <li>E—Display the day as a three-letter
                    abbreviation, such as Thu (English only).</li>

                </ul>
              </td>

            </tr>
            <tr class="">
              <td data-label="Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e217 ">Email</td>

              <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e220 ">Contact's email address</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e223 ">
                <p>Email address that matches one of the Contact's
                  email addresses of record.</p>
                <p style="margin-bottom:0;">If you specify this parameter, the Personal Site
                  Requires URL Email Match custom setting must be enabled.</p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e217 ">Language</td>

              <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e220 ">en (default)</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e223 ">
                <p>Display the labels that have been translated in
                  <span id="v4s_setup_personal_site_contact_info_url_params__guid-04dd2d70-726e-46d7-8775-491b811d501e"><a name="v4s_setup_personal_site_contact_info_url_params__guid-04dd2d70-726e-46d7-8775-491b811d501e"><!-- --></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>
                  <span id="v4s_setup_personal_site_contact_info_url_params__guid-0f1262c5-f7bb-41b4-9206-c612b2c3efe4"><a name="v4s_setup_personal_site_contact_info_url_params__guid-0f1262c5-f7bb-41b4-9206-c612b2c3efe4"><!-- --></a>V4S</span> supports these languages out of the
                  box:
                </p><a name="v4s_setup_personal_site_contact_info_url_params__supported_languages_list"><!-- --></a>
                <ul id="v4s_setup_personal_site_contact_info_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_personal_site_contact_info_url_params__guid-5551377f-0998-400b-96d3-8f3faa7f14c8"><a name="v4s_setup_personal_site_contact_info_url_params__guid-5551377f-0998-400b-96d3-8f3faa7f14c8"><!-- --></a>Salesforce</span> personal settings.</p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e217 ">TimeFormat</td>

              <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e220 ">h:mm tt (default)</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d8544e223 ">
                <p>String format that tells <span id="v4s_setup_personal_site_contact_info_url_params__guid-fc077472-cb29-4d5e-9f35-d728a39464cd"><a name="v4s_setup_personal_site_contact_info_url_params__guid-fc077472-cb29-4d5e-9f35-d728a39464cd"><!-- --></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>

## Style the Personal Site Contact Lookup Page with CSS

The Personal Site Contact Lookup page uses a cascading style sheet (CSS). Volunteers for Salesforce provides the VolunteersPersonalSiteCSS.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 VolunteersPersonalSiteCSS.css file. You can use CSS to style the font and the size of the form (.cssContactLookupPanel).

You can change the text of the title and body of the form by [editing these custom labels](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."):

- labelContactInfoLookupTitle
- labelContactLookupInstructions