Basic Attributes

HTML 5 Type (text input fields only)

This field, which default to text, allows us to set specific input type values for this field. At the most basic level, setting a type will enable browser based validation, and possibly create extra input controls for the field.

Browser Validation:

While we have a full validation system available to us in RackForms, in recent years browser vendors have taken steps to implement some of the most common validation steps within the browser itself. The Email field is a good example of this, when set the browser will check the validity of the input against common email patterns. If this field is found invalid the browser automatically applies a OS/Browser specific style to the invalid field.

Extra Input Controls

Generally speaking, adding extra input controls such as calendars and color pickers meant downloading and implementing a third party JavaScript solution. With the new HTML 5 controls this work is now implemented directly in the browser. A good example of this is the Date type, when set in some browsers a calendar item appears next to the field.

Considerations

It's very important to note these controls and their implementations vary wildly across browsers and OS's, and even then, not consistently across the same browser over different OS's.

For a current compatibility list please see: W3 Schools.

The good news is if an input type isn't supported the browser simply renders a standard text box.

Label

Type the text you want to appear above or to the side of the form element. 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.

As of Build 693 the functionality of this item has been expanded to support dynamic tokens for E-Commerce items. Please see the in-editor tooltip (located just above this field), for specifics.

As of Build 701, this field now also accepts the standard RackForms 2 token set for form field labels. Please see the in-app tooltip for exact values to use.

As of Build 705, this field now accepts the standard RackForms 2 token set for Section/Headline Text and Body Copy elements. That is, we used to only be able to use the @{value} token, as can now use F{}, S{} and so on.

The 'new' tokens will, by default, transform linebreaks into HTML br tags. This is very handy when we want to display a text area to a user where such line breaks have been added. This ensures the typed value matches, as closely as possible, the display.

Also in Build 705 is the 'raw' field token: FR{field_name}. This token was created because by default, when we use a F{} token for say, text1, we are actually creating the following code:

<?php if(isset($_SESSION['qs']["{$_SESSION['entry_key']}"]['text1'])) { echo "{$_SESSION['qs']["{$_SESSION['entry_key']}"]['text1']}"; }?>

That is, a full (but inline) PHP block. This makes it impossible to create custom logic in a Body Copy or Section Text block, as the open and close PHP blocks break any such custom code.

Thus, the raw token only places the raw field value into the text data, nothing more. The same text1 item now looks like:

$_SESSION['qs']["{$_SESSION['entry_key']}"]['text1']

That is, no PHP block, and no isset().This means we could, for example, create the following logic in a Body Copy element:

<?php
if(isset(FR{text1}) && FR{text1} != "") { ?>
I want to hide this Bodycopy if @{text1} is empty ?
<?php } ?>

Tail Text
Tail Text allows us to add text just after a text field element. Generally speaking this is useful for adding definitions to the data being entered, such as lbs, psi, and so on.

The content in this item is enclosed in a span with a class of tailtext, and is thus best used for small images and blocks of simple text.

By default the text container is defined in formpage.css with a rule of:

.tailtext { font-size: 75%; }

This means the text will usually be smaller than the label field by a small amount. However, we can certainly add our own html and inline styles to this element for a more custom look.

Name/Value

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.

id

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.

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.

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.

Default Value
[Only used with text element such as text box and text area]
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.

Please note this area can contain a mix of tokens and standard text. This means we can have:

F{name}-entry

...and any non-token characters, in this case: -entry, will be included as well. Pay special attention to spaces, as they will be rendered along with any tokens!

There are a few special considerations with using PHP variables in this field:

1. Always wrap the full variable in braces.

2. You cannot execute functions in this block, only variables.

3. $_SESSION variables must use single quotes as in {$_SESSION['variable']}, not double quotes as in {$_SESSION["variable"]}

4. All variables are passed through htmlentities($variable, ENT_COMPAT), which means any double quotes are turned into &quot;

Placeholder Text

This value appear within a text box field item.

Tail Text

This value appears just after the form field input element of a text field item.

Field Width

In pixels units, the height of the field item. Default of 140 for text boxes and 200 for text areas.

Please note that File Items do not use pixels but rather the html size="" attribute. This means we want to be careful when changing these values, as inputting a value that makes sense for text boxes, such as 200, will be massive for file items.

Field Height

The height of the field, in pixels.

Apply To All Items - Both Field Width and Field Height have this convenience shortcut that when clicked, will make all other items on that form page the same width or height as the current item. This is very handy when we want to quickly apply the same look to all elements on that page.

TinyMCE Editor
[Text area only]

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.

Readonly

When set this field can contain a value and will submit data when the user clicks the submit button, but its value cannot be changed by the user. Please note this value can still be changed by manually editing the field in a JavaScript/Web debugger, so please be sure to not place sensitive information that cannot be changed in this field.

Field Enabled

When Yes the field accepts values and input from the user. When set to No the field ignores user input, and its value is not submitted with the form data.

User Provided Value Populates Field

When Yes the field populates with values set by the user after a page load. When set to No the field never displays values set by the user accross page loads.

While a bit strange sounding at first, "why would we not want to show a value set by the user", this has very  useful benefits for more advanced forms, particularity ones that perform data lookups. Say we have a form where we ask the user to input an invoice number for an inventory lookup system. We  never actually submit the invoice number, we just care about using that field as a lookup. The problem is when we leave the lookup page and come back, this field would now be populated with  the previous query's value. Thus, setting this option so the field doesn't remember the value  can be very useful when we want to keep our UI clean. 

Extra Attribute(s), JS, Event Code, etc

Although similar to a submit button, a button has an html type of 'button', not type=submit, which means when this element is clicked on, your form will not be submitted, but rather you must supply the event to occur.

A common use of this type of element would be to attach a history command such as onclick="history.back()", and then use it on a multi-form page to make navigating back one page easier than using text links.

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: (Prototype/Scriptaculous example)

onclick="Effect.Fade(this, { duration:.2});"

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

Extra Field Style Attributes

This field allows us to define extra style attributes for our form elements such as:

color:#cdcdcd;

It's important to consider that RackForms also applies style data, traditionally as:

font-size:12px; color:#444444; font-family:inherit; width:200px; height:70px;

In short, font properties and height/width are handled automatically via editor properties. Thus, this field is for specifying extra style attributes not handled by the RackForms UI.

This is especially useful for Bucket items, where any style data we apply will greatly enhance the look of a standard bucket, which by default has only size and position styles applied.

Conditional Processing

Field Initially Visible?

Determines if this field is initially visible to your forms users.

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 initialy 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 runtime.

 

Field Style Properties

Multi-File Uploads via Uploadify