By default, Consent Fields support only plain text and basic links with the <a href=""> tag; they do not support full HTML or CSS. If you need greater control over styling, layout, or conditional display, you’ll need to implement custom logic directly in the Consent Components template.
To do this, hide the default label using ng-hide and insert a custom label with your own formatting and styles. For example:
<div class="consents">
<div ng-repeat="consent in consents | orderBy:'sortOrder' track by $index" class="consent">
<div class="custom-checkbox">
<input ng-model="consent.checked" type="checkbox" id="consent-item-{{consent.fieldId}}">
<label ng-bind-html="consent.displayText | tc:'consent.text'" for="consent-item-{{consent.fieldId}}" ng-hide="consent.fieldId == 'ID12345'"></label>
<label for="consent-item-{{consent.fieldId}}" ng-if="consent.fieldId == 'ID12345'">
<p style="color: red; font-size: 18px;">Consent text with <b>CSS</b></p>
</label>
</div>
</div>
</div>
Where "ID12345" is the Field ID available under Manage → Consent fields.
Another use case you might want to achieve would be to dynamically show or hide the field depending on whether the "Force all new subscriptions to be auto-renewing subscriptions" checkbox is enabled in the Payment term settings.
The selectedTerm object contains a property selectedTerm.forceAutoRenew with 2 values:
-
true: The payment term setting "Force all new subscriptions to be auto-renewing subscriptions" is enabled → consent field checkbox should be hidden -
false: The payment term setting "Force all new subscriptions to be auto-renewing subscriptions" is disabled → consent field checkbox should be shown
You can implement this logic using Angular directives like ng-if or ng-hide in your Consent Components template.