CSFORMS : use of input masks with CSF - Best practices

Support
#1

Hi @Themeco team !

I am currently working on a subscription flow designed to guide users throughout a custom checkout with as little friction as possible.

In this specific use case, I am using CSForms to collect the user data needed to process orders.

As an UX architect, I want the form to be as user-friendly as possible, regardless of where the user is subscribing from in the world. This is not only to make data entry easier for them, but also to properly structure the output data before it gets processed.

That is why I want to implement input masks for fields where data needs to be both structured and flexible, for instance, international phone numbers and pre-filled, international addresses (autocomplete/auto-suggested).

To achieve this, I understand that I need to rely on existing, widely-used JS libraries like iMask.js, or perhaps others I am not familiar with yet.

While all of this sounds promising, here is the core question: how can I implement these industry standards using CSForms? Is CSForms designed to handle these professional use cases? What are the best practices for implementing specialized input masks within CSForms?

Specifically, my question covers:

  • Country selectors with flags and dialing codes - for phone number inputs.
  • Auto-suggest / autocomplete for addresses country input fields.
  • Input masks - specifically for credit card fields and processes needs.

[Edit] Maybe there is simple way to achieve that, i’m still investigating what is used by woocommerce/Woopayments for those inputs, to achieve it the same way

Thanks for your help!

Florian

#2

Hey @Florian_FR,

Yes, CSForms is built to support professional checkout flows. While specialized UI widgets aren’t built into the builder UI out of the box, CSForms uses standard HTML elements, custom attributes, and JS events—allowing seamless integration with industry-standard libraries.

How WooCommerce / WooPayments Handle These Fields

  • Phone Inputs: Use intl-tel-input for flag dropdowns, auto-dialing codes (+1, +44), and dynamic country formatting.
  • Address Autocomplete: Use Google Places API to auto-fill street address, city, state, postal code, and country upon selection.
  • Credit Cards: Use Stripe Elements / WooPayments hosted <iframe> fields—never raw text inputs with iMask.js—to ensure PCI-DSS compliance, brand detection, and secure tokenization.

Implementation Best Practices in CSForms

  1. International Phone Numbers (intl-tel-input)

    • Add a type="tel" input in CSForms with a custom class/attribute (e.g., .cs-phone-intl).
    • Enqueue intl-tel-input and initialize it via JS. On form submit, set the input value to E.164 international format (iti.getNumber()).

  2. Address Autocomplete (Google Places API)

    • Set standard CSForms autocomplete attributes (address-line1, address-level2, address-country, etc.).
    • Attach google.maps.places.Autocomplete to your address field and programmatically fill and dispatch change events on neighboring input fields.

  3. Input Masks (iMask.js vs. Credit Cards)

    • General Data (Dates, Tax IDs, Postal Codes): Attach a custom attribute (e.g., data-imask="00/00") in Cornerstone and initialize IMask(element).
    • Credit Cards: Use CSForms’ built-in Stripe Elements pattern ([stripe-card.js](file:///d:/laragon/www/pro/wp-content/plugins/cornerstone-forms/assets/js/stripe-card.js)) via data-stripe-card to mount secure payment iframe fields and handle tokenization on submit.
1 Like
#3

Hi @christian

Thank you very much for your answer !

Ok, I see there’s a simpler way to do this… I already have enough to move forward with the phone and address fields.

For the credit card and payment part, I was already familiar with this implementation via Stripe iframe to ensure PCI-DSS compliance… I will see if it’s possible to integrate only the fields I need. What worries me is calling fields that I don’t need but would be ‘encapsulated’ within the iframe.

The other solution I thought of is to tokenize the payment information and send it with all datas, in JSON format directly to the WooPayments/Stripe API.

It seems more complicated and will need to be done right, but the advantage is that I keep full control over the layout and display of the fields… well, i’ll see.

Thank you for your help.

Florian

#4

You’re welcome, Florian.