Contact me if you need to build a complex form with complex functions by using Caldera Forms (Create new user, send SMS to user, email validation, delete user, delete post...)In this tutorial, I will demonstrate some Masked Input Type for Caldera Forms.

Single Line Text Field Introduction

Single Line Text is the most common field in Caldera Forms. This field comes with many input types:

Text – The default field type, accepts all characters.
Date – Accepts ‘yyyy-mm-dd’ format. E.g: 02-Jun-2019
Month – Accepts ‘month name and year (M Y)’. E.g: December 2019
Number – Accepts numbers only. E.g: 092123
Search – Sets the field type to be used for searching strings and numbers.
Tel – Accepts numbers only.
Time – Accepts ‘hh:mm AM/PM’ with 12 hour formatting. E.g: 12:23 PM
URL – Accepts only valid URLs such as www.calderaforms.com.
Week – Accepts ‘week number and year’. E.g: Week 23, 2019

Mask Input In Caldera Forms

Mask Input extends power of Single Line Text Field by adding condition for user’s input using wildcard character. To enable this feature, you must tick Enable input mask and fill in Mask rule, e.g (aaa-99-999-a9-9*). Here are list of rules:

  • 9 : numeric
  • a : alphabetical
  • * : alphanumeric
  • [9 | a | *] : optional
  • {int | * | +} : length

I made underneath form to show some examples:

You can input any character, any length. Rule = [a{*}]
You can input any number, any length. Rule = [9{*}]
You can enter number only, limit 6 numbers. Rule = [9{6}]
You can input Email only. Rule = *{+}@*{2,}.*{2,}[.[a{2,}][.[a{2,}]]]
Use code snippet below
Use code snippet below
Use Mask Input like this [[?|-|,|@|a]{8}]

As you can see by the email mask input, you are able to combine multiple mask inputs into one.

Updated (Sep. 17th 2019)

Based on Gil Poulsen question, I do some research and found this snippet to limit characters of Text Area Field. Replace fld_456 with your field ID, and 75 with your desired number.

Thank you Gil Poulsen! 🙂

/**
 * Set the Caldera Forms number field with the ID of fld_456's maxlength to 75
 */
add_filter( 'caldera_forms_field_attributes', function( $attrs, $field, $form ){
  if( 'fld_8570647' === $field[ 'ID' ] && 'paragraph' === Caldera_Forms_Field_Util::get_type( $field, $form ) ){
    $attrs[ 'maxlength' ] = 20;
  }
  return $attrs;
}, 20, 3 );

Thanks to Gil Poulsen again ;), I made 1 more example to limit 9 chars for Single Line Text Field

Code snippet. Have fun!

//limit 9 chars
add_filter( 'caldera_forms_field_attributes', function( $attrs, $field, $form ){
  if( 'fld_5679963' === $field[ 'ID' ] && 'text' === Caldera_Forms_Field_Util::get_type( $field, $form ) ){
    $attrs[ 'maxlength' ] = 9;
  }
  return $attrs;
}, 20, 3 );

 

 

Credit:

GiangLe.DEV

My name is Giang, a Vietnamese guy living in Thanh Hoa City, Vietnam. I am a WordPress Developer, learning to master WordPress and Laravel PHP Framework.

9
Leave a Reply

avatar
1 Comment threads
8 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
GiangLe.DEVGil Poulsen Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Gil Poulsen
Guest

Hi, thank you for posting this info, it helps to better explain how to use the field masking options/. Just wondering if you happen to know how to do this for a text area field as well, like if you wanted to limit it to 140 characters,, for example? Thanks!

Close Menu