Display Branding Logo in Forms for Actions > Step

Overview

This article explains why the Forms for Actions > Step page does not display the branding logo.

Cause

An out-of-the-box component to add a logo in Forms for Actions is not supported at this time.

Solution

As a workaround, it can be achieved by adding an empty rich text component and checking its CSS selector's unique ID (.af-componentId-rich_text_abc) and use custom CSS to add a background image and some styling to get this working.
.af-componentId-rich_text_abc {
  background: url('...') ...;
}
Below is a detailed example of how to achieve this. The example has minimal CSS changes, so consider updating the CSS as per the use case. 

1. Add a Rich Text box to the Step and add any text to it so it can be identified once rendered on screen. Click on Publish:

1.png

2. Launch the login page to render the corresponding Forms for Actions > Step and find the CSS element-id:
2.png

3. Back to the Forms for Actions, update the Rich Text box to an empty string. Then navigate to the branding style and add a logo for the CSS element ID identified in step 2 (as shown below). Click on Publish:
.af-componentId-rich_text_tvCM {
  background: url('your_log_url');
  width: 152px;
  height: 167px;
}

3.png


4. Launch the login page again to render the corresponding Forms for Actions -> Step and verify that the logo is now displayed with the corresponding CSS:

4.png

 

Recommended content

No recommended content found...