Changing the logo

By default, the logo is displayed in the top left of each form page. You can change the company logo displayed on your forms pages by uploading a new logo image and updating the CSS styles for your form.

You can use a logo image that is saved a static resource within your organization, or upload an image to public web space.

Tip

For best results, use an image in PNG format, no more than 100 pixels in height.

Using a static resource

You can replace the existing form logo in your organization's static resources, or upload a new one.

Note

Uploading static resources must be performed by a user with administrator privileges.

To replace an existing static resource:

  1. Go to Setup and search for Static Resources.

  2. To replace the existing logo, find the logo in the list (for example, FormLogo) item in the list and select Edit.

  3. Select Choose file, and select your new form logo image.

  4. Ensure that Cache Control is set to "Public".

  5. Select Save.

To upload a new static resource:

  1. Go to Setup and search for Static Resources.

  2. Select New above the list.

  3. Give the resource a Name and optional Description.

  4. Select Choose file, and select your new form logo image.

  5. Set Cache Control to "Public".

  6. Select Save.

Update the CSS

If you have added a new logo, or you want to reference an image hosted on a public web server, you must update the CSS for your form to reference the new logo image.

For more information about changing the CSS for your form, see Using CSS in your form.

In your CSS file, find the class .formTitle. This has a background-image attribute:

Copy

.formTitle CSS class

.formTitle {
    height: 100%;
    width: 100%;
    text-align: right;
    display: table-cell;
    vertical-align: right;
    font-size: 100%;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    background-image: url('/resource/FormLogo');
    background-repeat: no-repeat;
    background-position: 0px 0px;
   }

Change the referenced URL to use a different static resource, or use a fully qualified URL (including the http://) to reference an external resource.

Tip

  • If the form has previously been tested before the logo was changed, make sure you clear your cache to see the updated logo.

  • If you use a relative link to a static resource for the logo, such as url('/resource/FormLogo') in the example CSS class, note that the expected URL is different for forms hosted on Salesforce Sites and for forms deployed to WX. Forms on sites require the site suffix in the relative path, for example url('/forms/resource/FormLogo'), whereas WX expects url('/resource/FormLogo'). If you want the form logo to display correctly in WX and on a Site, use a fully qualified URL for the logo image in the CSS, for example url('https://fs-XXXX--c.vf.force.com/resource/1732098978000/FormLogo'). To get the fully qualified URL for a static resource in your org, view the static resource and copy the URL from the browser address bar.