Issue with Consent Pro and Memberstack Cleave.js script

Consent Pro
1

Hi Finsweet team,

I’m not a developer, I’m just building my site with Webflow and trying to use Consent Pro to manage all my scripts. I have a problem with one Memberstack script that formats form inputs.

This script is supposed to automatically format inputs like phone numbers or dates (for example XX/XX/XXXX for birthdays). Without Consent Pro, it works perfectly.

Here is the original version from Memberstack: #33 - Automatically Format Form Inputs | Webflow Powerups


<!-- 💙 MEMBERSCRIPT #33 v0.2 💙 AUTOMATICALLY FORMAT FORM INPUTS -->
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/addons/cleave-phone.us.js"> </script>
<script>
document.addEventListener('DOMContentLoaded', function(){
    // SELECT ALL ELEMENTS WITH THE ATTRIBUTE "ms-code-autoformat" OR "ms-code-autoformat-prefix"
    const elements = document.querySelectorAll('[ms-code-autoformat], [ms-code-autoformat-prefix]');

    for (let element of elements) {
        const formatType = element.getAttribute('ms-code-autoformat');
        const prefix = element.getAttribute('ms-code-autoformat-prefix');
        
        // SET PREFIX
        let cleaveOptions = {
            prefix: prefix || '',
            blocks: [Infinity]
        };
        
        // BASED ON THE VALUE OF "ms-code-autoformat", FORMAT THE INPUT
        if (formatType) {
            switch (formatType) {
                // FORMAT PHONE NUMBERS
                case 'phone-number':
                    cleaveOptions.phone = true;
                    cleaveOptions.phoneRegionCode = 'US';
                    break;
                    
                // FORMAT DATES IN 'YYYY-MM-DD' FORMAT
                case 'date-yyyy-mm-dd':
                    cleaveOptions.date = true;
                    cleaveOptions.datePattern = ['Y', 'm', 'd'];
                    break;
                    
                // FORMAT DATES IN 'MM-DD-YYYY' FORMAT
                case 'date-mm-dd-yyyy':
                    cleaveOptions.date = true;
                    cleaveOptions.datePattern = ['m', 'd', 'Y'];
                    break;
                    
                // FORMAT DATES IN 'DD-MM-YYYY' FORMAT
                case 'date-dd-mm-yyyy':
                    cleaveOptions.date = true;
                    cleaveOptions.datePattern = ['d', 'm', 'Y'];
                    break;
                    
                // FORMAT TIMES IN 'HH-MM-SS' FORMAT
                case 'time-hh-mm-ss':
                    cleaveOptions.time = true;
                    cleaveOptions.timePattern = ['h', 'm', 's'];
                    break;
                    
                // FORMAT TIMES IN 'HH-MM' FORMAT
                case 'time-hh-mm':
                    cleaveOptions.time = true;
                    cleaveOptions.timePattern = ['h', 'm'];
                    break;
                    
                // FORMAT NUMBERS WITH THOUSANDS SEPARATORS
                case 'number-thousand':
                    cleaveOptions.numeral = true;
                    cleaveOptions.numeralThousandsGroupStyle = 'thousand';
                    break;
            }
        }
        
        new Cleave(element, cleaveOptions);
    }
});
</script>

When I use Consent Pro, it detects this as 3 different scripts. I followed the instructions and replaced them with the Consent Pro version like this (all in the Essential category):

<!-- This script is managed by Consent Pro -->
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0" fs-consent-categories="essential" fs-consent-scripttype="text/javascript" type="fs-consent"></script>

<!-- This script is managed by Consent Pro -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/addons/cleave-phone.us.js" fs-consent-categories="essential" fs-consent-scripttype="text/javascript" type="fs-consent"></script>

<!-- This script is managed by Consent Pro -->
<script fs-consent-categories="essential" fs-consent-scripttype="text/javascript" type="fs-consent">
document.addEventListener('DOMContentLoaded', function(){
  const elements = document.querySelectorAll('[ms-code-autoformat], [ms-code-autoformat-prefix]');
  for (let element of elements) {
    const formatType = element.getAttribute('ms-code-autoformat');
    const prefix = element.getAttribute('ms-code-autoformat-prefix');
    let cleaveOptions = { prefix: prefix || '', blocks: [Infinity] };
    if (formatType) {
      switch (formatType) {
        case 'phone-number': cleaveOptions.phone = true; cleaveOptions.phoneRegionCode = 'US'; break;
        case 'date-yyyy-mm-dd': cleaveOptions.date = true; cleaveOptions.datePattern = ['Y','m','d']; break;
        case 'date-mm-dd-yyyy': cleaveOptions.date = true; cleaveOptions.datePattern = ['m','d','Y']; break;
        case 'date-dd-mm-yyyy': cleaveOptions.date = true; cleaveOptions.datePattern = ['d','m','Y']; break;
        case 'time-hh-mm-ss': cleaveOptions.time = true; cleaveOptions.timePattern = ['h','m','s']; break;
        case 'time-hh-mm': cleaveOptions.time = true; cleaveOptions.timePattern = ['h','m']; break;
        case 'number-thousand': cleaveOptions.numeral = true; cleaveOptions.numeralThousandsGroupStyle = 'thousand'; break;
      }
    }
    new Cleave(element, cleaveOptions);
  }
});
</script>

But with this setup, the third part (the inline script) doesn’t seem to run correctly. In Webflow’s code editor, the syntax highlighting disappears after <script type="fs-consent">, and when I publish, the form inputs are not formatted anymore.

My questions:

  • Am I doing something wrong by splitting them like this?

  • Should everything be inside one <script> block instead? (Actually I tried and same issue)

  • Does Finsweet already have a built-in script for input formatting (like dates and phone numbers) that could replace this Memberstack solution?

Thanks a lot :folded_hands: I’m just trying to get this working with Consent Pro without breaking my form formatting.

2

Hey @alexandreburgundcont!

The issue might be related to script dependency timing - your third script is trying to execute before the external Cleave.js libraries have fully loaded. This creates a problem where new Cleave() is called before the Cleave constructor is ready.

The syntax highlighting disappearing in Webflow’s editor after type="fs-consent" is normal - it indicates Consent Pro is managing that script correctly.

Here are your options:

Solution 1: Use Consent Pro’s Callback System
Use Consent Pro’s callback system to ensure proper script execution timing after consent scripts load.

<script>
  window.FinsweetConsentPro = window.FinsweetConsentPro || [];
  window.FinsweetConsentPro.push([
    'consent',
    (instance) => {
      console.log('Consent Pro loaded successfully!', instance);

      // Access the current consent state
      const store = instance.getStore();
      console.log('Current consents:', store.consents);
      // Init Cleave here
    },
  ]);
</script>

Solution 2: Dismiss scripts within the Consent Pro App
If these scripts are purely functional and do not issue any cookies, you can dismiss them within the app without compromising GDPR Compliance.

We don’t currently have a built-in input formatting solution that would replace Memberstack’s Cleave.js implementation, but we will look into offering this in the future.

Try Solution 1 first and let us know how it goes! If you need help with code implementation or run into issues, @Support-Luis or @Support-Pedro can help with the specific code solutions.