subscription management logic

(0) Share

Report

Posted on by Elly-Farokhi

205

Hello everyone,

I have a subscription page where people can subscribe to a different marketing list or click on Unsubscribe to unsubscribe from all the emails.

I require to grey out and lock my subscription list if someone clicks on unsubscribe.

1351.Subscription_2D00_1.JPG

Do you have a solution for that, Many Thanks

Elly

I have the same question (0)

All responses (3)

Answers (1)

Verified answer

cloflyMao 25,210 on at

Like (1)

Report
Copy link

Link copied!
Hi Elly,

We could achieve it by code below:(paste it inside script tag)

MsCrmMkt.MsCrmFormLoader.on('afterFormLoad', function (event) { var unsubscribe = document.querySelectorAll("input[type=checkbox]")[3]; var list1 = document.querySelectorAll("input[type=checkbox]")[0]; var list2 = document.querySelectorAll("input[type=checkbox]")[1]; var list3 = document.querySelectorAll("input[type=checkbox]")[2]; unsubscribe.addEventListener('change', function (event) { if (event.target.checked) { list1.disabled = true; list2.disabled = true; list3.disabled = true; } else { list1.disabled = false; list2.disabled = false; list3.disabled = false; } }) });

Regards,

Clofly

Was this reply helpful? Yes No
Elly-Farokhi 205 on at

Like (0)

Report
Copy link

Link copied!

Thank you so much Colfy, you are so amazing.

is it possible to change the color in same time as well, I need to make it grey when locked.

Was this reply helpful? Yes No
cloflyMao 25,210 on at

Like (0)

Report
Copy link

Link copied!
Hi Elly,

We couldn't change the color of checkbox element directly, it's limitation of browser.

But a workaround is that we could apply CSS filter to checkbox element, the final effect is very similar to changing background color.

1. Create a custom class with filter property inside style tag.

.disabled-list { filter: invert(90%) sepia(33%) saturate(6%) hue-rotate(314deg) brightness(94%) contrast(91%); }

The filter effect is similar to #ddd color.

2. In the original function,

add the class to subscription list checkbox elements when "unsubscribe" checkbox is checked,

remove the class from subscription list checkbox elements when "unsubscribe" checkbox is unchecked,

list1.classList.add("disabled-list");

list1.classList.remove("disabled-list");

Result from my demo:

To get a satisfied background color, you could convert hex color to filter parameters by the website below:

https://codepen.io/sosuke/full/Pjoqqp

Regards,

Clofly

Was this reply helpful? Yes No