FormLoom Plugin

FormLoom Basics

Start by adding a FormLoom page to your site. then you can editing form properties.

FormLoom Navigation Overview

When in Page Edit view, The Form Loom plugin contains five separate input areas (Simply switch between views using the buttons at the bottom of your RapidWeaver window). These views are

Form Items
These are the fields presented in your form

Header/Footer
The header and footer content areas above/below your Form Items

Form Text
Text the user will see in their browser upon successful submission of a form

MySQL Prefs
If you wish to save your form results to a hosted MySQL database, you'll configure that here.

Page Inspector
Overall Page Settings for the entire plug-in are located here.


Form Items (Fields)

To add a form item, click the + symbol. Once the item's been added, you can configure it.

Input Elements

Name
The field name the FORM RECIPIENT will see beside the user entered value in the form result email.

Title
The label of the field on the FORM PAGE

Type
The type of input field presented to the user. Select from

  • Radio A "bullet list" of options, the user may select ONE
  • Text A single line of text
  • Checkbox Very simple form element - either CHECKED or UNCHECKED, only two states possible
  • File Allows the user to attach a file.
  • TextArea A dialog style text area. Ideal for several sentences or a paragraph of text input.
  • Hidden Form element not visible to the user. For example, if you your site were available in multiple languages, you might embed a field value for English on the form submitted from the English version of your site to allow you to know what language the submitter prefers.
  • Password Allows a user to have undisclosed text entry - all characters entered will be hidden from display.

Required
Enable this checkbox if a value MUST be entered into this field before the form can be submitted


Element Options

Detail
Allows you to specify the DEFAULT selection for text based form elements. For other input types, displays a summary of your attributes.

Attributes
Different input types allow different attributes, but they work essentially the same. To add an attribute, click the + symbol in the Attribute field. If you wish to have a DEFAULT value entered in your text or checkbox fields, you can enter it in the Element Options. For Radio Buttons, you can specify Option Names (displayed to the user on the site) and Option Value (which is what will be included on the form emailed to the recipient).


Here you are given the option to place content above (header) and below (footer) your FormLoom generated form.


Form Text

The Form Text view has three tabs - Ajax Text, Email Template and Receipt Email (Toggle between the two at top of screen)

Ajax Text

Text entered here will display in the Ajax inline window notifying the user that the form was submitted.

Success Text ( Short )
Text that is displayed in Ajax response window to a successful form submission.

Success Text ( Long )
This is the text that will replace your form when a successful form submission is made.

reCAPTCHA Failed Alert
Text that is displayed in Ajax response window to a failed reCAPTCHA entry.

Attachment Size Alert
Text that is displayed in Ajax response window to a attachment-size error.

Loading Message
Text that is displayed in Ajax window when processing form submission.

Empty Required Field Alert
Text that is displayed in Ajax response window to an empty required field error.

Invalid Email Format Alert
Text that is displayed in Ajax response window to an invalid email form error.


Email Template

Templates in FormLoom allows you to format yopur emails however you like. To include values entered in your form , you will use placeholders. A placeholder is a representation of each form field based on it's name.

An example of this would be as follows...

Say we have three fields named name, email and message. In this case the place holders would be #name#, #email# and #message#.

So your Email Template may look something like this....

Name: #name#
Email: #email#
IP: #fl-ip#
Browser: #fl-browser#
Page: #fl-page#
Date: #fl-date#

Message:
#message#

Global Placeholders
As you probably noticed in the above example, we also provide some global placeholder you can use in your templates.

  • #fl-ip#
    will insert the user's IP address.
  • #fl-browser#
    will insert the user's browser and platform.
  • #fl-page#
    will insert the page the form was sent from.
  • #fl-date#
    will insert the date and time form was submitted.

Receipt Email

This template behaves exactly like the one above for emails to the Site admin except the emails are sent to the person submitting the form.


MySQL Settings

MySQL Database Connection

FormLoom is capable of generating forms which not only submit results via email, but also archive form results in a MySQL database. You'll need to get the following information about your database (this is usually available from the company that hosts your site);

Server Address
The address of your MySQL server. Default is normally localhost.

MySQL Username
The Username used to connect to your MySQL database server ( provided to you by your hosting company ).

MySQL Password
The Password used to connect to your MySQL database server ( provided to you by your hosting company ).

Database Name
The name of the database to use (some hosts offer multiple MySQL databases).

Table Name
You'll also probably want to create a table in your database to separate your Form data from other MySQL data.


Field Assignments

This is basically a simple mapping of form fields to db fields. Select a form field to save to the database. Then use the Field Name text area to enter the field name in your database this form field data should be written to.


Extras

Browser
This will attempt to save the user's browser type to the designated field name in your database.

IP Address
This will attempt to save the user's IP Address to the designated field name in your database.

Date and Time
This will attempt to save the Date and Time to the designated field name in your database. It is best that you make this field of type DATE/TIME in your database structure.


Page Inspector

Once you've setup your basic form on the Form Items pane, it's time to take a look at the advanced settings in the Inspector - this is where you'll establish rules for processing and sending the form to the desired parties.

On your FormLoom page, you'll see four tabs under the Page Inspector

  • Settings
    The basics - you really need to complete all fields on this tab to specify how your form should be processed
  • Security
    Contains options to control attachments as well as reCAPTCHA settings
  • Code
    Apply your own custom code to FormLoom's output.
  • Advanced
    Advanced settings such as SMTP funtionality.
  • Misc
    Miscellaneous settings concerning miscellaneous odds and ends of your form (Ok, we put the things here that just didn't "fit" anywhere else)


Settings Tab

To Name
The name of the person the form will be SENT TO.

To Email
The destination EMAIL ADDRESS. Enter a valid email address here.

From Email
This Pull-down menu allows you to select a value to be collected from the form - assuming most forms will solicit the submitter's email address, use that Form Item Name here.

From Name
Same as above - select the submitter's name field here.

Subject
This Pull-down menu allows you to select a value to be collected from the form to be used as the subject of the resulting email.

Receipt
If you wish an email receipt to be sent to the submitter, enable this checkbox. You can specify contents of the actual receipt email using the Form Text pane (this button is at the bottom of your main RapidWeaver window on FormLoom pages).

CC
A comma delimited list of email addresses to be Carbon Copied a copy of your form submission.

BCC
A comma delimited list of email addresses to be Blind Carbon Copied a copy of your form submission.


Security Tab

Allowed File Types
Specify allowable file types to be attached. Any files sent to you must be of one of the allowable types you specify in this field. Separate allowable types with the | symbol (Shift + \ on most keyboards)

Field Filter Restricted Words
A comma-delimited list of words ( or strings ) to be filtered out of any form submission. This is good for removing any spam injection related strings like "bcc:" or "to:".

Max Attachment Size
The max allowable size of each SEPARATE attachment here. (Note, if you have 3 file attachment fields and specify 10MB as your Max Attachment Size, that means each file may be up to 10MB - - or a total of 30MB for your form. Check with your host or ISP to make sure you don't exceed their maximum attachment size).

reCAPTCHA Settings
reCAPTCHA is a free CAPTCHA service that helps to digitize books, newspapers and old time radio shows. Check out our paper in Science about it (or read more below). A CAPTCHA is a program that can tell whether its user is a human or a computer. You've probably seen them — colorful images with distorted text at the bottom of Web registration forms. CAPTCHAs are used by many websites to prevent abuse from "bots," or automated programs usually written to generate spam. No computer program can read distorted text as well as humans can, so bots cannot navigate sites protected by CAPTCHAs.

Captcha Test
Enable this checkbox to add the reCAPTCHA text area to your form.

Public Key
Provided by http//recaptcha.net/ when you create an account. Leave blank if you just want to use our global keys.

Private Key
Provided by http//recaptcha.net/ when you create an account. Leave blank if you just want to use our global keys.

Theme
reCAPTCHA provides several different color schemes for their tests - choose one that best matches your theme/color scheme.

Language
Language used to display reCAPTCHA instructions to site visitors.


Code Tab

CSS Override Code
Customizing FormLoom forms is very *simple. All you need to do is use your own CSS code to override the default styles shipped with FormLoom. Just click on the Inspector icon, then the CSS tab, there you will enter in your custom CSS based off the classes and ids listed below...

  • #formloom = id for wrapping div of all FormLoom content.
  • #fl-form = id for div wrapping form.
  • #formloom-header = id for FormLoom Header text or html.
  • #formloom-footer = id for FormLoom Footer text or html.
  • #formloom-ajax-form = form id for ajax version of FormLoom.
  • #formloom-form = form id for non-ajax version of FormLoom.
  • .fl-text = class for text input fields.
  • .fl-textarea = class for textarea boxes.
  • .fl-password = class for password fields.
  • .fl-multiselect = classfor multiple select boxes.
  • .fl-select = class for pull-down select menus.
  • .fl-required = class for Required Symbol.

* This is an advanced feature and requires general knowledge of CSS and HTML

PHP Override Code
This feature is for power-users that are very efficient with PHP. Any code entered here has the potential to break your form so USE IT AT YOUR OWN RISK!. If you have entered anything in this field, and your form stops working, then you are on your own. Do not send support tickets regarding this feature. Look at the output code and figure it out yourself. Not trying to sound harsh, but this is for experienced developers that need FormLoom to do a little extra.

So what can I do with this you ask? Well looking at the example below, let's assume you have a select menu named "department" and you want your form sent to a specific email address based on this input. Below may be a way you could do this.

switch($_POST['department'])
{
	case "sales": 
	$sendToEmail = "sales@yoursite.com"; 
	break;
	
	case "support":
	$sendToEmail = "support@yoursite.com"; 
	break;
	
	case "returns":
	$sendToEmail = "returns@yoursite.com"; 
	break;
	
	default: 
	$sendToEmail = "info@@yoursite.com"; 
	break;
	
}

BE CAREFUL! You are on your own with this one.


Advanced Tab

SMTP Settings
This setting is usually not needed, but with some hosts it is necessary. Enabling SMTP causes FormLoom to send all form submissions via the SMTP protocol. If you do not know what SMTP means, then you should use Google.

  • SMTP Server Name - Server Host name to use.
  • SMTP Server Port - Server Port to use ( default is 25 ).
  • SMTP Username - Usually your email address.
  • SMTP Password - Password associated with the Username (above).

From Address
In some situations, a web host will require that web forms be sent from your own email address, regardless of what the user enters into your form. By enabling Use my address you tell FormLoom to send the form with your email as the To AND From addresses. The User's input will be included as the ReplyTo address.


Misc Tab

Submit Button Text
Text you'd like presented on the button the user clicks to submit form.

Reset Button Text
Text you'd like presented on the button the user clicks to reset form.

Enter Security (captcha) Code Text
Default is "Enter Security Code" but you can customize or translate to your desired language.

Required Symbol
The symbol that will appear next to form fields that you have designated as required fields.

Required Text
The text that denotes a field is required. You can customize or translate to your desired language.

"There was an error" Text
Error text that will appear if there is an error in the form submission.

Date Field Format
Format a date into a string value with a specified format.
The format can be combinations of the following:

  • d - day of month (no leading zero)
  • dd - day of month (two digit)
  • o - day of the year (no leading zeros)
  • oo - day of the year (three digit)
  • D - day name short
  • DD - day name long
  • m - month of year (no leading zero)
  • mm - month of year (two digit)
  • M - month name short
  • MM - month name long
  • y - year (two digit)
  • yy - year (four digit)

Enable Ajax Processing
By default, FormLoom uses AJAX javascript to display failure or success messages to your user. You have the option of disabling the inline errors and using traditional pages to provide a success/fail page to your visitors. May be useful if you want the user taken to a download page, etc after submitting the form.

Non-Ajax Success URL
Page users will be taken to if their form is successfully processed. REQUIRED if NOT using Ajax processing.

Non-Ajax Error URL
Page users will be taken to if their form cannot be processed. REQUIRED if NOT using Ajax processing.