Save
In Brief: Save the current form page's items.
Dependencies: One or more form elements on a finished page, and the form must be using one of the Save & Resume Later? methods.
Hints & Tricks: To use this item, the form must be using one of the Save and Return methods.
Options/Properties
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.
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
New in RackForms 2, Conditional Processing is the act of directing our forms users 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.
You can download this sample job here to give it a shot yourself.
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.
Save And Return Logic
Overview
In RackForms, we generally use standard submit buttons to save a form's state and advance to the next page. Times may arise, however, where we wish to save a forms state but not submit to the next page. Common examples include tax preparation and long-form team registration forms. In these cases we want to save a users work, but not interrupt the current page's progress.
However, this also means that for the save button to be of use, we need to actually:
a. save the users work
b. Have a way to retrieve that work at a later time.
It is for these reasons that this button only makes sense when coupled with one of RackForms' Save and Return Later modes. When done so, pressing the save button will save that pages responses to the special table RackForms uses to save persistent form entries, which can then be retrieved at a later time using that methods retrieval methods.
That said, it is important to note this feature will work best with the Session Based persistence method. This is because this method does not require a special link to retrieve a users work, only that they be logged into a form at the time the save button is pushed, and the previous form entries are to be retrieved.