RackForms v7.8.8
Site Tag Line
Latest Release: Build 958 - Arpil 18th, 2023
Contact Us  Purchase Options Purchase Options Contact Us

Top Link
Text Password

In Brief: General purpose text area element. Used for longer blocks of text.

Dependencies: none.

Hints & Tricks:


Basic Attributes


Type the text you want to appear above or to the side of the textarea box. This is also the value of the text displayed in the RackForms Result Browser and Email messages.

The label field supports local PHP variables if they are wrapped in PHP tags and echo 'd out as: <?php echo $val; ?>

Please note that only local variables are supported, $_SESSION variables must be bound to local variables in the PHP Top Code or PHP Head Code section first.

Helper Text

This text displays on the bottom of the field item. By default, the text is 7pt and light grey #888888. You can change the elements color in the RackForms editor, but the font size must be changed in the jobs formpage.css file.


This element is set by RackForms automatically, though it is recommended to change this value if you decide to display Javascript validation messages, as the 'identifying' text of the error is the value of this field.

This value is displayed by default if no 'Label' attribute is assigned to the element. For technical users, this element name is in fact the same as the Name/Value html form attribute of this element.

You will also notice that if you change the name of this field, the id attribute to the immediate right of this element also updates with the same value. This is because in most cases you should keep the same value for both elements--however, you can use a different value, simply type in the id field separately.

Naming Convention Note: The only valid punctuation for the Name/Value and id fields is the underscore _. Use of any other character will cause the form to fail.

This is an incredibly important item for the Email+ and SQL+ Modules. The value you type into this box is what you will use to retrieve the dynamic value of the field at runtime. This element is often referred to as {field_id} in the documentation of those modules


By default is assigned the same value as the Name/Value element, though you can change this to a more field specific value. Not necessary for most applications. For technical users, this is the id attribute of the field item.

Default Value

Any pre-assigned values for this element should be typed into this box. At run-time this value is automatically populated into the field item.

In character units, the height of the field item. Default of 5.


In character units, the width of the field item. Default of 40.

Wrapper Class Name

Every field element in RackForms is wrapped in either a LI or DIV element for Sortable or Free Form page types, respectively. When you place a value in this box it becomes the class="" attribute for that wrapper. Because a wrapper encompass both the input element and wrapper, you can use this value to show and hide sections of your form.

Fielded Data Name

The name of the array element this field will populate in the 'fielded_data_array_value' array. This is a specialized use item and can be ignored in most cases, as you would have to custom code php to use the output of this array.

TinyMCE Editor

Adds a TinyMCE Rich Text Editor to the text area.

Select from three TinyMCE preset configurations:
Simple Editor - Provides basic text controls.
Text Heavy - Provides ~13 text editing tools plus a slew of editing control such as undo.
FromBoss Style - Creates the same suit of text editing tools used in the RackForms Editor.

* Please be aware that at this time the Display Field Count validation property has no effect on text areas that use TinyMCE. You can still set a maximum character count, but this value will only be validated at the time of the forms submission via PHP, not JavaScript.

** You can only use 1 style of TinyMCE text editor per form page. The text area that comes first in the form will determine which TinyMCE text editor configuration is used.

Extra Attribute(s) JS Style Etc

Add code to your field item by typing it into this box. Code can be JavaScript event code such as:
onclick="alert('Be sure to use Letters only');"

External Library dependent code as in:
onclick="Effect.Fade(this, { duration:.2});" (Prototype/Scriptaculous shown here)

Or Style definitions as in:

What's important to note is that the code you create here effects the field element, not the container it sits in. To edit the field container, you need to reference the field name prefixed with 'fb_fld-', as in a text box with an ID of text1 would be referenced like: 'fb_fld-text1'

Field Style Properties:
Text Color- Click into the box to load the color selector. Drag your cursor over the saturation in the main box to select the color intensity, or drag the hue slider to change color.

Font Size(px)

Type a number in this box to change the font size of the element.

Label Position

Display the field label, if set, on top of or to the left of the field element.

Conditional Processing

Conditional Processing Overview
The conditional processing capabilities of RackForms can be broken into two main categories:

Guided - In this mode we use all fields except the Custom Conditional Field Statement text area. That is to say, we use the RackForms user interface to select one element or wrapper to apply dynamic logic to. This could be considered the "easy" mode, in that we write no code to perform our dynamic logic. We simply tell RackForms the properties of the interaction we want and RackForms does the rest.

Custom Conditional Code - In this mode we use the Event Trigger property say which event calls the code we define in the Custom Conditional Field Statement box. This could be considered the more powerful but advanced mode, in that we write our own dynamic logic.

Of course with power comes flexibility, as in this mode we can apply any type of complex logic we need to get the job done. In particular though this code-centric mode is required if and when we want to apply dynamic logic to more than one field item or wrapper class item (items that have the same Wrapper Class property defined).

To be clear: if we only need to apply dynamic logic to one item or wrapper class we use the guided mode. If we need to have more than one item show or hide, we use the custom code mode.

Important Note
Starting with Build 759 we can use the Guided mode controls to apply conditional logic to items on a different page than the one the affecting form field is on.

Please note however, that this capability does not apply to Custom Conditional Code logic, only guided ones. That is, any custom conditional code we write only applies to items on the same page.

Field Initially Visible?

Determines if the form element is visible when the page first loads. Please note that this logic always resets on page load, that is, if a user goes back one page where an element was previously shown it will be invisible again .

This Form Field...

This field and the next allows us to create a condition on the visibility of the field. We enter the Name/Value of a form field in this box, and in the next, the value we check against. If the value matches, we show the field. Please note this only works as a method to show a field, not hide. That is, we still uncheck the Field initially Visible to hide the field, these options simply allow us to show the field based on a condition from another form field. Please note this logic works across pages.

Has This Value...

The value we check to determine a fields visibility. This must exactly match the value the form field will contain. This field is also dynamic, which means we can use standard RackForms tokens to check against a dynamic value at run-time.

Easy Toggle?

Checking this box means RackForms will automatically handle the logic needed to perform the opposite action you set in Then... and If This Field Is: properties. For example, if you set the action of an item to be 'Show', if the condition needed to make this show action happen is revoked, the opposite action will automatically happen for you. So, if the condition is the text '1' must be set in a text box in order to show a second text field, if this 1 is removed or changed, the second text box will be hidden again.

In general we want to keep this box checked, though if you wanted to force a field to always show after an action then leave it unchecked.

Event Trigger

This is the JavaScript event that will be scanned for and then acted upon if activated. Some events are better than others for the various tasks you have. For example, the onClick event is perfect for Checkboxes, whereas the onKeyUp event is perfect for text boxes where a user needs to enter a specific value. Experiment with these values and have fun!

Caution! You may run into a situation where you build a form that enables the event trigger on a specific field, then remove that field later on without updating the Event Trigger's 'binding' to that element.

If this happens your forms validation will break, along with other potential issues.

The solution is always make sure that when we enable an event trigger for an element, that field exists on the form.


While not always needed, if you want you can add animation using Prototype JS to your events. The upside of this is your forms may have a more professional appearance, the downside is the extra bandwidth needed to send the Prototype JS library over the wire to run the animations. However, if you are already using animation or have included the Prototype JS library for other purposes, this bandwidth cost is obviously negated, so animate away!

If This Field Is:

This is the core property of the Conditional Processing logic. In most cases you will only want to show and hide fields if a specific condition is met, this option allows us to set that condition. As with the Event Trigger property, some options only make sense in the proper context. For example, the top Value Comparison grouping is best served in combination with text and select fields, whereas the Field State options of Checked and Unchecked only make sense for checkboxes.

It is also important to note that RackForms will attempt to cast comparison values set as INT and FLOAT values to their respective native types.

This Value...

When we set the If This Field is property, with the exception of the two Field State checks of Checked and unchecked, we typically want to compare against some value. It is in this text box that we set that comparison value. RackForms will automatically attempt to detect FLOAT and INT values when testing against GREATER THAN and LESS THAN checks.


If the condition set in If This Field Is and This Value... passes, this is the action we will perform. Please note that is Easy Toggle? is enabled, we will automatically perform the opposite when the check fails.

This Field Or...

When we set an event, comparison, and action, the last step is to tell RackForms which fields to act upon. It is in this field and is close relative, This Wrapper Class, that we set this field or fields.

As you build your form RackForms will automatically track the Name/Value properties of the elements on that form page and then present them to you in list format in this field. Thus, all eligible form fields will be displayed in this select item, the one you select will become the field acted upon.

Finally, any elements that are set to hidden on page load are tagged with a [H], which makes it easy in many cases to see which items you may need to work with.

Note that items from other pages will be shown as well, they are grouped with an entry of the page name they below too.

This Wrapper Class

Similar to the This Field Or... property, with the exception that instead of single field we can act upon all elements with the same Wrapper Class attribute. This makes it very easy to show and hide large portions of content with one action, perfect for address fields and the like.

Conditional Field Statement

Although RackForms tires to automate as much of the show/hide process as possible, their will be times when you need to have more complex logic. When this is the case, we can use the simple RackForms API to create custom logic.

The bulk of this logic will be derived from a JavaScript object called fbc. This object is defined in:


This file is exported into the root of all RackForms jobs.

The basic usage of this object will depend on what action you want to perform. Their are 4 methods you need to know about:

hideField, hideWrapper, showField, showWrapper

As shown in the editor, we call these methods as:

fbc.showField(event, 'FieldName', 'animation');

With a simple example to show a text box being:

if(in_value == '1'){
  fbc.showField(event, 'text2'); // animation argument is optional, event and field name is not!

Simple enough--But it is important to understand that at the page code level RackForms creates two distinct but related items.

The first is the event trigger which is placed inline with your form element. Please be aware the event used is not created automatically, you need to select one from the Event Trigger select item.

Thus, if we select the onKeyUp event RackForms will place this code inline with your element:

onkeyup="fb_dyn_text1(event, this.value, this)"

Notice we have three arguments. This is important because the inline method call is directly tied to the second main element RackForms creates for you, which is a script tag with that methods definition.

This method looks like:

function fb_dyn_text1(event, in_value, elt){
  if(value == '1'){
     fbc.showField(event, 'text2');

As you may now see, this method body is the code you create in the Custom Conditional Field Statement text area. The reason why it is wrapped in the method is to that you do not need to worry about creating or gathering the event, in_value, and elt parameters.

Thus, the last bit of knowledge to convey is that these parameters, event, in_value, and elt, can be used in any way you need in your Custom Conditional Code. Most of the time you will only need the in_value parameter for your logic, but please notice you must pass event to the fbc functions no matter what.

Custom Code Hints and Tricks

Place hide field calls at the top of the code section.

One common trick to employ to keep your code block clean is to place all hide calls at the top of your code block. This eliminates the need for most if/else blocks, and means we only need to set conditions to show elements. The reason this works is hiding and showing elements is so fast, that even if an item is shown and will not be hidden by the code, the hide call and subsequent show happens to fast to be perceived.

Be careful with integer values.

Integer and number values in JavaScript can often cause problems, as they may be interpreted as strings, and vice versa. Thus, when working with number values always pass them through isNaN (is not a number), and parseInt/float. For example, the following code will check to make sure k is a number, and is also an int.

var k = 10;

if(!isNaN(k)){ // is this a number?
  if(parseFloat(k) <= 10) { // parse and check value
  } else {

Watch which Event Trigger we use.

Generally speaking, a text box should use blur, a drop down onchange, and radio and checkbox items onclick. Using different events is possible, but can lead to unexpected results.


New in Build 711, we now have a callback that's fired after an animation plays:


We use this callback inline with our Conditional Code block as in:

fbc.animationDone = function(elt){
  // when animation is done, call resize function for iframe

That is, we call fbc.animationDone(elt), then in that function, define the actions to take place.

The elt parameter is the object that called the animation, that is, is the object which reacted to the event.

Please note this event is fired for every animation that plays. Thus, if we've used this in the content of a Wrapper Class with say, 5 elements, this function is called 5 times.

Important RackForms Note: In RackForms 2 the in_value parameter was defined as just value. This caused code conflicts however, and was thus renamed to the present value. If importing any RackForms 2 jobs into RackForms, any custom code will need to be updated to use the new value.

Field Style Properties

Element z-index

New to Build 697, this feature allows us to set the z-index of most items. This property is reflected in the editor as well, making positioning items much more streamlines than in previous versions.

By default most items, with the exception of calendar fields, have a base index of 1. This means so long as your form fields to not overlap you will not need to set this property. However, some fields, such as images or those with popup's (like the calendar field), benefit from setting a different layering order.

Text Color

Click into the box to load the color selector. Drag your cursor over the saturation in the main box to select the color intensity, or drag the hue slider to change color.

Font Size(px)

Type a number in this box to change the font size of the element.

Label Font Weight

New to Build 685, this option lets us set the font weight of the forms field label or main text block.

Element Position

Use this control to position an element to the right of the page, as opposed to the default left.

Label Position

Has no effect for this field. Might be implemented in later versions.


It is very important to note that validation behavior is handled in two places: the field itself, and in the fields containing page properties. Within the field, you can control the elements listed below, such as whether the field is required, the minimum and maximum number of characters, and so on. Within the page properties, you control the style of error, whether messages are displayed, and other such properties. One way to think of it is error handling per field item, and global error handling properties. FIeld item properties are specific to that element, global effects all error properties of that page.

For example, the default behavior of a field that is marked as required is to, when filled in improperly, highlight the field with a color you choose in the Page Properties Form Error Color. In other words, you set the field as required in the elements field properties, but you control the color of the error highlight in page properties.

For more information on what properties you can edit, please see the Form Style Properties and Page Properties of the Sortable and Fee-Form Page types.


Check this box to make this field a requirement for successful form submission.

Required Star Color: In some instances you will want to change the color of the required star. To do so you can use one of two techniques:

Technique 1. Permanent change: Navigate to the RackForms/app/movefiles/ folder and open the formpage.css file and look for the .req-star class definition. You can then change this color to fit your jobs needs. This change is permanent because every job you export will now use this style sheet file and definition.

Technique 2. Per Job Change: Click on the page header to bring up that page's attributes, then add the following style definition to the Page Javascript/CSS Code code area:

<style type="text/css">
  .req-star { color:#dedede; }

This will override the style definition in the RackForms.css file and use the color you specify.

Field Validation Method

This option allows us to set the behavior of how conditional items will be validated when hidden.

By default, when we set an item to be hidden and required RackForms will still process the invisible item as if it were shown to the user. With this new option we can override this behavior to tell RackForms that any item that's hidden and set with Field Only Validates When Visible should, as the option name states, only trigger validation errors when visible.

The trick with this is from a security standpoint it's possible to create a script that exploits this behavior such that no fields would be required. However, the RackForms implementation is such that only fields set with the property are able to be 'bypassed' via normal validation methods.

The end result then is if we're building a form that needs to have required fields, but those fields are hidden unless a user triggers a condition to show them, to enable this mode for that field, and of course any others that require it.

By default RackForms will still validate all fields unless told otherwise. This maximized security while providing a way to create smarter forms.


The minimum number of characters this field must possess. Validates if the field is required or not.

New in Build 706, for checkboxes, this is the minimum number of items that must be checked for the field to be valid. To set a specific number, set the min and max values to the same value.


The maximum number of characters this field can contain. Validates if the field is required or not. If you wish to limit the number of characters a user can type, specify that value in this field. The user will not be able to enter more characters specified by that value.

For checkboxes, this is the maximum number of items that can be checked.

Regex Validation Rule

This is the Regular Expression rule to apply to this field. Used in required fields only. Choose from No Rule, Custom Rule, and a series of preset rules.

If you choose Custom Rule, you will be given a 'Custom Regex' box to populate with your own expression (please note only one expression can run on each element).

For example, you could use this to validate $45.23:


or without the dollar sign as in 45.23:


Same As

[Only used for Text and password fields] If populated, this element and the one specified must match to validate. Only effective if the field is required (the must match field need not be specified as required). Effective for user password and email address validation.

Validation Error Message

Type a custom message for validation here, in the event you select a 'Regex Rule' for the field. All other validation messages are handled by RackForms.

Display Count Fields

[Only used for textarea elements] Select from No Counting, Words, or Characters. Select Words or Characters to display a Javascript based character/word counter at the base of your text area element. This item works in conjunction with the Max validation field, though if no value is set it defaults to 500 characters.

Tooltip Options

Tooltip Text

This field lets us add tooltips to our form items.

The standard operating mode is if this field is left blank no tooltip will be shown. It is important to note that when set with any text the jQuery library will be automatically included in your forms output, as well as the text in this box will be shown as the tooltip for that form item. It is important to note this as while Prototype and jQuery play nice together in almost all cases, should you include Prototype in your forms issues may arise if we're not careful.

One of the most powerful aspects of these tooltips is HTML is fully supported when using the first two activation methods. In fact, this is why this field has a link to expand the editor to WYSIWYG mode. However, this means the two "Icon" methods do not support HTML, only plain text.

Why the difference? Technically speaking tooltips driven by the first two methods use a parent div, which means any and all HTML is accepted. The icon methods though, they work by including text in the icon elements title property, which means only plain text is accepted. It's thus advised that for more work we use the first two methods, and for tooltips that may affect more than one element, to use the button method.

Finally, please note that at this time checkboxes and radio items do not support tooltips.

Tooltip Effect

Choose the tooltip entry animation.

Tooltip Activation

This item determines the javascript event that shows the tooltip. By default text items are set to show when a text field is clicked on or tabbed to, and when select items are moused over. However, we can change this so all form items are activated with the onmouseover state.

As noted above when using Icon click or Icon Rollover we cannot use HTML in our Tooltip Text block.

Tooltip Position

The location the tooltip shows relative to the form element.

Relative Position

Related to Tooltip Position, this option allows us to override the default behavior of the tooltip being page relative. The default should work for almost all situations, though some free form pages may benefit from using Relative To Element.

Hide Delay (ms)

The time it takes in milliseconds for the tooltip item to hide. This is most often used when we want to allow users to click active content in the tooltip text.


The level of opacity the tooltip possess. By default this is .9, which means 10% transparent.

X Offset

How far away the tooltip is positioned relative to the form element in the x direction (left and right).

Y Offset

How far away the tooltip is positioned relative to the form element in the y direction (up and down).

Background Color

The background color of the tooltip.

Text Color

The color of the text in the tooltip. This can be overridden by using the HTML editor and applying local styles.

Border Color

The color of the tooltip border.

Shadow Color

Applies to Webkit/Mozzila Browsers Only: The color of the tooltip's shadow.

So many features, So little time