Web Form Builder 1.2 introduces the Reg. Expression element. This is a very versatile element that allows a wide range of custom uses, from an "Only Letters" field to an "eBay item ID" field, and just about anything else you can accomplish by writing a regular expression. While anyone can make use of the presets in the RegEx property drop-down, more advanced users can even write their own expressions.

Confused yet? Regular expressions are very complicated things! Fortunately, you don't need to know much about them to use the presets. We'll do a quick background on what they are, how they work in Web Form Builder, and show you some resources you can use if you'd like to get into writing your own expressions.

(By the way, the Wikipedia article on regular expressions is very thorough.)

Table of Contents

What are regular expressions?

They're strings of logic used by computer programmers worldwide, intended to transcend the language barrier for universal application. Professional web developers often use them to validate fields in forms for clients, which is why we've worked toward giving you this power as well.

Regular expressions provide a way to match strings of text, which is exactly what Web Form Builder uses them for. They expression given for a field restricts what can be placed in that field by defining what characters can be used, when characters can be used, how many characters can be used, etc. If the information submitted in the field does not match the rules defined in the expression, the submitted information will be rejected, and the visitor will be asked to try again.

Each one of these expressions consists of a bunch of characters which might seem to be a random mess of junk. Actually, those characters define a very specific action. Let's break down the "Only Letters" preset:

/^[a-z]+$/i

Everything within the slashes (/) is part of the actual expression. The ^ means "begins with." Everything between the brackets ([ and ]) is part of a range, running from the letter a to the letter z. The + sign means that there can be more than one character on this line. The $ means "end of the line." Finally, the i outside of the expression's slashes is just a mode indicator that states that upper and lower case do not matter.

Put all of that together, and you have an expression that reads:

"This statement matches anything that begins with any letter from A to Z, contains any amount of these letters, contains only letters from A to Z, and they can be both upper and lower case."

Wow! Programmers use regular expressions fairly often to match strings of text. This is why many of us are not programmers. :)

So how do they work in Web Form Builder?

Web Form Builder's Reg. Expression element will use expressions like the "Only Letters" example shown above to determine what type of information is allowed in the field it defines. For this example, when this expression is used, only letters—not numbers, hyphens, periods, or any other special characters—will be accepted by this form field.

When a visitor submits a form, the information they have entered into this field will be checked to see if it matches the regular expression. If it does, the data is accepted. If it does not, an error occurs and the visitor is returned to the form. We highly suggest supplying an Error Message to give the visitor a better idea of how to use your Reg. Expression field.

Because they're such a pain for most of us to code, we've included some presets that we think are the most useful. In the next section, we'll take a closer look at them, discuss what each one does, and briefly explain how they work.

Reg. Expression Presets in Web Form Builder

When you create a Reg. Expression element in the Web Form Builder workspace, click to the Properties tab. Next to the RegEx property is a drop-down menu full of pre-written expressions that accomplish some common needs.

Below is a full description of what each preset does. We've color-coded some of the different components to help visualize how each expression works.

Alphanumeric

/[0-9a-z]/i

Action: Only numbers and letters can be used in the field; no hyphens, punctuation, special characters, or anything else can be used.

Breakdown: The brackets ([ and ]) declare a range, which includes both 0-9 and a-z. On the end of the phrase, outside of the slashes, is the letter i, which means that the limitation is case insensitive (doesn't matter whether the letters are upper or lowercase).

Rough English Translation: "Uses any digit from 0 to 9, and any upper or lower case letter from a to z."

Hint: Removing the i at the end would result in just lower case letters being accepted.

Only Numbers

/^[0-9]+$/

Action: Only numbers can be used in the field.

Breakdown: The ^ at the beginning means "starts with"; the brackets ([ and ]) declare a range, which includes the digits 0-9; and the +$ at the end means "until the end of the line."

Rough English Translation: "Starts with any digit from 0 to 9 and only uses digits from 0 to 9 throughout."

Hint: You could also choose a different range of digits here; changing the 9 to a 6 would cause the field to only accept numbers from 0 to 6.

Only Letters

/^[a-z]+$/i

Action: Only letters can be used in the field.

Breakdown: The ^ at the beginning means "starts with"; the brackets ([ and ]) declare a range, which includes the letters a-z; the +$ at the end means "until the end of the line"; and the i outside of the slashes means "case insensitive."

Rough English Translation: "Starts with any upper or lower case letter from a to z and only uses upper and lower case letters from a to z throughout."

Hint: Removing the i at the end would result in just lower case letters being accepted.

No White Spaces

/^[\S]+$/

Action: Will not allow spaces to be used in values typed into this field.

Breakdown: The ^ at the beginning means "starts with"; the brackets ([ and ]) declare a range, which includes the shorthand class \S (which means "not a space"); and the +$ at the end means "until the end of the line."

Rough English Translation: "Starts with anything other than a space, and does not use any spaces throughout."

Bank Routing Number (USA)

/^[0-9]{9}$/

Action: Bank routing numbers are always 9 digits long. Therefore, only numbers can be used, and there must be exactly 9 of them.

Breakdown: The ^ at the beginning means "starts with"; the brackets ([ and ]) declare a range, which includes the digits 0-9; the curly brackets ({ and }) declare a repetition, of which 9 is the declared value; and the $ at the end means "the end of the line."

Rough English Translation: "Starts with any digit from 0-9 and uses exactly 9 of them."

Hint: Changing the {9} to another number will require exactly that many digits to be used.

Bank Account Number (USA)

/^[0-9]{12}$/

Action: Accepts bank account numbers that are 12 digits long. Only numbers can be used, and there must be exactly 12 of them.

Breakdown: The ^ at the beginning means "starts with"; the brackets ([ and ]) declare a range, which includes the digits 0-9; the curly brackets ({ and }) declare a repetition, of which 12 is the declared value; and the $ at the end means "the end of the line."

Rough English Translation: "Starts with any digit from 0-9 and uses exactly 12 of them."

Hint: Change the {12} to the number of digits used in bank account numbers for a specific bank.

eBay Item ID

/^\d{12}$/

Action: All eBay items use a 12 digit ID number. Only numbers can be used, and there must be exactly 12 of them.

Breakdown: The ^ at the beginning means "starts with"; the shorthand class \d means "digits only"; the curly brackets ({ and }) declare a repetition, of which 12 is the declared value; and the $ at the end means "the end of the line."

Rough English Translation: "Starts with any digit and uses exactly 12 of them."

Hint: The range [0-9] can be used in place of the shorthand \d . Both declare the same thing: any digit can be used.

Only Upper Case

/^[A-Z]+$/

Action: Only upper case letters can be used.

Breakdown: The ^ at the beginning means "starts with"; the brackets ([ and ]) declare a range, which includes the letters A-Z;  and the $ at the end means "the end of the line."

Rough English Translation: "Starts with any capital letter from A to Z, and uses only capital letters throughout."

Only Lower Case

/^[a-z]+$/

Action: Only lower case letters can be used.

Breakdown: The ^ at the beginning means "starts with"; the brackets ([ and ]) declare a range, which includes the letters a-z;  and the $ at the end means "the end of the line."

Rough English Translation: "Starts with any lower case letter from A to Z, and uses only lower case letters throughout."

Creating Your Own Custom RegEx

There's one more option here: Custom. If you're brave and hardcore, you can supply your own expression or make tweaks to one of the presets. Use the box below the drop-down to enter your custom expression.

You can browse our list of regular expression examples to see if we've already collected one that works for you.

This site has a massive archive of expressions. Just make sure to thoroughly test them to ensure that they actually function the way you intend for them to.

More Resources

If you're creating your own custom expressions, it may be best to use a testing tool to determine that your syntax is correct before using it in your form. Here's a couple online tools that we think are especially handy:

These sites have a lot more information about regular expressions and how they work:

If you feel like you've created an especially useful one, tell everyone in the forums! We'd like to share it with others. Hey, it might even make it into a future build.

Oh, one more thing. Regular expressions are very complicated. As much as we love our customers, we can't analyze and provide assistance with your expressions! We'd have to let you talk to one of our programmers—and trust us, they don't have the people skills they'd need. :)

Good luck!