#33 - Automatically Format Form Inputs v0.2

Force form inputs to follow a set format, such as DD/MM/YYYY.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 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>

Description

Attribute

No items found.

v0.2 - Bug fix

Fixed formatting issues which caused the script to not work properly as-is.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Automatically Format Numerical Inputs in Webflow forms

Memberscripts needed

https://www.memberstack.com/scripts/automatically-format-form-inputs

Tutorial

Cloneable

https://webflow.com/made-in-webflow/website/auto-formatting-form-fields

Why/When would need to automatically format numerical inputs...

Improved User Experience: Automatically formatting inputs, like phone numbers or currency, helps users enter data correctly and effortlessly.
Data Consistency: Ensures that the numerical data entered by users is consistent, which is crucial for data processing and analysis.
Error Reduction: Minimizes the chances of errors in data entry, which can be critical in forms related to financial transactions, bookings, or registrations.

How to Automatically Format Numerical Inputs in Webflow Forms

Automatically formatting numerical inputs in Webflow forms improves the user experience by reducing uncertainty and error while inputting information. This feature is especially useful for forms that specifically formatted numerical data, such as financial information, phone numbers, or measurements.

Implementing Automatic Numerical Formatting in Webflow

Webflow’s numerical form fields (such as a phone field) don’t include any automatic formatting by default. To add automatic numerical formatting, you’d normally need to write custom code to monitor the user input on your fields. That’s why we created a free MemberScript for you that has all the custom code you need. We’ll show you how to add automatic numerical formatting using that MemberScript in this article.

1. Choose Form Fields for Formatting

Choose which form fields on your Webflow site would benefit from automatic numerical formatting. Consider how you’d like them to be formatted and make note for when we configure the script.

2. Add Automatic Formatting to Your Fields

With the MemberScript, you'll add automatic formatting to the fields you chose earlier. Follow the tutorial for Memberscript #33 - Automatically Format Form Inputs to add formatting. An advantage of this MemberScript over other general formatting custom code is it allows you to add a prefix along with a custom format.

3. (Optional) Optimize Page Load

Any scripts you add to a Webflow page are loaded alongside the page. If you’re trying to get your page load time as low as possible, you can generally make your site load faster by optimizing your scripts. In this case, you can optimize MemberScript #33 by removing the lines for formats you’re not using.

Conclusion

Automatically formatting numerical inputs in Webflow forms is a practical and user-friendly feature that improves data accuracy and user experience. By following these instructions and including the MemberScript on your Webflow site, you can streamline the data entry process for your users.

Take a look at our cloneable to see the example used in MemberScript #33’s tutorial. It uses various common numerical formats in a form to show you what the script can do!

Take me to the Scripts

https://www.memberstack.com/scripts/automatically-format-form-inputs

Read full documentation

Button Text

Something not working as expected?