Basic Attributes

Label

The text your button displays.

Name/Value

This field only becomes important if you have more than one submit button on the form, in that you are using the Submit Route feature. As a general rule, you should keep your Name/Value and id the same for your buttons.

id

Please see Name/Value above.

Submit Route

The Submit Route text field lets you create custom form routing, in that the value of this field will be the page your user goes to if the form submission was successful.

The most common use of this would be to create a form where you need to provide users with an 'optional' part of your form. For example, your form asks for the current users information on page 1, but also has a submit button that allows users to enter a 'friends' information. The friend portion is optional however, so you also want users to simply skip ahead to the next part of the form if they so choose.

Thus, we would build page 1 with two submit buttons:
Submit Button 1 would be called 'Submit' and have no value for the Submit Route text box; When clicked, this button follows the value from the Page Properties On Success property, the on Success property being page3.php. It's because this button has no value in the Submit Route text box that this default behavior is observed.

The second button would be called 'Add Friend' and have a value of page2.php. That means when clicked on, the user is taken to the optional, second page of the form. They could then add the friends info, and when they click submit on that page, would be routed back to page3.php.

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.

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:
style="color:#cdcdcd;"

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

Conditional Processing

Conditional Processing for submit buttons is the act of directing a user to different pages based on their responses to our forms questions. RackForms is particularly powerful in this regard as testing and acting on such conditions is handled using a simplified PHP code syntax. This means we can create just about any logic we need to handle our forms workflow, but it doesn't require complex programming knowledge.

At the most basic level each form field element we create is assigned a unique Name/Value property. This Name/Value property differentiates this form item from others, and because it is unique, is the key to creating conditional logic.

For example, if we create a text box and assign it a Name/Value of pet_preference, we can use that pet_preference identifier in our Conditional Code statement to route users to a particular form page when they hit submit based on their response that that form field.

Of course this example only makes sense if we have unique pages to go to, so for this example we'll create a three-page form. The first page will hold our text box with the pet_preference text box, the second and third pages will be named cat.php and dog.php, respectively.

Now we'll create our Conditional Logic on the first page's submit button as follow:

if(#{pet_preference} == 'Cats'){
	goto ${cat.php};
} 
if(#{pet_preference} == 'Dogs'){
	goto ${dog.php};
}

As you can see, the syntax isn't that difficult--we simply ask if a a field is equal to some value and then goto that page if it is. PHP developers will recognize this syntax immediately, though you will also notice the use of tokens #{} and the goto. The tokens are replaced with the field value at runtime, the goto is replaced with a simple header() call.

This is what is meant by 'simplified syntax'. The full PHP arsenal is at our disposal, but we needn't become bogged down by overly complex code structure and identifiers. Anytime we need to check on a form variable we use the token, when we want to go to a page we use goto and insert the page name, also in token format.

Field Initially Visible?

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

Conditional Route Statement

This is the code that will be run when the submit button is pressed by the user. It is directly tied to the select items directly beneath, in that when you want to insert a field or page token we simply select one from the two lists.

Insert Field List

Conditional logic is performed by comparing a users entry value to a value you predetermine. Thus, a huge part of this process is inspecting our users input. This select item makes it easy to 'insert' the field elements you need to inspect, as it will automatically wrap the element in the proper token tag and insert it at the current location of your cursor.

If you need to check an array value, as you would for checkboxes, you would add the appropriate index position with a [n]. For example, a checkbox at position 1 would be:

if(#{checkbox1[1]} == 'Yes'){
	....  
}

Insert Page List

Similar to Insert Field List, only this item will insert a page token to be used with the goto keyword.

Custom CSS

Normal State CSS

The CSS for the normal, non-active state of the element. For buttons this could be something like:

moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
cursor: pointer;
background: none no-repeat 0 0 #F6F6F6;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border-style: solid;
border-width: 1px;
color: #F2F2F2;
display: inline-block;
font-family: "myriad-pro-1","myriad-pro-2",sans-serif;
font-size: 25px;
font-weight: bold;
height: 52px;
letter-spacing: -0.5px;
margin-top: 10px;
padding: 0;
text-shadow: -1px -0.5px 1px
rgba(0, 0, 0, 0.8);
width: 180px;
text-decoration: none;
/* backgrounds */
-moz-box-shadow: 0 0 7px #acebff !important;
-webkit-box-shadow: 0 0 7px #ACEBFF !important;
box-shadow: 0 0 7px #ACEBFF !important;
background: #85BC13;
background: -moz-linear-gradient(top, #85BC13 0%, #5AA615 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #85BC13), color-stop(100%, #5AA615));
background: -webkit-linear-gradient(top, #85BC13 0%, #5AA615 100%);
background: -o-linear-gradient(top, #85BC13 0%, #5AA615 100%);
background: -ms-linear-gradient(top, #85BC13 0%, #5AA615 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#85BC13', endColorstr='#5AA615',GradientType=0 );
background: linear-gradient(top, #85BC13 0%, #5AA615 100%);

The key is this code is never wrapped in braces or uses a selector, as RackForms takes care of that for us. We only add raw CSS code.

Over State CSS

This is the CSS code that affects the elements hover or active state. This happens when a user mouses-over the element. For buttons this is usually just a modified gradient and drop shadow.

Focus State CSS

The display of the element when it receives focus.

The neat trick here is as focus happens when we click or tab to an element, we can create a "clicked" animation for our element by supplying a style different from the Over/Hover and Normal state.

Validation

Captcha Type

Select from: No CAPTCHA, Default CAPTCHA, reCAPTCHA, 3D Captcha, or Challenge Question.

Captcha Error Message

The message to show users if the captcha element is not filled out correctly. Defaults to: Security answer incorrect, please try again., though you may wish to change it to better match the captcha type.

Default Captcha Options

# Characters

By default the captcha block requires 5 characters to be deciphered and typed in correctly by the end-user to validate. You can change this however, with a numeric value of your choice.

Image Width / Image Height

The width and height of the captcha block.

Captcha Text Color

The text color of the Enter Code copy.

Captcha Text

The text to display next to the captcha input field. Defaults to English with a value of: Enter Code:

reCaptcha Options

reCAPTCHA uses a feature rich external interface to generate captcha codes. This is a great choice for broad audiences, as reCAPCHA uses audio as well as text. This may also be a better solution for Windows server users, as their are known bugs with font handling on those systems with regard to the Default and 3D Captcha Methods.

reCAPTCHA Public Key / reCAPTCHA Private Key

When you create an account at the reCAPTCHA web site you will receive two keys. One is a public key, the other is private. In order to use the reCAPTCHA system with RackForms you will need to provide the RackForms editor with these values. You can perform this step in two main ways:

The first way is to simply supply the values in the Editor text boxes.

The second way is to hard-code the values into the /app/movefiles/security/secure.php file. Open this file in a text editor and look for the lines:

$publickey = '';
$privatekey = '';

Supply your key values into the variable like so:

$publickey = '3LtoMwQSDWERAKPF1dDEud-Jo5cIbzw15B4aZ7WB';
$privatekey = 6LtoCwQYEHDBDDKPF1dDEud-Ja7crtdfw15B4aZ7WB';

Notice how we place the key text in between the tick marks.

If you provide these elements correctly, when you export a form that uses reCAPTCHA, you will see a UI element that looks very similar to the RackForms editor appear on your form.

reCaptcha Style

This option lets us select one of the styles reCaptcha supports. See them in your own test form, or here.

reCAPTCHA Language Code

Allows us to set the interface language of the reCaptcha element.

Challenge Captcha Options (Build 623 and up)

Challenge Captcha is a text based question/answer system that requires users to reply to a text-based question with the correct answer. This type of challenge, while incredibly simple, is often the most effective as with a suitable question it effectively eliminates bots from completing your form.

Of course this only works if you make your question hard enough so that it's not easy to spam the answer (do not use questions that can be answered with numbers, for example), and you change the question on a regular basis for popular forms that could become targets of SPAM bots (your form could be cracked by a human and then a SPAM bot is programmed to know the correct answer).

Challenge - Question

This is the question to ask of your user. Make sure to include any hints on how to answer the question.

Challenge - Answer

This is the exact answer to your challenge question. Make sure the spelling and capitalization is easy to guess!

Challenge Text Color

This is the color of the text your challenge question will be presented in.

noCAPTCHA reCAPTCHA

This option uses Google's newest version of reCAPTCHA, and is highly recommended for its simplicity and security. It requires a site key and secret, both of which can be created here. Please note this feature will not be available if your server is running a PHP version older than 5.2.