3239772 - Indentation of Dropdown Fields in Landing Pages is Incorrect

When using Content Studio to design a form with labels positioned "On Top" of the input fields, you may notice that the layout looks correct in Test mode, but once embedded into a landing page, the labels for dropdown-type fields appear beside the fields instead.

SAP Marketing Cloud

This typically happens due to CSS overrides or container-level styling applied on the landing page that affects form rendering, especially for certain field types like dropdowns.

The fix will depend on how your form input fields are configured:

• If the "Use Indentation" checkbox is not selected:
  
  Simply enable this checkbox on the form dropdown-type input fields on the Form itself. After that, Go to the Form element on the landing page designer and change the "Label Placement" option according to your needs.

• If the "Use Indentation" checkbox is not selected and your business require this checkbox to stay disabled:
  
  This fix needs to have the class lpeForm added to the landing page using "Custom CSS" in the properties panel. Remember to press enter after adding the class below to the field.
  
  

  .lpeForm .sapCpWidget label {  display: block; }

To correctly add the CSS class to the landing page, do the following steps:

1. Select the most outer element of the landing page.
2. Go to "Custom CSS" text block.
3. Paste the code according to the scenario your form was designed as explained above.
4. Press Enter.
   
   It should look like the screenshot above.
5. After that, select the "Column" element of the form design on the landing page.
6. On the "Custom CSS" option, input the name of the class that you added to the landing page on step 3 and press enter. The name of the class is lpeForm

drop-down, drop down, styling, html , KBA , CEC-MKT-LPC , Content Studio: Landing Pages and Forms , CEC-MKT-CCE , Content Studio: Core Editor , Problem