Symptom
You designed the form on Content Studio app with the labels on top of the input fields and added this form to a landing page. When you check the form using Test mode the layout is showing up as expected but when the form is added to the landing page, the labels of the dropdown-type input fields are placed on the side instead of the top. Changing the Label Placement option to "On Top" also doesn't fix the design.
Environment
SAP Marketing Cloud
Cause
This behaviour is caused by a conflict between the Landing Page Editor CSS and Form Editor CSS.
Resolution
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:
- Select the most outer element of the landing page.
- Go to "Custom CSS" text block.
- Paste the code according to the scenario your form was designed as explained above.
- Press Enter.
It should look like the screenshot above. - After that, select the "Column" element of the form design on the landing page.
- 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
Keywords
drop-down, drop down, styling, html , KBA , CEC-MKT-LPC , Content Studio: Landing Pages and Forms , CEC-MKT-CCE , Content Studio: Core Editor , Problem