Customize the Volunteer Signup Page

Choose Between Two Versions of the Volunteer Signup Page

Volunteers for Salesforce offers two versions of the Volunteer Signup page, with the recommendation to use the newer, customizable one that creates Contacts (not Leads) from new general interest signups. The VolunteersSignupFS page is more flexible and simplifies your business process—skipping the step of converting a Lead to a Contact. If you're required to use Leads instead, we offer a couple of options.

Note What if you require signups to be created as Leads, but want to be able to customize which fields are displayed on the form? Consider using Salesforce's Web-to-Lead form instead of one of the V4S signup forms. Web-to-Lead generates a lead capture form for you (in HTML), which you can then provide to your web developer to add to your website. Learn more about Web-to-Lead in the Salesforce Help.

Customize Volunteer Signup Fields (VolunteersSignupFS only)

Customize the fields displayed in the Volunteer Signup page to capture the volunteer information you care about. For example, replace Business Phone with Mobile Phone, or make a minimalist signup form that asks for name and email only. If you use the GW_Volunteers__VolunteersSignupFS page (not GW_Volunteers__VolunteersSignup), you can customize the page to include any standard or custom field from the Contact object.

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

Troubleshooting Tip: If any fields you added to the field set don't appear on your signup form, 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 for the Site Guest User profile. You previously configured the Public Access Settings, but if custom fields were added since that update, you may need to update the Public Access Settings again.

Specify Field Mappings for Converting Leads to Contacts

If you use a signup page that creates Leads from signups, then the Lead record gets converted to a Contact record some time later in the volunteer's lifecycle. Salesforce calls this process lead conversion. Let's define a simple one-to-one mapping of the volunteer fields to make sure information is copied cleanly from the Lead to the Contact.

1. In Setup, click the Object Manager tab.
2. From the list of objects, select Lead.
3. Click Fields & Relationships.
4. Click Map Lead Fields.
   
5. Click the Contact tab.
6. Specify values for these Contact fields to match the corresponding field from the Lead record.
   • Volunteer Availability
   • Volunteer Notes
   • Volunteer Skills
   • Volunteer Status
   
7. Save your changes.

Style the Volunteer Signup Form with CSS

The Volunteer Signup form page uses a cascading style sheet (CSS). Volunteers for Salesforce provides the VolunteersSignupCss.css file as a Document in Salesforce. Customize the CSS file 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.

1. If you're working in Lightning Experience, switch to Salesforce Classic so you can access Documents.
2. Go to the Documents tab. (If you don't see the Documents tab, click the + icon at the end of the tab bar, then click Documents in the list of All Tabs.)
3. Select the Volunteers Documents folder.
   
4. Next to VolunteersSignupCSS.css, click View.
   
5. Copy the CSS into your favorite text editor. Note that the file includes a commented-out "ugly" version of CSS—a high contrast version that's hard on the eyes but an easy way to see which parts of the signup page you can style.
   

   Here is an example of what the basic sample CSS looks like on a website.

   
6. Work with your web developer to update this CSS as needed, and then save it to your local computer as VolunteersSignupCss.css.
7. Back on the Documents tab, upload your file.
   1. Select the Volunteers Documents folder.
   2. Click VolunteersSignupCSS.css.
   3. Click Replace Document.
      
   4. Browse for your local copy of VolunteersSignupCss.css, and then click Replace Document.
8. Verify the new styles in the Volunteer Sign-Up form by refreshing the page at the same URL you used when testing your site.
   

   Tip If the styling is unchanged, try clearing your browser's cache and refreshing again, or open the page in a private browsing window

Upgraders: If you're upgrading from an earlier version, newer versions of Volunteers for Salesforce sometimes offer updated CSS files (check the release notes). However, your existing CSS files in Documents are not overwritten during the upgrade process. Get the latest version of the CSS files from the Volunteers for Salesforce source code in GitHub, and manually update yours to match the latest.

IFRAME Tag for the Volunteer Signup Page

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

Sample IFRAME in HTTP format:

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

Sample IFRAME in HTTPS format:

<iframe src="https://mydomain.secure.force.com/yoursitelabel
    /GW_Volunteers__VolunteersSignupFS" 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 VolunteersSignup page instead of VolunteersSignupFS? Specify the right one.
• There are two underscore characters between Volunteers and VolunteersSignupFS.