Dynamics Community Forum Thread Details

Marketing form: how to style checkbox align with label

Hello Carolin,

You're right, the default alignment of the checkbox and label in Dynamics 365 Marketing forms (as seen in the "Sign in to the application" template) can look a bit off. Centering the label next to the checkbox requires some CSS adjustments.

Here's how you can achieve centered alignment using CSS within the form's HTML tab:

1. Access the Form's HTML Tab:

Open your Marketing Form in the Dynamics 365 Customer Insights - Journeys (formerly Marketing) form designer.
Switch to the HTML tab.

2. Locate the Checkbox and Label:

Look for the HTML code that represents the checkbox and its label. It will typically look something like this:

<div class="field rememberme">

<input type="checkbox" id="rememberme" name="rememberme" value="yes">
<label for="rememberme">Remember Me</label>

</div>

3. Add CSS for Centered Alignment:

You'll need to add some inline CSS to the label element to vertically center it.
You can also adjust the div.field element to help with the overall layout.

Here's the modified HTML with the CSS:

<div class="field rememberme" style="display: flex; align-items: center;">
<input type="checkbox" id="rememberme" name="rememberme" value="yes">
<label for="rememberme" style="margin-left: 5px; vertical-align: middle;">Remember Me</label>
</div>

Explanation of the CSS:

display: flex; align-items: center; (on the div.field):
- display: flex; makes the div a flex container, allowing for flexible layout of its children (the checkbox and label).
- align-items: center; vertically aligns the items within the flex container to the center.

margin-left: 5px; (on the label):
- Adds a small margin to the left of the label to create some spacing between the checkbox and the text. Adjust the value as needed.

vertical-align: middle; (on the label):
- While vertical-align is more commonly used for inline elements, it can also help with vertical alignment in some layout contexts.

4. Save and Preview:

Save your changes to the form.
Preview the form to see the centered alignment.

Important Notes:

Adjust Values: You might need to adjust the margin-left value or other CSS properties to achieve the exact look you want.
Responsive Design: If you need to ensure the alignment works well on different screen sizes, you might need to add media queries or use more advanced CSS techniques.
Theme Styling: If you have a custom theme applied to your Marketing forms, be aware that theme styles might override your inline CSS. You might need to adjust your theme's CSS or use !important in your inline styles (use with caution).
Testing: Thoroughly test the form on different browsers and devices to ensure consistent alignment.

By adding this CSS to your form, you should be able to achieve the desired centered alignment of the checkbox label. Remember to adjust the values and styles to fit your specific design requirements.

If my answer was helpful, please click Like, and if it solved your problem, please mark it as verified to help other community members find more. If you have further questions, please feel free to contact me.

My response was crafted with AI assistance and tailored to provide detailed and actionable guidance for your Microsoft Dynamics 365 query.

Regards,

Daivat Vartak

Quick Links