Mask Sensitive Form Values

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here. 

Here’s a solution for setting up text fields to behave as masked passwords on the front end.

Step 1

Find the component ID. You can find this information in the page builder by hovering over the info icon. Be sure to have the preview builder view active.

Step 2

Edit the field you’d like to mask from the page builder. While editing your field, you will find the option to add a CSS class selector under the design tab.

Step 3

Add the following code to the JavaScript ta of your page.

TB.render('component_X', function(data){
    data.ele.find('.password input').attr('type','password');
});

Remember to replace component_X with your form’s component ID found in step 1 and .password with your field’s defined CSS class.

Original Community Post:

Mask sensitive form values - Community Discussions / How Do I - Tadabase Community