Display Branding Logo in Forms for Actions > Step

[auth0.knowledge2]

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 :
   

   

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

   

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;
   }
   

   

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: