248
Hi there,
is there an easy way to convert the checkbox for a subscription list on a subscription form into a list with two options e.g. "Subscribe" and "Unsubscribe"?
We want to make it more clear for the end-user that she/he is unsubscribing from a list when not ticking the list.
Thanks!
Good suggestions from fellow users. So depending on the skills in the team, you have a number of options. You can do a lightweight UX tweaks on the page via CSS or go all the way using some JavaScript to write back in Dataverse API for those subscription lists (so you can customize it the way you like it, although it's more code), or have a custom field and plugin to have all these as Dataverse customizations without the need of custom Javascript.
Hi,
The checkbox element is fixed HTML component, I don’t think it can be converted into another element easily without CSS or JS customization, at least the OOB feature is not implemented by Marketing app yet.
It is not common to use JS to convert existing input element into different element and it doesn’t make sense because lots of code are required and the input elements should be designed from the beginning, but the idea to beautify the default style using CSS would be good, indeed checkbox is usually converted into slide toggle.
From our experience, default checkboxes are used by many of our newsletter providers.
Regards,
Zukasa
Hi Thomas,
As per my understanding, do you refer to slide control?(Like slide control of two options field of Dynamics.)
If so, it seems that the only workaround is to overwrite checkbox element using custom CSS.
I found a simple demo and apply its CSS to my subscription center form with modification, please check whether it works for you.
https://codepen.io/thelaazyguy/pen/MvqpPr
Due to subscription list is included in marketing-subscription-list class div container, so my sample code should be applicable to all forms, you just need to copy my CSS to source code of your form.
(Locating subscription list elements using CSS selector, there are only 4 rules.)
Share
Report
All responses (
Answers (
.marketing-subscription-list > input[type="checkbox"]:checked {
background: #0ebeff;
}
.marketing-subscription-list > input[type="checkbox"]:checked:after {
left: calc(100% - 1.5em);
}
.marketing-subscription-list > input[type="checkbox"]{
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 3.5em;
height: 1.5em;
background: #ddd;
border-radius: 3em;
position: relative;
cursor: pointer;
outline: none;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
border-color: transparent;
}
.marketing-subscription-list > input[type="checkbox"]:after{
position: absolute;
content: "";
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
box-shadow: 0 0 .25em rgba(0,0,0,.3);
-webkit-transform: scale(.7);
transform: scale(.7);
left: 0;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
Test
